Navbar
A horizontal navigation bar with multiple styling variants for organizing links and actions. Supports icons, dropdown menus, and consistent visual hierarchy across your application.
Component Setup
Create or update your Navbar component
Copy this code to create your Navbar component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Stroke Variant
Navbar items with border outlines for better visual separation.
Ghost Variant
Minimal styling with hover effects for secondary navigation.
Advanced Examples
Complete navbar examples with logos, icons, and dropdown menus.
API Reference
The Navbar component is a compound component that consists of several parts. Each part has its own set of props that can be used to customize its appearance and behavior.
Navbar.Root
The container component that provides the main navbar structure.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the navbar root. |
children | "ReactNode" | "undefined" | The content of the navbar. |
Navbar.Menu
A container for navbar items, typically used to group navigation links.
| Prop | Type | Default | Description |
|---|---|---|---|
className | "string" | "undefined" | Additional CSS classes to apply to the navbar menu. |
children | "ReactNode" | "undefined" | The content of the navbar menu, typically Navbar.Item components. |
Navbar.Item
Individual navigation item that can be styled in different variants and can contain icons.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""stroke""ghost" | "default" | The visual style variant of the navbar item. |
active | "boolean" | "false" | When true, applies active styling to the navbar item. |
asChild | "boolean" | "false" | When true, the component will render its child directly, transferring all props to it. |
href | "string" | "undefined" | The URL that the navbar item links to. |
className | "string" | "undefined" | Additional CSS classes to apply to the navbar item. |
children | "ReactNode" | "undefined" | The content of the navbar item. |
Navbar.Item.Icon
Icon component that can be used within a navbar item.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | The icon component to render. |
className | "string" | "undefined" | Additional CSS classes to apply to the icon. |