Light Dark System

Primary Navigation

<cw-primary-navigation> | CwPrimaryNavigation
Since 1.3 experimental

Top-level site navigation with a responsive hamburger disclosure for narrow viewports.

Add one <cw-primary-navigation-item> per top-level destination. Below the mobile-breakpoint, the items collapse behind a hamburger toggle.

Home About Products Shoes Boots Sandals Contact 
<cw-primary-navigation mobile-breakpoint="480">
  <cw-primary-navigation-item href="/" current>Home</cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">About</cw-primary-navigation-item>
  <cw-primary-navigation-item>
    Products
    <cw-primary-navigation-menu slot="menu">
      <a href="/">Shoes</a>
      <a href="/">Boots</a>
      <a href="/">Sandals</a>
    </cw-primary-navigation-menu>
  </cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">Contact</cw-primary-navigation-item>
</cw-primary-navigation>

import { CwPrimaryNavigation, CwPrimaryNavigationItem, CwPrimaryNavigationMenu } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwPrimaryNavigation mobileBreakpoint={480}>
    <CwPrimaryNavigationItem href="/" current>
      Home
    </CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem href="/">About</CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem>
      Products
      <CwPrimaryNavigationMenu slot="menu">
        <a href="/">Shoes</a>
        <a href="/">Boots</a>
        <a href="/">Sandals</a>
      </CwPrimaryNavigationMenu>
    </CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem href="/">Contact</CwPrimaryNavigationItem>
  </CwPrimaryNavigation>
);

Examples

Current Page

Set the current attribute on the item that represents the page the user is on. The component has no router or URL awareness — set it based on your own routing state.

Home About 
<cw-primary-navigation mobile-breakpoint="480">
  <cw-primary-navigation-item href="/" current>Home</cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">About</cw-primary-navigation-item>
</cw-primary-navigation>

import { CwPrimaryNavigation, CwPrimaryNavigationItem } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwPrimaryNavigation mobileBreakpoint={480}>
    <CwPrimaryNavigationItem href="/" current>
      Home
    </CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem href="/">About</CwPrimaryNavigationItem>
  </CwPrimaryNavigation>
);

Slot a <cw-primary-navigation-menu> into an item’s menu slot to turn it into a disclosure trigger for a flat list of sub-links. Only one dropdown stays open at a time. See Primary Navigation Menu for details.

Products Shoes Boots Company About Careers 
<cw-primary-navigation mobile-breakpoint="480">
  <cw-primary-navigation-item>
    Products
    <cw-primary-navigation-menu slot="menu">
      <a href="/">Shoes</a>
      <a href="/">Boots</a>
    </cw-primary-navigation-menu>
  </cw-primary-navigation-item>
  <cw-primary-navigation-item>
    Company
    <cw-primary-navigation-menu slot="menu">
      <a href="/">About</a>
      <a href="/">Careers</a>
    </cw-primary-navigation-menu>
  </cw-primary-navigation-item>
</cw-primary-navigation>

import { CwPrimaryNavigation, CwPrimaryNavigationItem, CwPrimaryNavigationMenu } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwPrimaryNavigation mobileBreakpoint={480}>
    <CwPrimaryNavigationItem>
      Products
      <CwPrimaryNavigationMenu slot="menu">
        <a href="/">Shoes</a>
        <a href="/">Boots</a>
      </CwPrimaryNavigationMenu>
    </CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem>
      Company
      <CwPrimaryNavigationMenu slot="menu">
        <a href="/">About</a>
        <a href="/">Careers</a>
      </CwPrimaryNavigationMenu>
    </CwPrimaryNavigationItem>
  </CwPrimaryNavigation>
);

Mobile Breakpoint

Set mobile-breakpoint (in pixels) to control when the hamburger toggle and collapsible panel engage. Resize this preview’s frame narrower than the value to see it switch. Defaults to 768.

Home About Contact 
<cw-primary-navigation mobile-breakpoint="900" class="primary-navigation-demo-narrow">
  <cw-primary-navigation-item href="/">Home</cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">About</cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">Contact</cw-primary-navigation-item>
</cw-primary-navigation>

<style>
  .primary-navigation-demo-narrow {
    max-width: 300px;
  }
</style>

import { CwPrimaryNavigation, CwPrimaryNavigationItem } from '@cordwainer/cw-elements/dist/react';

const css = `
  .primary-navigation-demo-narrow {
    max-width: 300px;
  }
`;

const App = () => (
  <>
    <CwPrimaryNavigation className="primary-navigation-demo-narrow" mobileBreakpoint={900}>
      <CwPrimaryNavigationItem href="/">Home</CwPrimaryNavigationItem>
      <CwPrimaryNavigationItem href="/">About</CwPrimaryNavigationItem>
      <CwPrimaryNavigationItem href="/">Contact</CwPrimaryNavigationItem>
    </CwPrimaryNavigation>

    <style>{css}</style>
  </>
);

Custom Label

The <nav> landmark’s accessible name defaults to a localized “Main navigation”. Pass label to override it — useful if a page has more than one navigation landmark.

Home About 
<cw-primary-navigation label="Main site navigation" mobile-breakpoint="480">
  <cw-primary-navigation-item href="/">Home</cw-primary-navigation-item>
  <cw-primary-navigation-item href="/">About</cw-primary-navigation-item>
</cw-primary-navigation>

import { CwPrimaryNavigation, CwPrimaryNavigationItem } from '@cordwainer/cw-elements/dist/react';

const App = () => (
  <CwPrimaryNavigation label="Main site navigation" mobileBreakpoint={480}>
    <CwPrimaryNavigationItem href="/">Home</CwPrimaryNavigationItem>
    <CwPrimaryNavigationItem href="/">About</CwPrimaryNavigationItem>
  </CwPrimaryNavigation>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/primary-navigation/primary-navigation.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/primary-navigation/primary-navigation.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/primary-navigation/primary-navigation.js';

To import this component as a React component:

import CwPrimaryNavigation from '@cordwainer/cw-elements/dist/react/primary-navigation';

Slots

Name Description
(default) One or more <cw-primary-navigation-item> elements.

Learn more about using slots.

Properties

Name Description Reflects Type Default
open Indicates whether or not the mobile navigation panel is open. Only meaningful below mobile-breakpoint — use show()/hide() to animate it, or toggle this attribute directly. boolean false
label The accessible label for the <nav> landmark. Defaults to a localized “Main navigation”. string ''
mobileBreakpoint
mobile-breakpoint 		The viewport width, in pixels, below which the hamburger toggle and collapsible panel engage. number 768
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
cw-show onCwShow Emitted when the mobile navigation panel opens. -
cw-after-show onCwAfterShow Emitted after the mobile navigation panel opens and all animations are complete. -
cw-hide onCwHide Emitted when the mobile navigation panel closes. -
cw-after-hide onCwAfterHide Emitted after the mobile navigation panel closes and all animations are complete. -

Learn more about events.

Methods

Name Description Arguments
show() Opens the mobile navigation panel. No-op above mobile-breakpoint. -
hide() Closes the mobile navigation panel. No-op above mobile-breakpoint. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper, a <nav> landmark element.
toggle The hamburger toggle button, shown below mobile-breakpoint.
menu The container that wraps the slotted navigation items.

Learn more about customizing CSS parts.

Animations

Name Description
primary-navigation.show The animation to use when the mobile navigation panel opens.
primary-navigation.hide The animation to use when the mobile navigation panel closes.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

  • <cw-icon>