Navbar — Vanilla

Navbar structure with vanilla HTML. See Astro docs for full markup.

Navbar

Responsive, accessible navigation bar. Use the same BEM classes and structure in your HTML. The live example below uses the same Navbar as the main site (with Search and Settings icons); it is condensed to fit the container.

Add this component

The command below includes <strong>Navbar</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Live example

Navbar (same as main site — Search and Settings work)

Search and Settings use the same components as the main site. Wire toggle, search, and settings with your JS or js/main.js from the scaffold.

HTML (minimal structure)

Copy the markup below as a starting point. Ensure Rizzo CSS is loaded. Wire search and settings with your own JS or use window.openSettings() if your layout provides it.

html html 
<nav class="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar__container">
    <div class="navbar__brand">
      <a href="/" class="navbar__brand-link" aria-label="Rizzo home">Rizzo</a>
    </div>
    <div class="navbar__actions-desktop">
      <div class="search" data-search>
        <div class="search__trigger-wrapper">
          <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" data-search-trigger>
            <svg class="search__icon icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <span class="search__trigger-text">Search</span>
            <kbd class="search__kbd" aria-hidden="true"><span class="search__kbd-modifier">⌘</span>K</kbd>
          </button>
        </div>
        <div class="search__overlay" data-search-overlay aria-hidden="true">...</div>
      </div>
      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
        <svg class="navbar__settings-icon icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
        <span class="navbar__settings-label">Settings</span>
      </button>
    </div>
    <button type="button" class="navbar__toggle" aria-expanded="false" aria-controls="navbar-menu" aria-label="Toggle navigation menu" id="navbar-toggle">
      <span class="sr-only">Menu</span>
      <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
    </button>
    <div class="navbar__menu" id="navbar-menu" role="navigation" aria-label="Mobile menu" hidden>
      <div class="navbar__item"><a href="/docs" class="navbar__link" tabindex="-1">Docs</a></div>
      <div class="navbar__item"><a href="/docs/components" class="navbar__link" tabindex="-1">Components</a></div>
      <div class="navbar__item"><a href="/blocks" class="navbar__link" tabindex="-1">Blocks</a></div>
      <div class="navbar__item"><a href="/themes" class="navbar__link" tabindex="-1">Themes</a></div>
    </div>
  </div>
</nav>

View Navbar on the Astro docs for complete markup and structure.

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React

← Back to Vanilla components