Navigation Menu

Top-level nav with menus.

Usage

Compose Root > List > Item > (Trigger + Content) or a bare Link. Root renders a <nav> landmark, so give it an aria-label.

Navigation Menu vs Menubar

This is the one to use for site navigation. Its triggers open on hover after delayDuration and on click or Enter, so the menu works for pointer, keyboard and touch alike.

Menubar is a desktop-application pattern: it assumes hover and a screen wide enough for several always-visible triggers. Neither holds on a phone. Reach for a menubar when you are building application chrome — an editor, an IDE-like tool — and for this when you are building a website's header.

Marking the current page

Set active on the Link for the page the user is on. Bits then reports aria-current="page", which is the difference between "this looks highlighted" and "this is announced as where you are". Styling it without that tells sighted users and nobody else.

Links stay real anchors throughout, so middle-click and open-in-new-tab keep working.

The optional Viewport

Add a Viewport after the List and every Content panel renders inside one shared container — so switching menus resizes a single surface instead of swapping two boxes. Bits publishes the measured size as --bits-navigation-menu-viewport-width and -height, which is what the transition animates.

Omit it and each panel positions itself against its own trigger. Both are valid; the Viewport just looks calmer when panels differ in size.

Props

NavigationMenu.Root

PropTypeDefault
value Which menu is open, by its Item value. Bindable.string''
class Extra classes merged onto the root.string—
onValueChange Called when the open menu changes.(value: string) => void—
delayDuration Milliseconds of hover before a menu opens.number200
skipDelayDuration Grace period in which moving to another trigger skips the delay.number300
orientation Layout and arrow-key axis.'horizontal' | 'vertical''horizontal'
dir Reading direction.'ltr' | 'rtl''ltr'

NavigationMenu.Link

PropTypeDefault
class Extra classes merged onto the link.string—
href Destination. Rendered as a real anchor.string—
active Marks the current page. Bits then reports aria-current="page".booleanfalse

List, Trigger, Content and Viewport take class plus their native attributes. Item, Sub and Indicator are re-exported from Bits unchanged.