nessra uinessra ui

Sidebar

Previous: SheetNext: Skeleton

A composable, themeable and customizable sidebar component.

Docs API Reference
Loading...
"use client"

import {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/sidebar.json

Structure

A Sidebar component is composed of the following parts:

  • SidebarProvider - Handles collapsible state.
  • Sidebar - The sidebar container.
  • SidebarHeader and SidebarFooter - Sticky at the top and bottom of the sidebar.
  • SidebarContent - Scrollable content.
  • SidebarGroup - Section within the SidebarContent.
  • SidebarTrigger - Trigger for the Sidebar.
Sidebar Structure

SidebarMenu

The SidebarMenu component is used for building a menu within a SidebarGroup.

A SidebarMenu is composed of SidebarMenuItem, SidebarMenuButton, SidebarMenuAction and SidebarMenuSub components.

Sidebar Menu

For advanced usage, theming, and more examples, see the complete shadcn documentation.

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar"
<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Application</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton>
                <HomeIcon />
                <span>Home</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <main>
    <SidebarTrigger />
    {/* Your content */}
  </main>
</SidebarProvider>

API Reference

Components

ComponentDescription
SidebarProviderContext wrapper managing sidebar state
SidebarMain sidebar container
SidebarTriggerButton to toggle the sidebar
SidebarRailDraggable rail for resizing
SidebarInsetMain content area with inset styling
SidebarHeaderSticky header section
SidebarFooterSticky footer section
SidebarContentScrollable content area
SidebarGroupSection container
SidebarGroupLabelLabel for a group
SidebarGroupActionAction button within a group
SidebarGroupContentContent wrapper for a group
SidebarMenuMenu container
SidebarMenuItemIndividual menu item
SidebarMenuButtonClickable menu button with tooltip support
SidebarMenuActionSecondary action within menu item
SidebarMenuBadgeBadge display in menu item
SidebarMenuSkeletonLoading skeleton for menu items
SidebarMenuSubSubmenu container
SidebarMenuSubItemSubmenu item
SidebarMenuSubButtonSubmenu button
SidebarInputStyled input for sidebar
SidebarSeparatorVisual separator

SidebarProvider

PropTypeDefaultDescription
defaultOpenbooleantrueDefault open state
openboolean-Controlled open state
onOpenChange(open: boolean) => void-Callback when open changes

Sidebar

PropTypeDefaultDescription
side"left" | "right""left"Sidebar position
variant"sidebar" | "floating" | "inset""sidebar"Visual style variant
collapsible"offcanvas" | "icon" | "none""offcanvas"Collapse behavior

SidebarMenuButton

PropTypeDefaultDescription
asChildbooleanfalseRender as child
isActivebooleanfalseActive state
tooltipstring | TooltipContentProps-Tooltip on collapse
variant"default" | "outline""default"Button style
size"default" | "sm" | "lg""default"Button size

useSidebar Hook

Returns sidebar context with state and controls.

const {
  state, // "expanded" | "collapsed"
  open, // boolean
  setOpen, // (open: boolean) => void
  isMobile, // boolean
  openMobile, // boolean
  setOpenMobile, // (open: boolean) => void
  toggleSidebar, // () => void
} = useSidebar()

Features

  • Keyboard shortcut: Ctrl+B / Cmd+B to toggle
  • Mobile responsive: Sheet-based sidebar on mobile
  • Cookie persistence: Remembers open/closed state
  • Collapsible modes: Offcanvas, icon-only, or fixed
  • Theming: Full CSS variable support for colors
SheetSkeleton

On this page

InstallationStructureSidebarMenuUsageAPI ReferenceComponentsSidebarProviderSidebarSidebarMenuButtonuseSidebar HookFeatures