Navigation Menu primitive

Headless Navigation Menu: the behavior, keyboard support and ARIA of the WAI-ARIA Disclosure navigation pattern, with no styles.

@ndop/primitives/navigation-menu
WAI-ARIA: Disclosure navigation

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Navigation Menu is built on this one.

import {
  NdNavigationMenu,
  NdNavigationMenuList,
  NdNavigationMenuContent,
  NdNavigationMenuItem,
  NdNavigationMenuLink,
  NdNavigationMenuTrigger,
} from '@ndop/primitives/navigation-menu';

Accessibility

Implements the Disclosure navigation pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`Tab`	Moves focus through the buttons, top-level links and the open panel's links, in document order.
`Enter`or`Space`	On a button, shows or hides its panel.
`ArrowDown`	On a button, opens its panel and focuses its first link.
`ArrowRight`or`ArrowLeft`	On a top-level button or link, moves focus to the next or previous one, wrapping.
`Home`or`End`	On a top-level button or link, moves focus to the first or last one.
`Escape`	Closes the open panel and returns focus to its button.

Focus

Opening a panel with Enter, Space or a click keeps focus on the button.
Focus leaving the navigation closes the open panel.

Right-to-left

In right-to-left layouts the top-level items run from right to left, so ArrowLeft moves to the next one and ArrowRight to the previous one. Direction comes from the nearest dir attribute.

API reference

NdNavigationMenu

[ndNavigationMenu]from @ndop/primitives/navigation-menu

A site's navigation: the WAI-ARIA disclosure navigation pattern, a list of links and buttons that each show a panel of links. It uses no menu roles, and each panel stays after its button in the document (ADR-0004, amendment 5), so Tab flows through it and its links render on the server. Put it on a nav named with aria-label.

NdNavigationMenu binding	Type	Default
`[openDelay]` How long the pointer rests on a button before its panel opens, in ms.	`number`	`200`
`[closeDelay]` How long a panel stays after the pointer leaves its item, in ms.	`number`	`300`
`[(value)]` The open item's value, or `null` when every panel is closed. Two-way bindable with `[(value)]`.	`string \| null`	`null`

Data attribute	Values
`data-state`	—

NdNavigationMenuList

[ndNavigationMenuList]from @ndop/primitives/navigation-menu

The list of top-level items. Put it on a ul.

NdNavigationMenuContent

[ndNavigationMenuContent]from @ndop/primitives/navigation-menu

Its item's panel of links. It has the hidden attribute while closed and stays after its button in the document.

Manages id, hidden.

Data attribute	Values
`data-state`	—

NdNavigationMenuItem

[ndNavigationMenuItem]from @ndop/primitives/navigation-menu

One top-level item, on an li: a link, or a button with its panel. The pointer leaving it closes its panel after the close delay.

NdNavigationMenuItem binding	Type	Default
`[value]` Its value, which the root's `value` holds while it's open.	`string`	`injectId('nd-navigation-menu-item')`

Data attribute	Values
`data-state`	—

NdNavigationMenuLink

a[ndNavigationMenuLink]from @ndop/primitives/navigation-menu

A link, at the top level or in a panel. active marks the current page with aria-current="page". Following it closes the open panel.

Manages aria-current.

NdNavigationMenuLink binding	Type	Default
`[active]` Marks the link to the current page.	`boolean`	`false`

Data attribute	Values
`data-active`	—

NdNavigationMenuTrigger

button[ndNavigationMenuTrigger]from @ndop/primitives/navigation-menu

The button that shows and hides its item's panel, on a native button. A mouse resting on it opens the panel after the open delay.

Manages aria-expanded, aria-controls.

NdNavigationMenuTrigger binding	Type	Default
`[disabled]` Disables it.	`boolean`	`false`

Data attribute	Values
`data-state`	—
`data-disabled`	—