Skip to main content
Version: v6.8.1

Navigation

Adding a new item to sidebar

To add a fresh item to the sidebar, navigate to src/layout/hydrogen/menu-items.tsx. Locate the menuItems constant, which houses all sidebar items.

Each menu item is an object with properties like name, href, icon, and dropdownItems. Follow this template:

src/layouts/hydrogen/menu-items.tsx
export const menuItems = [
...previousMenuItems,
{
name: 'Your new Menu',
href: 'menu-url', // optional
icon: <PiFileImageDuotone />, // optional
// optional, if your wants childrens
dropdownItems: [
{
name: 'Products',
href: routes.eCommerce.products,
},
],
},
];

Customize and expand your sidebar effortlessly!

{
name: string;
href?: string;
icon?: JSX.Element;
dropdownItems?: undefined;
}