kosori

Sidebar

A collapsible application sidebar for navigation.

Sidebar composes Button, Input, Scroll Area, Separator, Sheet, Skeleton and Tooltip. It collapses to an icon rail on desktop and becomes a Sheet below the md breakpoint. Every part carries a data-slot for styling.

Installation

npx shadcn@latest add @kosori/sidebar

Example

The Example below is a registry:example item, built and validated by the same pipeline as Sidebar. Its source is the file @kosori/sidebar-example installs, so the preview and the install cannot drift.

sidebar-example.tsx
Dashboard
Use the trigger to collapse or reveal the sidebar.
sidebar-example
import { IconHome, IconInbox, IconSettings } from '@tabler/icons-react';
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar';

const items = [
  { icon: IconHome, title: 'Home' },
  { icon: IconInbox, title: 'Inbox' },
  { icon: IconSettings, title: 'Settings' },
];

const SidebarExample = () => (
  <div className='relative h-80 w-full translate-y-0 overflow-hidden rounded-lg border'>
    <SidebarProvider>
      <Sidebar>
        <SidebarHeader>
          <div className='flex h-8 items-center gap-2 px-2 font-medium text-sm'>
            Acme
          </div>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map(({ icon: Icon, title }) => (
                  <SidebarMenuItem key={title}>
                    <SidebarMenuButton tooltip={title}>
                      <Icon />
                      <span>{title}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className='flex items-center gap-2 border-b p-2'>
          <SidebarTrigger />
          <span className='font-medium text-sm'>Dashboard</span>
        </header>
        <div className='p-6 text-muted-foreground text-sm'>
          Use the trigger to collapse or reveal the sidebar.
        </div>
      </SidebarInset>
    </SidebarProvider>
  </div>
);

export default SidebarExample;

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from '@/components/ui/sidebar';

const SidebarDemo = () => (
  <SidebarProvider>
    <Sidebar>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton>Home</SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  </SidebarProvider>
);

Variants

PartPropValues
SidebarMenuButtonsizedefault, lg, sm
SidebarMenuButtonvariantdefault, outline

Sheet

A flyout that opens from the side of the screen, based on the dialog component.

Skeleton

A loading state skeleton for your components.

On this page

InstallationExampleUsageVariants