layout/@mihcm/ui·v0.21.0·stable
Sidebar
Composable, collapsible sidebar with mobile sheet support, keyboard shortcuts (Ctrl/Cmd+B), and cookie persistence.
Props
The full prop API for Sidebar. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
side | 'left' | 'right' | 'left' | Shared docking side for Sidebar, SidebarTrigger, and SidebarRail. On SidebarProvider. | 0.6.0 |
variant | 'sidebar' | 'floating' | 'inset' | 'sidebar' | Shared visual variant controlling border and shadow treatment. On SidebarProvider. | 0.6.0 |
collapsible | 'offcanvas' | 'icon' | 'none' | 'offcanvas' | Shared collapse behaviour. offcanvas hides fully, icon collapses to icon rail, none disables collapse. On SidebarProvider. | 0.6.0 |
defaultOpen | boolean | true | Initial open state. On SidebarProvider. | 0.6.0 |
defaultOpenMobile | boolean | false | Initial mobile Sheet open state. On SidebarProvider. | 0.10.1 |
openMobile | boolean | — | Controlled mobile Sheet open state. On SidebarProvider. | 0.10.1 |
onOpenMobileChange | (open: boolean) => void | — | Called when the mobile Sheet opens or closes. On SidebarProvider. | 0.10.1 |
mobileBreakpoint | number | 768 | Breakpoint in pixels where automatic mobile Sheet mode starts. On SidebarProvider. | 0.10.1 |
width / iconWidth / mobileWidth | string | — | Provider-level CSS variable controls for expanded desktop, icon rail, and mobile Sheet widths. | 0.10.1 |
size | 'sm' | 'default' | 'lg' | 'default' | Button size variant. On SidebarMenuButton. | 0.6.0 |
isActive | boolean | false | Active/selected state for menu buttons. On SidebarMenuButton. | 0.6.0 |
className | string | — | Additional Tailwind classes on any sub-component. | 0.6.0 |
Import
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from '@mihcm/ui/Sidebar';