A top navigation: a row of links, and triggers that open a panel of links below them. The panel opens on hover or on a press, and it changes size as the pointer moves from one trigger to the next. Left and Right move between the items, Down or Enter opens a panel, Tab goes into it and the arrows move between its links, and Escape closes it and returns to its trigger.

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger } from "@etched/monet/navigation-menu";

export function Preview() {
  return (
    <NavigationMenu aria-label="Preview">
      <NavigationMenuItem>
        <NavigationMenuTrigger>Hiring</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="#navigation-menu">Pipeline</NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu">Referrals</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#navigation-menu" current>
          Reports
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

Installation

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger } from "@etched/monet/navigation-menu";

Examples

Top navigation

Point at a trigger, or press it, to open its panel; moving to the next trigger slides the panel over. Left and Right move along the row, Down opens a panel, Tab goes into it, and Escape closes it. Reports is the current page.

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger } from "@etched/monet/navigation-menu";

/** Two columns of links: the app sets the panel's columns. */
const twoColumns = { gridTemplateColumns: "repeat(2, minmax(0, 1fr))" };

export function TopNavigation() {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuItem value="hiring">
        <NavigationMenuTrigger>Hiring</NavigationMenuTrigger>
        <NavigationMenuContent style={twoColumns}>
          <NavigationMenuLink href="#navigation-menu" description="Every open role and its stages">
            Pipeline
          </NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu" description="Candidates in a loop this week">
            Interviews
          </NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu" description="New referrals to review">
            Referrals
          </NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu" description="Offers out and accepted">
            Offers
          </NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem value="sourcing">
        <NavigationMenuTrigger>Sourcing</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="#navigation-menu">Talent search</NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu">Saved lists</NavigationMenuLink>
          <NavigationMenuLink href="#navigation-menu">Outreach</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#navigation-menu" current>
          Reports
        </NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#navigation-menu">Settings</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

Accessibility

ArrowLeft/ArrowRight move along the row. ArrowDown or Enter opens a trigger's panel, and Enter again closes it. Focus stays on the trigger.
Tab goes into the open panel, and ArrowUp/ArrowDown move between its links. Escape closes it and returns focus to the trigger.
A navigation landmark named by aria-label, with the items in a list. Triggers are buttons with aria-expanded.
A link with active gets aria-current="page". A link's name is its text and description; set aria-label for a shorter one.
Name it with aria-label, such as "Main". Set active on the link to the page that shows now.

API reference

NavigationMenuContent

Prop	Type	Default	Description
children *	ReactNode	–	`NavigationMenuLink`s. The panel is one column; set columns with `className`, such as a two-column grid.

NavigationMenuItem

Prop	Type	Default	Description
value	string	–	Names the item in the menu's `value`. Without it, the item gets its own id.
children *	ReactNode	–	A `NavigationMenuTrigger` with its `NavigationMenuContent`, or one `NavigationMenuLink`.

NavigationMenuLink

Prop	Type	Default	Description
current	boolean	false	The link to the page that shows now: `aria-current="page"` and the strong weight.
description	ReactNode	–	A line under the link's text, in a panel.
render	ReactElement	–	Another element for the link, such as a router link: `render={<RouterLink to="/pipeline" />}`.

Prop	Type	Default	Description
value	string \| null	–	The `value` of the item whose panel is open, controlled. `null` closes it.
defaultValue	string \| null	null	The item open at first, uncontrolled.
onValueChange	(value: string \| null) => void	–
container	HTMLElement \| ShadowRoot \| RefObject<HTMLElement \| ShadowRoot \| null> \| null	document.body	The element the panel's portal goes into, such as a dialog or a shadow root.
aria-label	string	–	Names the navigation, for example "Main".
children *	ReactNode	–	`NavigationMenuItem`s.