Sidebar

items: [{ key, label, icon?, href?, onClick?, badge?, children? }]. collapsed shows icons only.

An item with section: true is a caption such as "Main Menu" (a divider when collapsed). Labels cut off by the width show a tooltip. bordered={false} removes the separators, density is dense, default or comfortable, and headerClassName / listClassName replace the header and list padding.

Props

Sidebar

borderedboolean
Default: true
Draw the right edge and the lines under the header and over the footer.
borderRightboolean
Default: bordered
The right edge alone, independent of the header and footer lines.
widthstring
Default: w-60
Tailwind width class of the expanded sidebar (w-full fills a drawer).
textCase'uppercase' | 'none'
Default: uppercase
none shows sentence-case labels at a normal size.
iconSize'sm' | 'md'
Default: sm
Size of the item icons (16px or 20px).
itemClassNamestring
Added to every item row.
density'dense' | 'default' | 'comfortable'
Default: default
Vertical size of the items.
headerClassNamestring
Default: px-3 py-3
Replaces the default header padding.
listClassNamestring
Default: py-2
Replaces the default list padding.
itemsSidebarItem[]
Navigation entries; children makes a group, section: true makes a caption and divider: true a plain rule. See the SidebarItem table below.
activeKeystring
Key of the current item.
onSelect(key: string) => void
Called when any item is clicked.
headerReactNode
Content above the list.
footerReactNode
Content below the list.
collapsedboolean
Default: false
Icons only (give every item an icon).
linkComponentElementType
Default: 'a'
Component used for links, e.g. a router Link.
linkPropstring
Default: 'href'
Name of the destination prop on linkComponent (e.g. "to" for react-router).
labelstring
Default: 'Sidebar'
Accessible name.
classNamestring
Default: ''
Extra classes for the root element.

Sidebar props
Prop	Type	Default	Description
`bordered`	boolean	`true`	Draw the right edge and the lines under the header and over the footer.
`borderRight`	boolean	`bordered`	The right edge alone, independent of the header and footer lines.
`width`	string	`w-60`	Tailwind width class of the expanded sidebar (`w-full` fills a drawer).
`textCase`	'uppercase' \| 'none'	`uppercase`	`none` shows sentence-case labels at a normal size.
`iconSize`	'sm' \| 'md'	`sm`	Size of the item icons (16px or 20px).
`itemClassName`	string	–	Added to every item row.
`density`	'dense' \| 'default' \| 'comfortable'	`default`	Vertical size of the items.
`headerClassName`	string	`px-3 py-3`	Replaces the default header padding.
`listClassName`	string	`py-2`	Replaces the default list padding.
`items`	SidebarItem[]	–	Navigation entries; `children` makes a group, `section: true` makes a caption and `divider: true` a plain rule. See the SidebarItem table below.
`activeKey`	string	–	Key of the current item.
`onSelect`	(key: string) => void	–	Called when any item is clicked.
`header`	ReactNode	–	Content above the list.
`footer`	ReactNode	–	Content below the list.
`collapsed`	boolean	`false`	Icons only (give every item an `icon`).
`linkComponent`	ElementType	`'a'`	Component used for links, e.g. a router Link.
`linkProp`	string	`'href'`	Name of the destination prop on `linkComponent` (e.g. "to" for react-router).
`label`	string	`'Sidebar'`	Accessible name.
`className`	string	`''`	Extra classes for the root element.

SidebarItem

keystring
Unique key of the item.
labelstring
Text of the item (optional for a divider).
iconReactNode
Shown before the label.
hrefstring
Makes the item a link.
onClick() => void
Called when the item is chosen.
badgeReactNode
Short value at the end of the row, e.g. a count.
sectionboolean
Default: false
A non-interactive caption that groups the items after it (only key and label are used).
dividerboolean
Default: false
A plain rule between groups (only key is used).
childrenSidebarItem[]
Makes the item a group with an indented sub-list.

SidebarItem props
Prop	Type	Default	Description
`key`	string	–	Unique key of the item.
`label`	string	–	Text of the item (optional for a divider).
`icon`	ReactNode	–	Shown before the label.
`href`	string	–	Makes the item a link.
`onClick`	() => void	–	Called when the item is chosen.
`badge`	ReactNode	–	Short value at the end of the row, e.g. a count.
`section`	boolean	`false`	A non-interactive caption that groups the items after it (only key and label are used).
`divider`	boolean	`false`	A plain rule between groups (only key is used).
`children`	SidebarItem[]	–	Makes the item a group with an indented sub-list.