import { NAVIGATION_MENU_TRIGGER_CLASSES, NavigationMenu, navigationMenuAnatomy, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport } from "@instruments/materia-ui/components/navigation-menu";

Best practices

Reserve NavigationMenu for site/section navigation with panels; a click actions menu is DropdownMenu, a desktop app menu bar is Menubar, and simple in-page routed tabs are TabNavigation.
Keep it uncontrolled unless you must drive it; leave viewport on unless you render your own NavigationMenuViewport (e.g. to place a NavigationMenuIndicator in it).

Props

NavigationMenuContent

Prop	Type	Default	Description
className	`string`

NavigationMenuIndicator

Prop	Type	Default	Description
className	`string`

NavigationMenuItem

Prop	Type	Default	Description
className	`string`

NavigationMenuLink

Prop	Type	Default	Description
className	`string`

NavigationMenuList

Prop	Type	Default	Description
className	`string`

NavigationMenuTrigger

Prop	Type	Default	Description
className	`string`

NavigationMenuViewport

Prop	Type	Description
children	`React.ReactNode`	Rendered inside the popup above the panels, e.g. a NavigationMenuIndicator.
className	`string`
sideOffset	`number \| import("@base-ui/react/internals/useAnchorPositioning").OffsetFunction \| undefined`	Distance in pixels between the active trigger and the popup.

Also exports

constNAVIGATION_MENU_TRIGGER_CLASSES
constnavigationMenuAnatomy
constnavigationMenuTriggerStyle

Anatomy

NavigationMenu

navigation-menu

Horizontal site navigation with dropdown panels

NavigationMenuList

navigation-menu-list

Horizontal row of navigation entries

NavigationMenuItem

navigation-menu-item

A single top-level entry

NavigationMenuTrigger

navigation-menu-trigger

Pill button opening a menu panel

NavigationMenuContent

navigation-menu-content

Panel of links / rich content

NavigationMenuLink

navigation-menu-link

Link inside a panel

NavigationMenuLink

navigation-menu-link

Top-level link (no panel)

NavigationMenuIndicator

navigation-menu-indicator

Arrow pointing at the active trigger

NavigationMenuViewport

navigation-menu-viewport

Shared animated surface hosting the open panel

Composition

Builds on

Icon

Prop	Type	Default	Description
className	`string`
viewport	`boolean`	`true`	Render the shared animated popup that hosts open panels. Base UI always hosts panels in a shared popup; set `false` only to render your own `NavigationMenuViewport` (the host is then yours to place).