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;
}