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. For full markup and variants (including integrated settings, dropdowns, and mobile menu), copy from the Astro component docs.

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="Site name home">Site name</a>
    </div>
    <div class="navbar__actions-desktop">
      <button type="button" class="search__trigger" aria-label="Open search" aria-expanded="false" aria-controls="search-results">
        <span class="search__trigger-text">Search</span>
      </button>
      <button type="button" class="navbar__settings-btn" aria-label="Open settings" onclick="window.openSettings && window.openSettings()">
        <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">
      <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="menu" hidden>
      <!-- Links and dropdowns; see Astro Navbar for full structure -->
    </div>
  </div>
</nav>

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

Astro / Svelte: Astro · Svelte

← Back to Vanilla components