Skip to content

Navigation

NavigationMenu

A site header navigation with dropdown panels of links: mega menus with icons and descriptions.

Ant Design: Menu mode="horizontal" with submenus

import { NavigationMenu } from '@alea/ui';

Examples

Header with mega menus

Panels of links with icons and descriptions.

Links only

Without panels it's a simple, accessible header nav.

Props

`NavigationMenu` props

A site header navigation with dropdown panels (mega menus), using the disclosure pattern: buttons open panels of links (Radix NavigationMenu, Ant Menu horizontal).

Prop	Type	Default	Description
`items`required	`(NavLinkItem \| { label: string; items: NavLinkItem[]; footer?: ReactNode; })[]`	-	Links, or groups that open a panel of links.
`aria-label`	`string`	-	Name of the navigation. Default "Main".
`className`	`string`	-	Extra class names for the root element.
`current`	`string`	-	The href of the current page (gets aria-current).

The disclosure pattern: buttons with aria-expanded open panels of plain links, which is what screen reader users expect from site navigation.
The current page has aria-current.

Keyboard

Key	Does
`Tab`	Moves through items and open panels
`Enter` or `Space`	Opens a panel
`Escape`	Closes it and returns focus

Do and don't

Do

Give each link a short description in mega menus.
Mark the current page.

Don't

Don't nest panels inside panels.
Don't open panels on hover only: they open on click and keyboard.