Nav

Description

.bp-nav is a horizontal <ul> navigation. It supports three patterns: simple links, dropdowns (CSS :has + :focus-within), and a megamenu (Popover API with URL fallback). No JavaScript is required for dropdowns. The megamenu uses the native Popover API where available.

Usage

Simple links

<ul class="bp-nav" role="list">
<li><a class="bp-nav__link" href="#" aria-current="page">Home</a></li>
<li><a class="bp-nav__link" href="#">Tokens</a></li>
<li><a class="bp-nav__link" href="#">Components</a></li>
<li><a class="bp-nav__link" href="#">About</a></li>
</ul>

With dropdown

<ul class="bp-nav" role="list">
<li><a class="bp-nav__link" href="#" aria-current="page">Home</a></li>
<li class="bp-nav__item">
  <button class="bp-nav__dropdown-btn" type="button" aria-expanded="false">
    Components <span aria-hidden="true">▾</span>
  </button>
  <ul class="bp-nav__dropdown-panel">
    <li><a class="bp-nav__dropdown-link" href="#">Button</a></li>
    <li><a class="bp-nav__dropdown-link" href="#">Card</a></li>
    <li><a class="bp-nav__dropdown-link" href="#">Modal</a></li>
    <li><a class="bp-nav__dropdown-link" href="#">Accordion</a></li>
  </ul>
</li>
<li><a class="bp-nav__link" href="#">About</a></li>
</ul>

With megamenu (Popover API)

Home
Design
Tokens Grid Typography

Components
Button Card Modal
About

<ul class="bp-nav" role="list">
<li><a class="bp-nav__link" href="#" aria-current="page">Home</a></li>
<li class="bp-nav__item">
  <button class="bp-nav__megamenu-btn" type="button"
          popovertarget="mega-demo" aria-expanded="false">
    Platform <span aria-hidden="true">▾</span>
  </button>
  <div class="bp-nav__megamenu" id="mega-demo" popover>
    <div class="bp-nav__megamenu-grid">
      <div class="bp-nav__megamenu-col">
        <h3 class="bp-nav__megamenu-heading">Design</h3>
        <a class="bp-nav__dropdown-link" href="#">Tokens</a>
        <a class="bp-nav__dropdown-link" href="#">Grid</a>
        <a class="bp-nav__dropdown-link" href="#">Typography</a>
      </div>
      <div class="bp-nav__megamenu-col">
        <h3 class="bp-nav__megamenu-heading">Components</h3>
        <a class="bp-nav__dropdown-link" href="#">Button</a>
        <a class="bp-nav__dropdown-link" href="#">Card</a>
        <a class="bp-nav__dropdown-link" href="#">Modal</a>
      </div>
    </div>
  </div>
</li>
<li><a class="bp-nav__link" href="#">About</a></li>
</ul>

Public API

Variable	Default	Description
`--nav-gap`	`var(--bp-space-1)`	Gap between top-level items
`--nav-link-color`	`var(--bp-color-text)`	Text color of nav links

Accessibility

Use <ul role="list"> + <li> — .bp-nav uses display: flex which strips list semantics in some browsers; role="list" restores them.
Dropdown buttons must have aria-expanded toggled by JS: "false" when closed, "true" when open. Example: btn.setAttribute('aria-expanded', String(isOpen)).
Megamenu column headings should be <h3> (or appropriate level) — not <p> — so users navigating by headings can find them.
aria-current="page" on the active link — the DS styles it automatically.
Megamenu is announced as a popover; use aria-expanded on the trigger button.
All interactive elements have :focus-visible rings.

Browser APIs

API	Availability	Used for	Without it	Polyfill
`:focus-within`	Widely available Baseline 2020	CSS-only dropdown open on focus	Dropdown requires JS click handler	None needed
`:has()`	Widely available Baseline 2023	Style parent when dropdown is open	Style applied via JS class toggle	None needed
Popover API	Newly available Baseline 2024	Native megamenu dismiss on outside click	Falls back to manual JS toggle	None needed; URL fallback in CSS
`@starting-style`	Newly available Baseline 2024	Megamenu fade entrance	No entrance animation	None needed
Container Queries / `cqi`	Widely available Baseline 2023	Fluid link font-size inside header	Fixed font-size	None needed

Internals

--_gap, --_link-color — component-private, do not set directly.