Navigation

Put wds-navigation-menu-item elements in wds-navigation-menu and name it with aria-label. An entry with content shows it in a panel; an entry with href and no content is a link. Lay out the panel content with your own classes (e.g. a grid) and use wds-navigation-menu-link for its links. For commands rather than pages use Menubar.

Examples#

Default#

Panels open on hover after open-delay (200 ms) and switch at once while one is open; a click or Enter opens them too. The panel width comes from its content, here a grid.

WDS Web components with wrappers for Angular and React.

Installation

Tokens

Frameworks

Alert Dialog

Hover Card

Progress

Scroll Area

Tabs

Tooltip

Show code

navigation-menu-default.ts

import { Component } from '@angular/core';
import { WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent } from '@wds/angular/navigation-menu';

@Component({
  selector: 'app-navigation-menu-default-demo',
  imports: [WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent],
  template: `
    <wds-navigation-menu aria-label="Main">
      <wds-navigation-menu-item label="Getting started">
        <div class="grid w-[min(500px,90vw)] gap-2 sm:grid-cols-[.75fr_1fr]">
          <a
            href="#"
            class="row-span-3 flex flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-4 no-underline outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
          >
            <span class="mb-2 text-lg font-medium text-foreground">WDS</span>
            <span class="text-sm leading-tight text-muted-foreground">Web components with wrappers for Angular and React.</span>
          </a>
          <wds-navigation-menu-link href="#" description="Install the packages and load the styles.">Installation</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Colors, spacing, radius and type as CSS variables.">Tokens</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Use the components in Angular and React.">Frameworks</wds-navigation-menu-link>
        </div>
      </wds-navigation-menu-item>
      <wds-navigation-menu-item label="Components">
        <div class="grid w-[min(600px,90vw)] gap-2 sm:grid-cols-2">
          <wds-navigation-menu-link href="#" description="A modal dialog that interrupts the user and expects a response.">Alert Dialog</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="For sighted users to preview content available behind a link.">Hover Card</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Displays an indicator showing the completion progress of a task.">Progress</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Augments native scroll functionality for custom styling.">Scroll Area</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Layered sections of content, displayed one at a time.">Tabs</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="A popup with information about an element on hover or focus.">Tooltip</wds-navigation-menu-link>
        </div>
      </wds-navigation-menu-item>
      <wds-navigation-menu-item label="Docs" href="#"></wds-navigation-menu-item>
    </wds-navigation-menu>
  `,
})
export class NavigationMenuDefaultDemo {}

Icons#

An icon in the icon slot of a link, with or without a description.

Analytics

Automations

Security

Documentation

Community

Help center

Show code

navigation-menu-icons.ts

import { Component } from '@angular/core';
import { WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent } from '@wds/angular/navigation-menu';

@Component({
  selector: 'app-navigation-menu-icons-demo',
  imports: [WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent],
  template: `
    <wds-navigation-menu aria-label="Product">
      <wds-navigation-menu-item label="Product">
        <div class="flex w-72 flex-col gap-1">
          <wds-navigation-menu-link href="#" description="Charts and dashboards for every team."><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" /></svg>Analytics</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Run workflows when something changes."><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg>Automations</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" description="Roles, audit log and single sign-on."><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" /></svg>Security</wds-navigation-menu-link>
        </div>
      </wds-navigation-menu-item>
      <wds-navigation-menu-item label="Resources">
        <div class="flex w-56 flex-col gap-1">
          <wds-navigation-menu-link href="#"><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 7v14" /><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" /></svg>Documentation</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#"><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>Community</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#"><svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>Help center</wds-navigation-menu-link>
        </div>
      </wds-navigation-menu-item>
      <wds-navigation-menu-item label="Pricing" href="#"></wds-navigation-menu-item>
    </wds-navigation-menu>
  `,
})
export class NavigationMenuIconsDemo {}

Links only#

Entries without content are links. active marks the current page (aria-current="page"), disabled an entry that cannot be used.

Show code

navigation-menu-links.ts

import { Component } from '@angular/core';
import { WdsNavigationMenuComponent, WdsNavigationMenuItemComponent } from '@wds/angular/navigation-menu';

@Component({
  selector: 'app-navigation-menu-links-demo',
  imports: [WdsNavigationMenuComponent, WdsNavigationMenuItemComponent],
  template: `
    <wds-navigation-menu aria-label="Account">
      <wds-navigation-menu-item label="Overview" href="#" active></wds-navigation-menu-item>
      <wds-navigation-menu-item label="Projects" href="#"></wds-navigation-menu-item>
      <wds-navigation-menu-item label="Billing" href="#"></wds-navigation-menu-item>
      <wds-navigation-menu-item label="Audit log" disabled></wds-navigation-menu-item>
    </wds-navigation-menu>
  `,
})
export class NavigationMenuLinksDemo {}

Active section#

active on an entry with a panel highlights the section; active on a link in the panel marks the current page.

Quick start

Theming

Forms

Show code

navigation-menu-active.ts

import { Component } from '@angular/core';
import { WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent } from '@wds/angular/navigation-menu';

@Component({
  selector: 'app-navigation-menu-active-demo',
  imports: [WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent],
  template: `
    <wds-navigation-menu aria-label="Docs">
      <wds-navigation-menu-item label="Guides" active>
        <div class="flex w-64 flex-col gap-1">
          <wds-navigation-menu-link href="#">Quick start</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#" active>Theming</wds-navigation-menu-link>
          <wds-navigation-menu-link href="#">Forms</wds-navigation-menu-link>
        </div>
      </wds-navigation-menu-item>
      <wds-navigation-menu-item label="API" href="#"></wds-navigation-menu-item>
      <wds-navigation-menu-item label="Changelog" href="#"></wds-navigation-menu-item>
    </wds-navigation-menu>
  `,
})
export class NavigationMenuActiveDemo {}

