Documentation

Documentation

Nav

Site navigation bar with a responsive mobile menu and coordinated dropdowns.

The <dsgn-nav> component renders the top navigation bar. It composes a logo, a set of links, and a set of actions, and it owns the responsive behavior: below sm the links and actions collapse behind a menu button that opens a drawer.

Nav also coordinates the dropdowns of any <dsgn-nav-link> children — opening one closes the others, and Escape closes the mobile menu.

Usage

<dsgn-nav sticky>
  <a href="/" slot="logo">DS-GN</a>
  <dsgn-nav-link slot="links" href="/docs">Docs</dsgn-nav-link>
  <dsgn-nav-link slot="links" href="/components">Components</dsgn-nav-link>
  <dsgn-nav-link slot="actions" variant="action" href="/signup"
    >Get started</dsgn-nav-link
  >
</dsgn-nav>

Import the component module in your application entrypoint:

import '@ds-gn/ui/nav';
import '@ds-gn/ui/nav-link';

Props

Prop Type Default Description
sticky boolean false Pins the bar to the top of the viewport as the page scrolls.
transparent boolean false Removes the bar’s background, for overlaying a hero.
menu-open-label string 'Open navigation menu' Accessible name for the mobile menu button while the menu is closed.
menu-close-label string 'Close navigation menu' Accessible name for the mobile menu button while the menu is open.
surface 'light' | 'dark' 'light' Semantic token surface to use.

menu-open-label and menu-close-label are the attribute names; the matching JavaScript properties are menuOpenLabel and menuCloseLabel. Production values follow the system-wide content ownership policy and must be supplied by your application rather than treated as frontend copy defaults.

Slots

Slot Description
logo Brand or logo content, at the leading edge.
links Primary navigation links.
actions Navigation actions, such as a sign-up CTA.

Nav constrains its own width with a 2xl container, so it does not need to be wrapped in an <dsgn-container>.

The actions slot takes one or two CTAs. Pair <dsgn-nav-link variant="action"> (the outlined primary pill) with <dsgn-nav-link variant="action-secondary"> (the filled secondary pill); either may be used on its own. They sit side by side on desktop and stack full width in the mobile drawer.

<dsgn-nav-link slot="actions" variant="action" href="/contact"
  >Contact</dsgn-nav-link
>
<dsgn-nav-link slot="actions" variant="action-secondary" href="/waitlist"
  >Join waitlist</dsgn-nav-link
>

Responsive behavior

  • The menu button appears only when something is slotted into links or actions. A nav with just a logo renders no toggle.
  • Any element in those slots is included, not only <dsgn-nav-link> — a plain <a slot="links"> still reaches the mobile drawer.
  • Clicking a link inside the drawer closes it after the navigation runs, and Escape closes it from anywhere in the bar.

Examples

Transparent bar over a hero

<dsgn-nav transparent surface="dark" sticky>
  <a href="/" slot="logo">DS-GN</a>
  <dsgn-nav-link slot="links" href="/docs">Docs</dsgn-nav-link>
</dsgn-nav>

With a dropdown

<dsgn-nav>
  <a href="/" slot="logo">DS-GN</a>
  <dsgn-nav-link slot="links" href="/products" dropdown-columns="2">
    Products
    <dsgn-nav-dropdown-column slot="dropdown">
      <dsgn-nav-link href="/products/ui" subheading="Web components"
        >UI</dsgn-nav-link
      >
      <dsgn-nav-link href="/products/tokens" subheading="Design tokens"
        >Tokens</dsgn-nav-link
      >
    </dsgn-nav-dropdown-column>
    <dsgn-nav-dropdown-column slot="dropdown">
      <dsgn-nav-link href="/products/cli" subheading="Scaffolding"
        >CLI</dsgn-nav-link
      >
    </dsgn-nav-dropdown-column>
  </dsgn-nav-link>
</dsgn-nav>

Authored menu-button labels

<dsgn-nav menu-open-label="Open menu" menu-close-label="Close menu">
  <a href="/" slot="logo">DS-GN</a>
  <dsgn-nav-link slot="links" href="/docs">Docs</dsgn-nav-link>
</dsgn-nav>

Accessibility

  • The mobile menu button exposes aria-expanded and aria-controls, and its accessible name swaps between menu-open-label and menu-close-label with the state. Author both — a button labelled “Open” while the menu is open is worse than no label change at all.
  • Escape closes the open mobile menu and any expanded dropdown.
  • Keep the slotted content in reading order: the drawer renders links before actions, matching the desktop bar.
Esc