App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS | Side Bar Tutorial

#reactjs #antd #sidebar
In this video tutorial I have explained how to create App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS.

This video focuses on
- How to create app side bar using antd menu and react-router-dom in ReactJS
- How to add icon in app side bar or menu options
- How to create Routes for different side menu options
- How to route to different components or pages using react router dom routing
- How to layout an application page that contains Header, footer, side menu or side bar and main page content
- How to use antd menu key to navigate to a particular page using useNavigate hook
- How to show menu item selected on page refresh or user directly moving to a direct link using current browser location path name
- How to add application pages routes using react router dom v6
- How to highlight a link or side bar item
- How to define antd menu items
- How to show sub menu using antd menu component in ReactJS
- How to add an option like sign out in side menu without its routing
- How to create ReactJS components to add in different page elements
- How to add BrowserRouter around the main App component
- How to add style to div to make it render children horizontally or vertically
- How to move footer to stick at bottom of page

Happy Coding!

[luq]

one thing people may miss,
if you have parent route, like you have many sub routes under home page
do not forget to set it with a start
<Route path="/home/*" element={<Home />} /> ✔
instead of
<Route path="/home" element={<Home />} /> ❌

[keithgoddard]

I'm just starting to explore Ant Design, although I've got years of experience with React... and this was super helpful! Thank you so much for taking the time to put this together, I really appreciate it.

[unanimedestino]

Your are the best, please don't stop to make ANT DESIGN VIDEOS

[vishalkumaryadav]

Thank you so much sir for this video it was really very helpful

[anantjain]

thanks, i am facing a problem to add icon on submenu on collapsable menu

[umakuwar]

I facing some issue like
useNavigate()may be used only in the context of a <router >component

[itsahmedbasha]

Thanks for the tutorial, it really helped me to creata a fixed sidebar for my POC, Thanks once again 🙂
Keep creating videos like this, Good Luck!

[anmolarora]

Thank you brother, you are such a saviour

[zhuofeng]

You must be the indian superman ! ! ! Thank you ! ! !

[regoresconde]

Hi Aamir! Great vid as always! Was wondering how would you add a collapsible feature? or a responsive one? :D

[anilanaparthi]

How I can render login component without that layout header and sider

[mutebiugofficial]

How did you do with with react Router v6 to change components basing on menu items selected

[uboxtech]

thanks for these wonderful tutorials brother

[mehakgupta]

how to make this side bar responsive? so that it collapses for mobile mode?

[mostafafartaj]

Thanks for the tutorial, How I can create login with custom layout and route

[mutebiugofficial]

If I make the header fixed, it goes beyond the view, how possible can I make it to fit my page!!!. The same with side bar!...

[maribee]

hi, Do you know why I get an error when I use AntD's Menu in Next.js?
I have created a user sidebar in UserRoute. But I get an error.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application

It is a simple code, but I can't figure out why the error occurs.

import { useState, useEffect } from "react";
import Link from "next/link";
import { Menu } from "antd";
import { useRouter } from "next/router";
import {
UserOutlined,
DollarOutlined,
ProfileOutlined,
StarOutlined,

const UserNav = () => {
const [current, setCurrent] = useState("");
const router = useRouter();
const currentPath = router.pathname;
const onlyWidth = useWindowWidth();

useEffect(() => {
process.browser &&
}, [process.browser && window.location.pathname]);

const items = [
{
key: "/user/dashboard",
label: "user/dashboard"",
icon: <UserOutlined />,
link: "/user/dashboard",
},
{
key: "/user/payment-information",
label: "user/payment-information"",
icon: <DollarOutlined />,
link: "/user/payment-information",
},
{
key: "/user/portfolio",
label: "/user/portfolio",
icon: <ProfileOutlined />,
link: "/user/portfolio",
},
{
key: "/user/content-list",
label: "/user/content-list",
icon: <StarOutlined />,
link: "/user/content-list",
},
];

return (
<Menu
style={{
width: 256,
}}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
items={items.map((item) => ({
key: item.key,
icon: item.icon,
label: (
<Link href={item.link}>
<span>{item.label}</span>
</Link>
),
}))}
/>


);
};

export default UserNav;

[manjunath-sde]

is there any way to make the sidebar alone unscrollable whilst the content being scrollable if there's any?

[uboxtech]

btw i have a question, how to handle the default selected key if we have nested route like /account/settings OR /account/dashboard like that

[veervirk]

Hey Amir
I am facing issue while doing this.. routing is ok but menu selection is not happing when I click on menu's. please help regarding this.