Storefront

Mega menu

The primary nav with its menus. Hover or focus on World of Coach opens the hub's categories, set large in Garamond, beside one campaign picture. Escape closes it.

components/coach/blocks/mega-menu.tsx

Preview

Live, on the prototype's content. Switch to mobile to see it at 390px.

1440pxOpen

Anatomy

01Nav row, 12px caps, the open item underlined
02Panel under the nav, white, soft shadow
03Story categories in Garamond, 22px
04Campaign image, 5:4

Usage

components/coach/blocks/mega-menu.tsx

import { MegaMenuNav } from "@/components/coach/blocks/mega-menu";

<MegaMenuNav
  items={[
    { label: "New", href: "/new" },
    {
      label: "World of Coach",
      href: "/stories",
      menu: {
        links: [{ label: "Latest stories", href: "/stories" }, { label: "Runway", href: "/stories/runway" }],
        image: { src: "/images/stories/soundtrack.jpg", alt: "…" },
      },
    },
  ]}
/>

Props

Prop	Type	Default	Description
items*	MegaMenuItem[]	—	label, href, and an optional menu of links and one image. Items without a menu are plain links.
defaultOpen	string	—	The label open on first render, for previews and screenshots.
className	string	—	Merged last. For spacing around the block, not for restyling it.

Guidance

Keep a menu to seven or eight links.
Pick the image from the current campaign, so the menu is a way into the stories.

Don't

Open on click only. It opens on hover and focus, with a short delay so passing over the nav doesn't flash menus.
Use it below desktop. On a phone the header's menu button carries the categories.

Where it's used

Site header