Nav Bar is a vertical sidebar navigation component with expandable and collapsible states, available in Default, Gray, and Brand styles.
Loading demo: nav-bar-real-world
npx sdaia-ui@latest add nav-bar
import { NavBar } from "@/components/ui/nav-bar"<NavBar state="expanded" style="default" />Standard navigation bar with the default style. Toggle expanded or collapsed to preview both states.
Loading demo: nav-bar-default
Navigation bar in the grey style.
Loading demo: nav-bar-gray
Navigation bar with the brand colour applied.
Loading demo: nav-bar-brand
Compact navigation bar layout optimised for mobile screens.
Loading demo: nav-bar-mobile
Props for the NavBar component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'default' | 'gray' | 'brand' | 'default' | optional |
collapsed | boolean | false | optional |
mobile | boolean | false | optional |
onToggle | () => void | - | optional |
headerProps | Omit<HeaderItemProps, 'variant' | 'size'> | - | optional |
footerProps | Omit<FooterItemProps, 'variant' | 'size'> | - | optional |
groups | NavBarGroup[] | [] | optional |