Playground Storybook GitHub

Navigation

Navigation menu

A site navigation bar where some items open a panel of links.

Selector: mui-navigation-menu

Import

import { NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@mushilu-san/ui/navigation';

Overview

Navigation menu is a role="navigation" landmark. A trigger button opens its content panel, and each link in the panel is reachable by keyboard. Only one panel is open at a time.

Triggers carry aria-expanded. Escape closes the open panel.

When to use

A site header with a few sections, where each section has several links.
Mega-menu style navigation on desktop.

When not to use

Actions that change the document, such as "Save". Use a menu. Use Dropdown menu instead.
A single list of links. Use nav links. Use Nav link instead.

Guidelines

Do

Keep each panel to a short list of links.
Label the navigation with what it is, such as "Main navigation".

Don't

Do not put forms or large content inside a panel.

Accessibility

Roles and attributes

Element	Role	Notes
`host`	navigation	`aria-label` from `label`, default "Main navigation".
`trigger`	button	`aria-expanded` follows the panel state.
`link`	link (native)	`aria-current="page"` when `active`.

Keyboard

Keys	Action
`TabShiftTab`	Moves between triggers and the links of an open panel.
`EnterSpace`	Opens or closes a panel on its trigger.
`Escape`	Closes the open panel.

Links inside a panel stay reachable by keyboard. Do not hide them from assistive technology.

API

NavigationMenu

Selector: mui-navigation-menu

Name	Type	Default	Description
`label`	`string`	`'Main navigation'`	Accessible name of the navigation landmark. Default `Main navigation`.

CSS parts

::part(root)

NavigationMenuItem

Selector: mui-navigation-menu-item

CSS parts

::part(item)

NavigationMenuTrigger

Selector: button[muiNavMenuTrigger]

CSS parts

::part(trigger)

NavigationMenuContent

Selector: mui-navigation-menu-content

CSS parts

::part(content)

NavigationMenuLink

Selector: a[muiNavMenuLink]

Name	Type	Default	Description
`active`	`boolean`	`false`	Marks the link as the current page with `aria-current="page"`. Accepts attribute presence, e.g. `<… active>`.

CSS parts

::part(link)

Tokens

--mui-color-surface-raised
--mui-color-border
--mui-shadow-2
--mui-color-focus-ring