Navigation Menu

A navigation menu lists the sections of an application in a row. A trigger opens the links of its section in a popup when users rest the mouse pointer on it or press it, and a link in the row leads to its page directly. All triggers share one popup, which NavigationMenu renders itself. The popup moves to the active trigger and takes the size of its content, so the examples set a width on the list of links. Users move through the row with the left and right arrow keys and open the popup of a trigger with the down arrow key. The popup closes when users press Escape, press outside of it or move the focus out of the navigation menu. A popup that opened under the resting pointer also closes when the pointer leaves the trigger and the popup.

UsageCopy Anchor Link

import {
	NavigationMenu,
	NavigationMenuContent,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuTrigger,
} from "@biem/ui/components/ui/navigation-menu";

export function NavigationMenuDefault() {
	return (
		<NavigationMenu>
			<NavigationMenuList>
				<NavigationMenuItem>
					<NavigationMenuTrigger>Inventory</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="w-48">
							<li>
								<NavigationMenuLink href="/inventory/transfers">Transfers</NavigationMenuLink>
							</li>
							<li>
								<NavigationMenuLink href="/inventory/deliveries">Deliveries</NavigationMenuLink>
							</li>
							<li>
								<NavigationMenuLink href="/inventory/stock-counts">Stock counts</NavigationMenuLink>
							</li>
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
				<NavigationMenuItem>
					<NavigationMenuTrigger>Orders</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="w-48">
							<li>
								<NavigationMenuLink href="/orders/purchase-orders">Purchase orders</NavigationMenuLink>
							</li>
							<li>
								<NavigationMenuLink href="/orders/returns">Returns</NavigationMenuLink>
							</li>
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
			</NavigationMenuList>
		</NavigationMenu>
	);
}

ExamplesCopy Anchor Link

Top-Level LinkCopy Anchor Link

Some sections consist of a single page, such as the daily overview of a store, and a popup with one entry would only add a step. Placed directly in an item, without a trigger, a link takes users to that page with a single click.

With IconCopy Anchor Link

Users who return to the same pages every day learn to find them by shape before they read a word. An icon inside a link supports that recognition, while the name of the page keeps the meaning clear for users who see the icon for the first time.

Active LinkCopy Anchor Link

Orientation matters most deep inside an application, where many pages resemble each other. Marked with active, a link shows the page that users are on, visibly and for assistive technology, so they recognize their position as soon as they open its section.

Close on ClickCopy Anchor Link

Applications that switch pages without a full reload keep the navigation menu in place, so a popup that stays open would cover part of the page that users just opened. With closeOnClick on a link, the popup closes as soon as users choose that link, and the new page appears unobstructed.

Disabled TriggerCopy Anchor Link

Now and then a section is unavailable, for example because users lack the rights for it. Set on its trigger, disabled keeps the popup of that section closed, yet the trigger stays focusable, so users who move through the navigation with the keyboard still learn that the section exists.

Open by DefaultCopy Anchor Link

A start page often exists to send users onward to their daily work. Through defaultValue, the popup of one section is already open at first render, and from then on users move to another section or close the popup as usual.

ControlledCopy Anchor Link

Sometimes the application decides which section is open, for example when a notice on the page guides users to the section where their next task waits. With value and onValueChange, the application holds the open item itself, so any part of the interface can open a section or close the popup.

API ReferenceCopy Anchor Link

NavigationMenuCopy Anchor Link

NavigationMenuListCopy Anchor Link

NavigationMenuItemCopy Anchor Link

NavigationMenuTriggerCopy Anchor Link

NavigationMenuContentCopy Anchor Link

NavigationMenuLinkCopy Anchor Link

NavigationMenuIndicatorCopy Anchor Link

NavigationMenuPositionerCopy Anchor Link