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
Basic Navbar
Standard navigation bar with links
Dark Variant
Dark themed navbar for use on light backgrounds
Responsive Navbar
Navbar with mobile menu support (resize to see mobile menu)
Blur Variant
Semi-transparent navbar with blur effect
API Reference
| 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 |