Navbar — React
Responsive, accessible navigation bar with Search and Settings
Navbar
Responsive, accessible navigation bar with Search and Settings
Same BEM classes and behavior as Astro, Svelte, and Vue.
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 bash bash
npx rizzo-css add Navbar bash bash
pnpm dlx rizzo-css add Navbar bash bash
npx rizzo-css add Navbar bash bash
bunx rizzo-css add NavbarLive examples
React
Usage
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
astro astro
---
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> html html
<!-- 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> svelte svelte
<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> vue vue
<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> tsx tsx
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>