Main Sidebar — Design System

Props

The full prop API for Main Sidebar. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`items`	`MainSidebarItem[]`	—	Navigation tree. Items support `icon`, `label`, `description`, `badge`, `children`, and custom `panel` content.	0.4.0
`activeKey`	`string`	—	Key of the active item.	0.4.0
`onItemSelect`	`(key: string, item: MainSidebarItem) => void`	—	Fired when an item is activated.	0.4.0
`expanded`	`boolean`	—	Controlled expanded state for the drilldown panel.	0.9.0
`defaultExpanded`	`boolean`	`false`	Initial uncontrolled expanded state.	0.9.0
`header`	`ReactNode`	—	Leading slot above the items (logo).	0.4.0
`footer`	`ReactNode`	—	Trailing slot at the bottom (settings cog).	0.4.0
`panelHeader / panelFooter`	`ReactNode`	—	Expanded panel slots for custom headings, actions, summaries, or status badges.	0.9.0
`side`	`'left' \| 'right'`	`'left'`	Desktop placement. Use `right` when the sidebar docks to the right edge; the rail stays outside and the panel opens inward.	0.9.0
`mobile`	`boolean`	`false`	Forces the responsive bottom navigation pattern for documentation previews, tests, and mobile-only shells.	0.10.1
`pinnable`	`boolean`	`false`	Drilldown only — show a pin/unpin toggle in the panel header. Pinning keeps a chosen section’s sub-panel open across navigation, remounts, and outside-clicks until explicitly unpinned.	0.21.0
`pinnedKey / defaultPinnedKey`	`string`	—	Controlled / uncontrolled key of the pinned section. A controlled `pinnedKey` round-trips through `onPinnedKeyChange`, so it can be persisted (e.g. localStorage) and survive a reload.	0.21.0
`onPinnedKeyChange`	`(key: string \| undefined) => void`	—	Fired when the user pins/unpins via the header toggle. `undefined` = unpinned.	0.21.0
`pinLabel / unpinLabel`	`string`	`'Pin menu' / 'Unpin menu'`	A11y labels / tooltips for the pin toggle in its unpinned / pinned state.	0.21.0
`railClassName / panelClassName / itemClassName / activeItemClassName`	`string`	—	Tokenized Tailwind override hooks merged with the default rail, panel, and item styles.	0.9.0

Import

import { MainSidebar } from '@mihcm/ui/MainSidebar';