Navbar Component

A responsive, accessible navigation bar with integrated settings button.

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

Live Example

The navbar is the one at the top of this page (same for all framework doc routes). The Vanilla, Svelte, Vue, and React navbar pages each show a live demo with the same structure: brand Rizzo, Search trigger, Settings button, and mobile menu links (Docs, Components, Blocks, Themes). It includes:

Desktop: Docs dropdown (Introduction, Foundations); Components dropdown with 3-column layout
Mobile: Menu toggle on left; search and settings icon-only (same size as menu toggle) on right
Responsive mobile menu with hamburger toggle (activates at 1024px and below)
Smooth hamburger-to-X animation
Active link indicator with underline matching hover effect
Dropdown menus: Docs (Getting Started, Design System, Theming, Accessibility, Colors) and Components (Overview + all component links). Theming is under Docs; no separate Themes item in the nav.
Dropdown arrow rotates on hover
Smart dropdown alignment (prevents viewport overflow)
Full keyboard navigation for dropdowns (Arrow keys, Enter, Space, Escape, Home, End)
Keyboard accessible with full ARIA support
Settings button (gear icon) that opens Settings panel
Sticky positioning at top
Full width layout with no gaps
Theme flash prevention (inline script in Layout)
All styles use design system CSS variables for framework portability

Usage

Include the Navbar in your layout; component scripts run after DOM ready so they work when imported. Adding Navbar automatically adds Search and Settings (CLI dependency) so the search bar and gear button work. Add Settings once in the same layout (see Settings docs).

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React

---
import Navbar from '../components/astro/Navbar.astro';
import Settings from '../components/astro/Settings.astro';
---

<!-- Navbar includes Search; add Settings so the gear button works. -->
<Navbar siteName="My App" />
<Settings />
<main>
  <!-- page content -->
</main>

<!-- From scaffold: Navbar includes Search (with icon) + Settings (with Gear icon). Include js/main.js for mobile menu, search, and settings. See /docs/vanilla/components/navbar for full markup with inline SVG icons. -->
<nav class="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar__container">
    <div class="navbar__brand">
      <a href="/" class="navbar__brand-link">My Site</a>
    </div>
    <div class="navbar__actions-desktop">
      <div class="search" data-search><!-- Search trigger with icon; overlay with input/results --></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-label="Toggle menu" aria-expanded="false" aria-controls="navbar-menu" id="navbar-toggle">
      <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">
      <div class="navbar__item"><a href="/docs" class="navbar__link">Docs</a></div>
      <div class="navbar__item"><a href="/docs/components" class="navbar__link">Components</a></div>
      <div class="navbar__item"><a href="/blocks" class="navbar__link">Blocks</a></div>
      <div class="navbar__item"><a href="/themes" class="navbar__link">Themes</a></div>
    </div>
  </div>
</nav>

<script>
  import { Navbar, Settings } from '$lib/rizzo';
</script>

<!-- Navbar includes Search; add Settings so the gear button works. -->
<Navbar siteName="My App" />
<Settings />
<main>
  <!-- page content -->
</main>

<script setup>
import Navbar from '@/components/rizzo/Navbar.vue';
import Search from '@/components/rizzo/Search.vue';
</script>

<template>
  <Navbar>
    <div class="navbar__container">
      <div class="navbar__brand">
        <a href="/" class="navbar__brand-link">My App</a>
      </div>
      <div class="navbar__actions-desktop">
        <Search id="nav-search" />
        <button type="button" class="navbar__settings-btn" aria-label="Open settings" @click="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-label="Toggle menu" aria-expanded="false">
        <span class="navbar__toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
      </button>
      <div class="navbar__menu" role="menu" aria-hidden="true">
        <a href="/docs" class="navbar__link">Docs</a>
        <a href="/blocks" class="navbar__link">Blocks</a>
        <a href="/themes" class="navbar__link">Themes</a>
      </div>
    </div>
  </Navbar>
</template>

import { Navbar, Search } from './components/react';

<Navbar siteName="My App">
  <Search id="nav-search" placeholder="Search…" />
  <button type="button" className="navbar__settings-btn" aria-label="Open settings" onClick={() => window.openSettings?.()}>
    <svg className="navbar__settings-icon icon" width={20} height={20} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden><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 className="navbar__settings-label">Settings</span>
  </button>
</Navbar>

Props

siteName (string, optional) - Site name displayed in navbar brand
logo (string, optional) - Path to logo image

Features

Desktop Layout:
- Search and settings buttons on far right
- 2-column dropdown layout - The Components dropdown displays in a 2-column grid with vertical divider. Docs dropdown shows Introduction and Foundations only (Theming is under Docs).
- Smart dropdown positioning - Automatically adjusts to prevent viewport overflow
- Dropdown arrow rotates on hover/expand
Mobile Layout:
- Mobile menu toggle positioned on the left (after logo/brand)
- Search and settings on the right: icon-only, same size as menu toggle (compact bar, no overflow)
- Responsive mobile menu (activates at 1024px and below) with full-width layout; when open, fixed positioning so it stacks above site content
- Increased vertical spacing for better readability, especially in dropdown menus
- Mobile menu links start from left edge with minimal padding
- Mutually exclusive with search (only one open at a time on mobile)
- Dropdown toggles use buttons (not links) for accessibility
Full-width border (100% width; avoids horizontal overflow on mobile)
Responsive mobile menu with smooth open/close transitions
Dropdown menus with full keyboard navigation (Arrow keys, Enter, Space, Escape, Home, End)
Active link indicator with underline
Sticky positioning at top
All styles use design system variables for easy framework portability

Other frameworks: Vanilla · Svelte · Vue · React

Navbar Component — Astro