Navbar
A responsive navigation bar component with support for logos, links, search, action slots, and mobile menu. Ships with 4 visual variants, sticky behavior, and built-in responsive breakpoints powered by Framer Motion.
Live Preview
A visual preview of the Navbar component with logo, links, search trigger, and responsive mobile menu.
Resize your browser or tap the menu icon on mobile to see the responsive behavior.
Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Navbar component into your file.
import { Navbar } from '@/components/aidash/navbar';Basic Usage
The simplest way to use the Navbar with a logo and navigation links.
<Navbar
logo={<Logo />}
links={[
{ label: 'Home', href: '/', active: true },
{ label: 'Products', href: '/products' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Docs', href: '/docs' },
]}
actions={
<>
<Button variant="ghost">Sign in</Button>
<Button variant="primary">Get Started</Button>
</>
}
/>Variants
Four visual variants for different navbar appearances and contexts.
Default (Transparent)
1<Navbar variant="default" ... />2{/* Transparent background, blends with page */}Solid (With Background)
1<Navbar variant="solid" ... />2{/* Elevated surface background */}Bordered (With Bottom Border)
1<Navbar variant="bordered" ... />2{/* Surface background with bottom border */}Floating (With Shadow and Rounded)
1<Navbar variant="floating" ... />2{/* Elevated with shadow, rounded corners, and margin */}default for hero sections, solid or bordered for standard layouts, and floating for dashboard-style apps.Responsive
The navbar collapses into a hamburger menu on screens below the mobileBreakpoint. Tap the menu icon to see the mobile navigation.
1<Navbar2variant="bordered"3mobileBreakpoint={768}4logo={<Logo />}5links={[6 { label: 'Home', href: '/', active: true },7 { label: 'Products', href: '/products' },8 { label: 'Pricing', href: '/pricing' },9 { label: 'Docs', href: '/docs' },10]}11actions={<Button variant="primary">Get Started</Button>}12/>13 14{/* On screens < 768px, links collapse into a15 hamburger menu with animated open/close */}With Search
Enable the integrated search trigger button that can open a command palette or search modal.
1<Navbar2variant="solid"3showSearch4logo={<Logo />}5links={[6 { label: 'Home', href: '/' },7 { label: 'Products', href: '/products' },8 { label: 'Docs', href: '/docs' },9]}10actions={<Button variant="primary">Get Started</Button>}11/>12 13{/* The search button renders a trigger that can be14 wired to a Command or search modal component */}Sticky Behavior
By default, the navbar uses sticky positioning with a backdrop blur effect for a modern frosted-glass look on scroll.
1<Navbar2sticky3variant="bordered"4logo={<Logo />}5links={navLinks}6actions={<UserMenu />}7/>8 9{/* sticky={true} is the default. The navbar applies10 position: sticky; top: 0; with backdrop-blur for a11 frosted-glass effect on scroll. */}12 13{/* To disable sticky behavior: */}14<Navbar sticky={false} ... />API Reference
Complete list of props accepted by the Navbar component.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'solid' | 'bordered' | 'floating' | 'default' | Visual style of the navbar |
| sticky | boolean | true | Whether the navbar sticks to the top on scroll |
| showSearch | boolean | false | Show an integrated search trigger button |
| logo | ReactNode | — | Logo element rendered on the left side |
| links | NavLink[] | [] | Array of navigation link objects with label, href, and optional active flag |
| actions | ReactNode | — | Action elements (buttons, avatars) rendered on the right side |
| mobileBreakpoint | number | 768 | Screen width in px below which the mobile menu is used |
| className | string | '' | Additional CSS classes applied to the root element |
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Display text for the navigation link |
| href* | string | — | URL or path the link navigates to |
| active | boolean | false | Whether this link represents the current page |
| icon | ReactNode | — | Optional icon rendered before the label |
mobileBreakpoint prop controls when the desktop links collapse into the hamburger menu. The component listens to window.matchMedia for responsive behavior without layout thrashing.Accessibility
Built-in accessibility features for inclusive navigation experiences.
Semantic Navigation
Renders as a <nav> landmark element with role="navigation" and aria-label="Main navigation" for screen readers to identify the navigation region.
Keyboard Navigation
All links and buttons are fully keyboard accessible. Users can Tab through navigation items and activate them with Enter or Space. The mobile menu toggle is also keyboard operable.
ARIA Labels
The hamburger menu button includes aria-expanded and aria-controls attributes. Active links use aria-current="page" to convey the current page to assistive technologies.
Screen Reader Support
The mobile menu uses aria-hidden when collapsed so screen readers skip it. The search button includes descriptive aria-label="Search" text.
Focus Management
When the mobile menu opens, focus is trapped within it. Pressing Escape closes the menu and returns focus to the toggle button.
1{/* Navbar renders with proper landmark semantics */}2<nav role="navigation" aria-label="Main navigation">3...4</nav>5 6{/* Active link is marked for assistive technology */}7<a href="/" aria-current="page">Home</a>8 9{/* Mobile toggle communicates state */}10<button11aria-expanded={isOpen}12aria-controls="mobile-menu"13aria-label="Toggle navigation menu"14>15<MenuIcon />16</button>Related
Other components that work well alongside Navbar.