Navbar
NavigationA navigation bar for site-wide navigation. Use navbars at the top of pages to provide primary navigation and branding.
Import
import {
Navbar,
NavbarContent,
NavbarBrand,
NavbarItems,
NavbarItem,
ResponsiveNavbar
} from "@/components/ui/navbar";Usage
Interactive Navbar
A responsive navigation bar that adapts to screen size. Use the viewport toggle to see how the navbar transforms - mobile view shows a hamburger menu that opens a dropdown.
API Reference
variant"default""default" | "dark" | "transparent" | "blur"Visual style of the navbar
stickyfalsebooleanMake the navbar sticky at the top
borderedtruebooleanShow bottom border
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "dark" | "transparent" | "blur" | "default" | Visual style of the navbar |
sticky | boolean | false | Make the navbar sticky at the top |
bordered | boolean | true | Show bottom border |