Nav Bar
Nav Bar is a vertical sidebar navigation component with expandable and collapsible states, available in Default, Gray, and Brand styles.
Loading preview…
1
<NavBar2
variant="brand"3
collapsed={false}4
headerProps={{ mainText: 'ShopFlow', secondaryText: 'E-Commerce' }}5
footerProps={{ mainText: 'Store Admin', secondaryText: 'admin@shopflow.io' }}Installation
npx sdaia-ui@latest add nav-bar
Usage
import { NavBar } from "@/components/ui/nav-bar"<NavBar state="expanded" style="default" />Examples
Default
Standard navigation bar with the default style. Toggle expanded or collapsed to preview both states.
Loading preview…
1
<NavBar2
variant="default"3
headerProps={{ mainText: 'SDAIA Coe', secondaryText: 'Enterprise' }}4
footerProps={{ mainText: 'User Name', secondaryText: 'sdaiauser@example.com' }}5
groups={GROUPS}Gray
Navigation bar in the grey style.
Loading preview…
1
<NavBar2
variant="gray"3
headerProps={{ mainText: 'SDAIA Coe', secondaryText: 'Enterprise' }}4
footerProps={{ mainText: 'User Name', secondaryText: 'sdaiauser@example.com' }}5
groups={GROUPS}Brand
Navigation bar with the brand colour applied.
Loading preview…
1
<NavBar2
variant="brand"3
headerProps={{ mainText: 'SDAIA Coe', secondaryText: 'Enterprise' }}4
footerProps={{ mainText: 'User Name', secondaryText: 'sdaiauser@example.com' }}5
groups={GROUPS}Mobile
Compact navigation bar layout optimised for mobile screens.
Loading preview…
1
const [collapsed, setCollapsed] = useState(true);2
3
<NavBar4
variant="default"5
mobileAPI Reference
NavBarProps
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 |