Back to components
ComponentNavbarFree
Vertical Sidebar Header React component
A collapsible vertical workspace header with icon navigation, a shared active indicator, item badges and a compact profile footer.
About the Vertical Sidebar Header component
A collapsible vertical workspace header with icon navigation, a shared active indicator, item badges and a compact profile footer.
Installation
Add the Vertical Sidebar Header component to your project with the shadcn CLI. It lands in components/vertical-sidebar-header.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/vertical-sidebar-headerOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion lucide-react clsx tailwind-mergeProps
<VerticalSidebarHeader /> accepts 15 props, all optional. It also accepts the usual <aside> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| logo | React.ReactNode | "Forme." |
| logoHref | string | "/" |
| items | { id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[] | SIDEBAR_LINKS |
| activeId | string | — |
| defaultActiveId | string | "overview" |
| onActiveChange | (id:string)=>void | — |
| collapsed | boolean | — |
| defaultCollapsed | boolean | false |
| onCollapsedChange | (collapsed:boolean)=>void | — |
| profileName | string | "Alex Morgan" |
| profileDetail | string | "Personal workspace" |
- theme"dark" | "light"Default: "dark"
- logoReact.ReactNodeDefault: "Forme."
- logoHrefstringDefault: "/"
- items{ id: string; label: string; href: string; description?: string; badge?: string; icon?: React.ReactNode }[]Default: SIDEBAR_LINKS
- activeIdstring
- defaultActiveIdstringDefault: "overview"
- onActiveChange(id:string)=>void
- collapsedboolean
- defaultCollapsedbooleanDefault: false
- onCollapsedChange(collapsed:boolean)=>void
- profileNamestringDefault: "Alex Morgan"
- profileDetailstringDefault: "Personal workspace"
Show all 15 propsShow fewer
| profileInitials | string | "AM" |
| height | number | string | 560 |
| onNavigate | (item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void | — |
- profileInitialsstringDefault: "AM"
- heightnumber | stringDefault: 560
- onNavigate(item:NavbarLink,event:React.MouseEvent<HTMLAnchorElement>)=>void
npm dependencies
Installed for you by the shadcn CLI.
