Navigation

Navigation Menu

Disclosure navigation for marketing headers, with links and buttons that reveal panels of links. Not role=menu.

<script>
  import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from "@codeatlasdev/ui";
</script>

<NavigationMenu aria-label="Main">
  <NavigationMenuItem label="Products">
    <NavigationMenuLink href="/analytics" description="Dashboards">Analytics</NavigationMenuLink>
    <NavigationMenuLink href="/automation">Automation</NavigationMenuLink>
  </NavigationMenuItem>
  <NavigationMenuLink href="/pricing" current>Pricing</NavigationMenuLink>
</NavigationMenu>

NavigationMenu is the site navigation of a marketing header: a <nav> with a list of plain links and disclosure buttons that reveal a panel of links. It follows the WAI-ARIA disclosure navigation pattern, not the menu pattern: there is no role="menu", menubar or menuitem, links stay links, and a screen reader reads the list, the buttons with aria-expanded and aria-controls, and the links in the panel with their normal Tab order. For application commands (File, Edit) use Menubar; for actions on one button use DropdownMenu.

The top level is one tab stop with arrow keys: Left and Right (and Home and End) move between the buttons and links without opening anything. Enter or Space toggles a panel and focus stays on the button; Tab then moves into the panel’s links and on to the next top-level item; Down opens the panel and moves to its first link; Up and Down move through the links; Escape closes the panel and returns focus to its button. Following a link closes the panel, and so does a press outside. Only one panel is open at a time.

With a pointer, resting on a button for openDelay (150 ms) opens its panel, moving to another button while one is open switches at once, and leaving closes after closeDelay (250 ms) so the pointer can cross into the panel. A click toggles the panel, which is also how touch opens it. A description on a panel link adds a second line that is part of the link’s accessible name. Mark the current page with current (aria-current="page"). Build a mobile version of the header with Drawer; this component is the desktop bar.

<script lang="ts">
  import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@codeatlasdev/ui';
</script>

<NavigationMenu aria-label="Main">
  <NavigationMenuItem label="Products">
    <NavigationMenuLink href="#analytics" description="Dashboards and scheduled reports">Analytics</NavigationMenuLink>
    <NavigationMenuLink href="#automation" description="Rules that run on events">Automation</NavigationMenuLink>
    <NavigationMenuLink href="#integrations" description="Connect the tools you already use">Integrations</NavigationMenuLink>
  </NavigationMenuItem>
  <NavigationMenuItem label="Resources">
    <NavigationMenuLink href="#docs">Documentation</NavigationMenuLink>
    <NavigationMenuLink href="#guides">Guides</NavigationMenuLink>
    <NavigationMenuLink href="#changelog">Changelog</NavigationMenuLink>
  </NavigationMenuItem>
  <NavigationMenuLink href="#pricing" current>Pricing</NavigationMenuLink>
  <NavigationMenuLink href="#contact">Contact</NavigationMenuLink>
</NavigationMenu>

<script lang="ts">
  import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@codeatlasdev/ui';
</script>

<NavigationMenu aria-label="Docs sections" openDelay={0} closeDelay={400}>
  <NavigationMenuItem label="Guides" align="start">
    <NavigationMenuLink href="#start">Getting started</NavigationMenuLink>
    <NavigationMenuLink href="#theming">Theming</NavigationMenuLink>
  </NavigationMenuItem>
  <NavigationMenuItem label="Reference" align="end">
    <NavigationMenuLink href="#components">Components</NavigationMenuLink>
    <NavigationMenuLink href="#tokens">Tokens</NavigationMenuLink>
  </NavigationMenuItem>
</NavigationMenu>