Sidebar
uiCategories.layoutStructure.components.showcases.sidebar.description
Installation
Import
Usage
uiCategories.layoutStructure.components.showcases.sidebar.usage
Design Guidelines
uiCategories.layoutStructure.components.showcases.sidebar.designGuidelines
uiCategories.layoutStructure.components.showcases.sidebar.examples.basicUsage.title
uiCategories.layoutStructure.components.showcases.sidebar.examples.basicUsage.description
uiCategories.layoutStructure.components.showcases.sidebar.examples.withGroups.title
uiCategories.layoutStructure.components.showcases.sidebar.examples.withGroups.description
uiCategories.layoutStructure.components.showcases.sidebar.examples.withSubmenu.title
uiCategories.layoutStructure.components.showcases.sidebar.examples.withSubmenu.description
uiCategories.layoutStructure.components.showcases.sidebar.examples.floatingVariant.title
uiCategories.layoutStructure.components.showcases.sidebar.examples.floatingVariant.description
uiCategories.layoutStructure.components.showcases.sidebar.examples.collapsibleOptions.title
uiCategories.layoutStructure.components.showcases.sidebar.examples.collapsibleOptions.description
SidebarProvider
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
defaultOpen | boolean | true | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.defaultOpen.description |
open | boolean | — | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.open.description |
onOpenChange | (open: boolean) => void | — | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.onOpenChange.description |
sidebarWidth | string | "20rem" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.sidebarWidth.description |
sidebarIconWidth | string | "3.5rem" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.sidebarIconWidth.description |
sidebarKeyboardShortcut | string | "b" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarProvider.props.sidebarKeyboardShortcut.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Sidebar
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebar.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
side | "left" | "right" | "left" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebar.props.side.description |
variant | "sidebar" | "floating" | "inset" | "sidebar" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebar.props.variant.description |
collapsible | "offcanvas" | "icon" | "none" | "icon" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebar.props.collapsible.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarHeader
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarHeader.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarContent
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarContent.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarGroup
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarGroup.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarGroupLabel
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarGroupLabel.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenu
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenu.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenuItem
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuItem.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenuButton
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuButton.description packages.composedComponents.extends Button. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
isActive | boolean | false | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuButton.props.isActive.description |
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuButton.props.tooltip.description |
variant | "default" | "ghost" | "outline" | "default" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuButton.props.variant.description |
buttonSize | "sm" | "default" | "lg" | "default" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuButton.props.buttonSize.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenuSub
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSub.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
open | boolean | — | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSub.props.open.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenuSubItem
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSubItem.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarMenuSubButton
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSubButton.description packages.composedComponents.extends Link. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
linkSize | "sm" | "md" | "md" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSubButton.props.linkSize.description |
isActive | boolean | false | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarMenuSubButton.props.isActive.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarInset
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarInset.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarRail
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarRail.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarTrigger
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarTrigger.description packages.composedComponents.extends Button. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
icon | IconName | "side-panel-left" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarTrigger.props.icon.description |
label | string | "Toggle Sidebar" | uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarTrigger.props.label.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarFooter
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarFooter.description packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarSeparator
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarSeparator.description packages.composedComponents.extends Separator. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
SidebarInput
uiCategories.layoutStructure.components.showcases.sidebar.composedComponents.sidebarInput.description packages.composedComponents.extends Input. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
uiCategories.layoutStructure.components.showcases.sidebar.accessibility