Skip to main content
Version: v7.0.0

Navigation

Adding a new item to sidebar​

To add a fresh item to the sidebar, navigate to apps/isomorphic/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:

apps/isomorphic/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 children's
    dropdownItems: [
      {
        name: "Products",
        href: routes.eCommerce.products,
      },
    ],
  },
];

Customize and expand your sidebar effortlessly!

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