Theme

Nav bar

A site's top bar: its name, its main links with groups as menus, and one call to action. Below the md breakpoint the links fold into a Menu disclosure; narrow the window to see it.

Examples

Links, a group and an action; Research is the current page

A menu with descriptions and a titled section; one link leaves the site

Links only

Props

`NavBar`

A site's top bar: its name, its main links with groups as menus, and one call to action. On phones the links fold into a disclosure behind a Menu button, which Escape closes.

Prop	Type	Default	Description
`label`	`string`	—	Names the navigation landmark.
`home`	`NavBarLink`	—	The site's name, linking to its home page.
`logo?`	`ReactNode`	—	The site's logo, a Wordmark, shown in place of the name.
`items`	`readonly NavBarItem[]`	—
`action?`	`NavBarLink`	—	The one call to action, shown as a primary button at the end of the bar.
`currentHref?`	`string`	—	The current page's address; its link is marked aria-current.
`linkAs?`	`ElementType`	`"a"`	The component that renders links: a framework's client-side link, or a plain anchor. The system itself knows no router.
`navigate?`	`((href: string) => void)`	—	Client-side navigation for the links inside a group's menu, which React Aria renders itself. Without it they load the page in full.
`menuLabel?`	`string`	`"Menu"`	The phone menu button's text.
`framed?`	`boolean`	`false`	Line the bar up with the marketing family's framed column (`layout.wide`) instead of the page width, for a site built from Frame sections.

Keyboard

Key	Does
`Tab`	Moves through the name, the links, the group buttons and the action
`Enter` or `Space` or `ArrowDown`	Opens a group's menu on its first link
`ArrowUp` or `ArrowDown`	Move through a group's links
`Enter`	Follows the focused link
`Escape`	Closes a group's menu, or the phone menu, and returns focus to its button

Accessibility

A navigation landmark named by its label, inside a header. The current page's link is aria-current, and a group's button is underlined when one of its pages is current.
On phones the Menu button is a disclosure: it reports aria-expanded, controls the panel, and the panel is hidden from everyone while closed. In the panel a group is a list labelled by its name.
Links and buttons are at least 24 pixels tall (WCAG 2.5.8).
Rendered in a portal at the end of the document, so it is not clipped by an overflow ancestor.
Entering and leaving animations use motion tokens, which are zero under prefers-reduced-motion.