This package controls which item must be open in sidebar menu or selected base on route even after refreshing page and gives you a good structure for creating sidebar menu
https://active-menu-item-demo.vercel.app/
Install activate-menu-item with npm
npm install activate-menu-item
const NavigationList = [
{
id: "information",
title: "user information",
children: [
{
title: "user personal information",
path: "/info/personalInfo",
activefor: [
{
path: "/info/personalInfo",
},
],
},
{
title: "user business information",
path: "/info/businessInfo",
activefor: [
{
path: "/info/businessInfo",
},
],
},
],
},
];
import { findActiveItem, createSidebar } from "activate-menu-item";
import { useLocation } from "react-router-dom";
import { Menu } from "antd";
import "antd/lib/menu/style/css";
const { SubMenu } = Menu;
function App() {
const location = useLocation();
const { activePath, openKeysItems } = findActiveItem(
NavigationList,
location.pathname
);
return (
<Menu defaultOpenKeys={openKeysItems} selectedKeys={[activePath]}>
<SubMenu key="information" title="user information">
<Menu.Item key="/info/personalInfo">
user personal information
</Menu.Item>
<Menu.Item key="/info/businessInfo">
user business information
</Menu.Item>
</SubMenu>
</Menu>
);
}
you can use NavigationList to create sidebar with createSidebar function. this is helpful for bigger NavigationList
you must provide id property for submenu and for menu items you must add path property in NavigationList
import { createSidebar } from "activate-menu-item";
import { useLocation } from "react-router-dom";
import { Menu } from "antd";
import "antd/lib/menu/style/css";
const { SubMenu } = Menu;
const ItemSidebar = ({ data, ...others }) => {
// dont forget to pass others data to return component before key property
return (
<Menu.Item {...others} key={data.path}>
{data.title}
</Menu.Item>
);
};
const SubmenuSidebar = ({ data, ...others }) => {
// dont forget to pass others data to return component before key property
return (
<SubMenu {...others} key={data.id} title={data.title}>
{others.children}
</SubMenu>
);
};
export function App() {
const location = useLocation();
const { activePath, openKeysItems } = findActiveItem(
NavigationList,
location.pathname
);
return (
<Menu defaultOpenKeys={openKeysItems} selectedKeys={[activePath]}>
{createSidebar(ItemSidebar, SubmenuSidebar, NavigationList)}
</Menu>
);
}