Responsive NavBar | How to Create Responsive NavBar Using ReactJS and Ant Design | Menu Tutorial
HTML-код
- Опубликовано: 13 ноя 2022
- #reactjs #antd #responsivenavbar
In this responsive NavBar tutorial I have explained how to create responsive nav bar using react JS and Ant Design
This video focuses on
- How to create responsive nav bar using react JS and Ant Design
- How to use media query for making responsive NavBar in Reactjs app
- How to create responsive NavBar from scratch
- How to create react app top header for desktop resolution
- How to create app side bar drawer for small resolution or mobile resolution
- How to convert top navigation bar into side bar on mobile
- How to show side menu hamburger on small screen
- How to customize ant design menu colors
- How to open and close ant design menu on hamburger click
- How to switch between responsive desktop and mobile menu
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For details on how to use Menu component from Antd and how to implement its navigation, please go through this videos.
Antd Menu: • How to use Ant Design ...
Antd Menu with Navigation: • App Side Menu with Rou...
For details on how to use Ant Design Drawer component, please go through this video. • How to Use Ant Design ...
For details on how to use Ant Design Icons, please go through this video. • How to use Ant Design ...
For more details on ant-design, please visit its documentation at ant.design/components/menu/
Happy Coding!
![KFF Singapore Badminton Open 2024 | Alfian/Ardianto (INA) [7] vs. Liang/Wang (CHN) | QF](http://i.ytimg.com/vi/g0QGafkoT2o/mqdefault.jpg)
great tutorial. How about creating a submenu based on what main option is selected? I'm having a lot of truble with layout and the Sider element.
Hi,
Please let me know the details what you are facing may be comment here or send me email at aamircodewith@gmail.com I can check that.
Thanks
It‘s very useful, thank you! and I have a question: I build this component, the navbar active state is not correct when I click Chrome's back button. and how to fix it?
Hi @週書祥
You can achieve that using a technique I mentioned in following video
ruclips.net/video/IUkAJUgUHEM/видео.html
it will be something like below
1- You can declare the menu items keys like they appear in the chrome browser website address bar so something like
"/home", "/contactUs" and so on
2- You can set the defaultSelectedKeys/selectedKeys menu prop based on current user window.location.pathname so that even if user refreshes the page it still highlight the appropriate menu item
3- You can keep track of window location path using a useEffect hook so whenever location changes you update your state variable to reflect the menu
So overall it should look like below
const App = () => {
const [selectedKeys, setSelectedKeys] = useState([]);
const navigate = useNavigate();
useEffect(() => {
setSelectedKeys([window.location.pathname]);
}, [window.location.pathname]);
return (
{
navigate(item.key);
}}
items={[
{
label: "Home",
key: "/home",
},
{
label: "Contact Us",
key: "/contactUs",
},
]}
>
);
};
export default App;
Hope it was helpful.
Please let me know if you need any more help on that.
Thanks
@@CodeWithAamir It's work!😊 thank you again.
That's great!
Cheers!
Hi Amir, how can I display an image as first item of menu in header. and rest of item in center and 3 item in right side.
Hi @Asif Khan,
As per my knowledge there is not such built in function or prop that we can use for this. We have to manipulate it according to our needs like.
In a parent div make the items display space-between and put one image as first item, then a menu with rest of the menus and then a 2nd menu with only 3 items so it will look something like below
//Left side image
//Center menu
//Right side menu
I hope you got the idea. Please let me know if you need any more information on that.
Thanks
how to change there hover effect and other css properties...please let us know🥺
Hi @Anshuman Sharma,
There are multiple ways to achieve that
- One is just overriding the css/hover styles as explained in this video ruclips.net/video/gpG967lkiJc/видео.html
- Other one is using the themes where you can give your color etc. styles in the theme and those should also work as explained in following videos
antd v5.x:ruclips.net/video/tgD-csfLNUs/видео.html
antd v4.x:ruclips.net/video/KIS-ONH207A/видео.html
Please let me know if that was helpful or you need any more help on that. Thanks
How do i add an onclick to the item? To navegate to the /login page for example ?
Hi
I have explained the onClick and navigation to other pages via routes like /login , /dashboard etc. in following video
ruclips.net/video/IUkAJUgUHEM/видео.html
Please have a look and kindly let me know if you need any more help on that further.
Thanks
@@CodeWithAamir Ty so much, u are doing gr8
Hello this is an incredible tutorial, how can I shift the login menu item to the right for instance and leave the rest on the left
Hi @Felix,
Separating one menu item like login to the right and rest on the left side is not yet supported by antd menu as of today. So as a workaround you can either create an other menu with only login option and align that to the right side or you can just create a single button for login item and align that to the right.
I hope you got it. Please let me know if you need any mores information on that. Thanks
@@CodeWithAamir Makes sense, but how about when you have to think of a condition where the state is involved such that you need to check if the user is logged in so as to choose which menu items stays in the right and the rest remain on the left
Hi @Felix Kiptoo,
The menu works well with dynamic/state based menu items/array as well. So based on you condition you can just update the menu item list/array and pass that to the Menu component in items prop as its used at 00:50 in the video and it should show only those items accordingly.
Please let me know if you face any issues.
Thanks
@@CodeWithAamir here is the return function that I would love to get assisted to shift the login and register to the right, I have solved the issue with state:
return
{
()
}
Hi @Felix Kiptoo,
Did that worked or still you need assistance on this?
e code ki github link send mee bro please
How can we align the menu items to the right ?
Hi @Soulis HCR2,
The best workaround is to wrap the Menu inside a div container and set it css properties to show children as flex-end like
I hope you got the idea. Please let me know if you need any more information on that.
Thanks
@@CodeWithAamir i want to align the first item on the left side and other to the right side how i do that ?
Hi @R P ,
As per my knowledge there is not such built in function or prop that we can use for this. We have to manipulate it according to our needs like.
In a parent div make the items display space-between and put one menu with only single item at left and then a 2nd menu with rest of the items so it will look something like below
//Left side menu
//Right side menu
I hope you got the idea. Please let me know if you need any more information on that.
Thanks
@@CodeWithAamir I have been using the same mechanism - but on mobile devices, it then shows two burger menus for this. Any other workaround? This is one of the most common design patterns, frustrating that antd doesnt allow it.
antd is error how to resolve it
Can you please share the error which you are getting so I may suggestt the solution. Thanks
Is it fixed or not
Hi @mutebi ug official,
It is not fixed yet, as its a standalone Navbar component so if needed we can just add a fixed css to its parent div or we can a wrapper on it wherever we need to integrate it to make it fixed.
Please let me know if you need any more help on that. Thanks