Sidebar
A collapsible application sidebar with floating controls, peek interactions, and a dedicated content inset.
Installation
Install the Sidebar package using the nocta-ui CLI:
npx @nocta-ui/cli add sidebarThen import the primitives you need:
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarInput,
SidebarMenu,
SidebarMenuAction,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarSeparator,
SidebarTrigger,
} from "@/components/ui/sidebar";Examples
Default Sidebar
API Reference
Providers and hooks
SidebarProvider
Prop
Type
useSidebar
useSidebar exposes the shared layout state from SidebarProvider.
Prop
Type
Layout primitives
Sidebar
Prop
Type
SidebarTrigger
Prop
Type
SidebarInset
Prop
Type
SidebarHeader
Prop
Type
SidebarContent
Prop
Type
SidebarFooter
Prop
Type
SidebarSeparator
Prop
Type
SidebarInput
Prop
Type
Grouping primitives
SidebarGroup
Prop
Type
SidebarGroupLabel
Prop
Type
SidebarGroupAction
Prop
Type
SidebarGroupContent
Prop
Type
Menu primitives
SidebarMenu
Prop
Type
SidebarMenuItem
Prop
Type
SidebarMenuButton
Prop
Type
SidebarMenuButtonTooltipProps
Prop
Type
SidebarMenuAction
Prop
Type
SidebarMenuSub
Prop
Type
SidebarMenuSubItem
Prop
Type
SidebarMenuSubButton
Prop
Type