Panel alignment#

align="end" lines the panel up with the end of its entry, e.g. for an account menu at the edge of a header.

Acme

Profile

Settings

Sign out

Show code

navigation-menu-align.ts

import { Component } from '@angular/core';
import { WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent } from '@wds/angular/navigation-menu';

@Component({
  selector: 'app-navigation-menu-align-demo',
  imports: [WdsNavigationMenuComponent, WdsNavigationMenuItemComponent, WdsNavigationMenuLinkComponent],
  template: `
    <div class="flex w-full max-w-xl items-center justify-between">
      <span class="text-sm font-semibold">Acme</span>
      <wds-navigation-menu aria-label="Site">
        <wds-navigation-menu-item label="Blog" href="#"></wds-navigation-menu-item>
        <wds-navigation-menu-item label="Account" align="end">
          <div class="flex w-56 flex-col gap-1">
            <wds-navigation-menu-link href="#" description="[email protected]">Profile</wds-navigation-menu-link>
            <wds-navigation-menu-link href="#">Settings</wds-navigation-menu-link>
            <wds-navigation-menu-link href="#">Sign out</wds-navigation-menu-link>
          </div>
        </wds-navigation-menu-item>
      </wds-navigation-menu>
    </div>
  `,
})
export class NavigationMenuAlignDemo {}

API References#

A collection of links for navigating a website: a row of entries, each either a link or a button that shows a panel of links under it (the disclosure navigation pattern, not an ARIA menu). One panel is open at a time. Panels open on hover after a short delay (and switch almost at once while one is open), on click and with the keyboard; they close when the pointer leaves, on Escape, on a click outside or when focus leaves the entry.

Attributes

Attribute	Type	Default	Description
open-delay.openDelay	number	200	Delay before a panel opens on hover, in ms.
close-delay.closeDelay	number	300	Delay before a panel closes after the pointer leaves it, in ms.

Events

Event	Description
wds-changeCustomEvent<WdsNavigationMenuChangeDetail>	A panel opens or all panels close.

Methods

Method	Description
close()	Closes the open panel.

Slots

Slot	Description
(default)	`wds-navigation-menu-item` elements.

CSS parts (::part)

Part	Description
list	The row of entries.

One entry of wds-navigation-menu. With content in the default slot it is a button that shows the content in a panel under it (links, cards); with href and no content it is a plain link.

Attributes

Attribute	Type	Default	Description
label	string	''	Label of the entry.
href	string	''	Makes the entry a link (when it has no panel content).
active	boolean	false	The entry points to the current page or section (`aria-current="page"` on a link).
disabled	boolean	false	The entry cannot be used.
align	WdsNavigationMenuAlign	'start'	Alignment of the panel along the entry.
open	boolean	false	Whether the panel is open. Set by `wds-navigation-menu` (hover, click, keyboard).

Slots

Slot	Description
(default)	Content of the panel, e.g. `wds-navigation-menu-link` elements in a grid.
label	Label of the entry (instead of `label`), e.g. with an icon.

CSS parts (::part)

Part	Description
trigger	The button (or the `<a>` of a link entry).
content	The panel.

CSS custom properties

Property	Description
--wds-navigation-menu-content-width	Width of the panel (default: the width of its content).

A link in a panel of wds-navigation-menu: a title, an optional description under it and an optional icon. Choosing it closes the menu.

Attributes

Attribute	Type	Default	Description
href	string	''	Address of the link.
description	string	''	Description under the title.
active	boolean	false	The link points to the current page (`aria-current="page"`).
target	string \| undefined		Where to open the link, e.g. `_blank`.

Slots

Slot	Description
(default)	Title of the link.
description	Description under the title (instead of `description`).
icon	An icon before the text.

CSS parts (::part)

Part	Description
link	The native `<a>`.
title	The title.
description	The description.

Accessibility#

The menu is a navigation landmark (name it with aria-label) with a list of entries. It follows the disclosure navigation pattern: entries with a panel are buttons with aria-expanded and aria-controls, the links are ordinary links.

active sets aria-current="page" on links. A panel stays in the reading order right after its button, so Tab moves from the button into the open panel.

Hover only previews: every panel also opens with a click, Enter or Space.

Keyboard support#

Key	Function
Tab	Moves through the entries and, when a panel is open, into its links. Leaving the entry closes the panel.
EnterSpace	On an entry with a panel: opens or closes the panel.
↓	On an entry with a panel: opens it and focuses its first link. In a panel: the next link.
↑	In a panel: the previous link, from the first one back to the entry.
←→	On an entry: moves to the previous or next entry, wrapping around.
HomeEnd	On an entry: moves to the first or last entry.
Escape	Closes the panel and returns focus to its entry.

Navigation Menu

Usage#

Examples#

Default#

Icons#

Links only#

Active section#

Panel alignment#

API References#

wds-navigation-menu#

Attributes

Events

Methods

Slots

CSS parts (::part)

wds-navigation-menu-item#

Attributes

Slots

CSS parts (::part)

CSS custom properties

wds-navigation-menu-link#

Attributes

Slots

CSS parts (::part)

Accessibility#

Keyboard support#

Usage#

Examples#

Default#

Icons#

Links only#

Active section#

Panel alignment#

API References#

wds-navigation-menu#

Attributes

Events

Methods

Slots

CSS parts (::part)

wds-navigation-menu-item#

Attributes

Slots

CSS parts (::part)

CSS custom properties

wds-navigation-menu-link#

Attributes

Slots

CSS parts (::part)

Accessibility#

Screen reader#

Keyboard support#