Navigation Menu

A collection of links and menus for website navigation. There are no borders. An open trigger and a hovered link shift the wash. A highlighted link shows the accent dot. Triggers and links are Regular.

Anatomy

<UiNavigationMenuRoot>
  <UiNavigationMenuList>
    <UiNavigationMenuItem>
      <UiNavigationMenuTrigger>
        Overview
        <UiNavigationMenuIcon />
      </UiNavigationMenuTrigger>
      <UiNavigationMenuContent>
        <UiNavigationMenuLink href="/">Link</UiNavigationMenuLink>
      </UiNavigationMenuContent>
    </UiNavigationMenuItem>
  </UiNavigationMenuList>
  <UiNavigationMenuPortal>
    <UiNavigationMenuPositioner>
      <UiNavigationMenuPopup>
        <UiNavigationMenuViewport />
      </UiNavigationMenuPopup>
    </UiNavigationMenuPositioner>
  </UiNavigationMenuPortal>
</UiNavigationMenuRoot>

Parts

• Root — owns which item is open.
• List — the bar of items.
• Item — a trigger with content, or a single link.
• Trigger / Icon — opens that item’s content. Icon rotates when open.
• Content — rendered into the viewport while the item is active.
• Link — navigation. Closes the menu on click.
• Portal / Positioner / Popup / Viewport — the overlay under the active trigger.

Hover moves between items. Esc and outside click close. No drop-shadow and no border.