Navigation

Navigation bar

A site header with links and dropdown panels. It folds into a menu button when the bar gets narrow.

With a dropdown and a wide panel

Make the window narrow to see the menu button. Here the bar folds under 640px of its own width.

HTML

<header class="pw-nav" data-pw-nav data-breakpoint="640">
  <a class="pw-nav-brand" href="#main">Northwind</a>
  <button class="pw-nav-toggle" aria-label="Menu"></button>
  <nav class="pw-nav-menu" aria-label="Main">
    <div class="pw-nav-item pw-nav-item--mega">
      <button class="pw-nav-trigger">Products</button>
      <div class="pw-nav-panel">
        <a href="#main"><b>Analytics</b><span>See what visitors do</span></a>
        <a href="#main"><b>Forms</b><span>Collect answers and leads</span></a>
        <a href="#main"><b>Email</b><span>Send updates that get read</span></a>
        <a href="#main"><b>Automation</b><span>Let routine work run itself</span></a>
      </div>
    </div>
    <div class="pw-nav-item">
      <button class="pw-nav-trigger">Company</button>
      <div class="pw-nav-panel">
        <a href="#main">About</a>
        <a href="#main">Careers</a>
        <a href="#main">Contact</a>
      </div>
    </div>
    <a href="#main">Pricing</a>
    <a class="pw-btn pw-btn--primary pw-btn--sm" href="#main">Sign up</a>
  </nav>
</header>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-breakpoint`	`760`	Width of the bar in pixels under which the links fold into the menu button.
`data-hover`		Panels also open when the pointer rests on them.

Classes

Class	What it does
`pw-nav-item--mega`	A panel as wide as the bar, with its links in columns.
`pw-nav-heading`	A small heading inside a panel.

From your script

var n = Partwise.get(headerElement, 'nav');
n.closeAll();

Keyboard

Key	Action
`Enter` `Space`	Open or close a panel
`Esc`	Close the panel and go back to its button
`Tab`	Through the links. Leaving a panel closes it.

Good to know

The panels are plain show and hide buttons, which is what screen readers expect for site navigation.
The bar measures its own width, not the window. So it also folds correctly inside a narrow column.
Mark the link of the current page with aria-current="page".
Without JavaScript the panels open on hover and on keyboard focus.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/50-more.css, js/50-more.js.