Navbar

Shared desktop disclosures and mobile drill-down, with visible active ancestry.

Basic structure

nav.navbar > brand + toggle + div.navbar-menu

Try it Example width

HTML

<nav class="navbar is-floating" aria-label="Main navigation">
  <a class="navbar-brand has-background" href="#intro" aria-label="Artist home"><img src="/assets/images/artist-logo.svg" width="124" height="40" alt="Artist"></a>
  <a class="navbar-subbrand" href="#intro" aria-label="Studio home"><img src="/assets/images/artist-sublogo.svg" width="94" height="32" alt="Studio"></a>
  <button class="navbar-toggle" type="button" data-navbar="study-menu" aria-controls="study-menu" aria-expanded="false" aria-label="Toggle navigation"><span></span><span></span></button>
  <div class="navbar-menu" id="study-menu">
    <a href="#intro">Overview</a>
    <details class="nav-branch"><summary>Explore</summary><div class="nav-submenu">
      <a href="#surfaces"><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM4 10h16M10 10v10"/></svg></span>Surfaces</a>
      <details class="nav-branch"><summary><span><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m4 18 6-8 4 5 3-3 4 6M4 4h16v16H4z"/></svg></span> Artwork</span></summary><div class="nav-submenu"><a href="#illustration"><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m4 20 4-1L20 7l-3-3L5 16zM14 7l3 3"/></svg></span>Illustration</a><a href="#composition"><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4zM12 4v16M4 12h8"/></svg></span>Composition</a></div></details>
      <a href="/code/components/field/" target="_top"><span class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 5h16v5H4zM4 14h16v5H4z"/></svg></span>Forms</a>
    </div></details>
    <a href="/code/components/" target="_top">Components</a>
    <a class="button is-primary" href="/code/compositions/" target="_top">Page examples</a>
  </div>
</nav>

Options

Class or attribute	What it does
`is-floating`	Content-width pill, hides on down-scroll and returns on up-scroll.
`navbar-brand > img`	Logo image in place of text; give it meaningful alt text and intrinsic dimensions.
`navbar-subbrand > img`	Optional second brand beside the primary brand, using the same image or text pattern.
`--navbar-sublogo-width / --navbar-sublogo-height`	Size a subbrand image without changing its source dimensions. Width defaults to intrinsic; height caps it.
`mobile menu palette`	Mobile links open on an independent white surface, even inside a dark navbar; navbar-mobile-menu-* tokens theme that panel.
`navbar-brand.has-background`	Opt-in solid brand region; navbar-brand-background and navbar-brand-ink tune its colors.
`is-fixed-mobile`	Keep the floating pill visible on mobile.
`nav-branch > summary + nav-submenu`	Nested disclosure; chevron follows the opening direction.
`data-navbar`	Connect the toggle to its menu ID.
`icon`	Optional decorative SVG before a link or disclosure label.
`is-primary/info/success/warning/danger`	Optional hover/active role on an individual link or summary. Defaults reset per item; children do not inherit a parent override. nav-hover-color is the site default token.
`final links`	Choosing a destination closes all disclosures on desktop and mobile.