Skip to content
Compositions

MegaMenu

A header's full-width menu of catalogue sections: a trigger in the header opens a sheet beneath the shell's chrome, over a dimmed sidebar and page. It opens on a press, not on hover; Escape, a press on the page or choosing a link closes it, and focus returns to the trigger. Modal by default, so the page behind it is blocked and does not scroll. Import from "@instruments/materia-ui/compositions/mega-menu".

Usage

import { MegaMenu, MegaMenuContent, MegaMenuContentProps, MegaMenuLink, MegaMenuLinkProps, MegaMenuProps, MegaMenuSection, MegaMenuSectionProps, MegaMenuTrigger } from "@instruments/materia-ui/compositions/mega-menu";

Best practices

  • Use it in a shell whose chrome is lifted (Sidebar header, the fixed SidebarLayoutHeader): the panel fills the window from the top, beneath the chrome, so the brand row, search and actions stay on top of it.

  • Keep it to navigation. Every entry is a MegaMenuLink, which closes the menu as it navigates; actions belong in a DropdownMenu.

Props

MegaMenuContent

PropTypeDefaultDescription
aria-label(required)string

Names the menu's navigation landmark, such as "Product categories".

children(required)ReactNode

A lead MegaMenuLink, then one MegaMenuSection per column.

classNamestring
positionerClassNamestring

MegaMenuLink

PropTypeDefaultDescription
leadbooleanfalse

The "view all" link that opens the menu, set larger across its top.

MegaMenuSection

PropTypeDefaultDescription
href(required)string

The section's own page, which its heading links to.

title(required)string

The section's name, shown as its heading.

children(required)ReactNode

Its MegaMenuLinks, one per category.

refLayoutRef | undefined

Ref to the rendered host, whichever element as selects.

directionLayoutResponsiveValue<FlexDirection>"column"

Main-axis direction. Accepts a per-breakpoint responsive object.

gapLayoutResponsiveValue<"base" | "none" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "3xs">"base"

Gap between items, from the spacing scale. Accepts a per-breakpoint responsive object.

alignLayoutResponsiveValue<FlexAlign>"stretch"

Cross-axis alignment. Accepts a per-breakpoint responsive object.

responsiveModeResponsiveMode"screen"

Whether responsive values resolve against the viewport ("screen") or nearest container ("container").

justifyLayoutResponsiveValue<FlexJustify>"flex-start"

Main-axis distribution. Accepts a per-breakpoint responsive object.

guidelinesbooleanfalse

Show dashed outline guidelines during development.

Also exports

  • componentMegaMenu
  • interfaceMegaMenuContentProps
  • interfaceMegaMenuLinkProps
  • typeMegaMenuProps
  • interfaceMegaMenuSectionProps
  • componentMegaMenuTrigger

Composition

Builds on

Anchor, Box, Grid, Heading, Popover, Stack