Navigation Menus

The header navigation is defined in src/components/Header/menuData.ts. It exports a menuData array that the header component renders. Both top-level links and dropdown submenus are supported.

Menu Structure

// src/components/Header/menuData.ts
export const menuData: MenuItem[] = [
  {
    title: "Shop",
    path: "/shop",
  },
  {
    title: "Pages",
    submenu: [
      { title: "Cart", path: "/cart" },
      { title: "Wishlist", path: "/wishlist" },
    ],
  },
  {
    title: "Contact",
    path: "/contact",
  },
];

Adding a New Top-Level Link

{
  title: "About",
  path: "/about",
}

Adding a Dropdown

{
  title: "Company",
  submenu: [
    { title: "About", path: "/about" },
    { title: "Careers", path: "/careers" },
    { title: "Contact", path: "/contact" },
  ],
}

MenuItem Type

The type definition for menu items is in src/components/Header/types.ts. The key fields are:

• title — Display label (string, required)
• path — Route path (string, required for top-level links)
• submenu — Array of child MenuItem objects (optional)

Active State

The header automatically highlights the active nav item based on the current route using Next.js usePathname(). No additional configuration is needed.