shadcn.io is an independent project built on shadcn/ui

Components

Free

Sidebar for Radix UI

Grouped links in a collapsible rail, with a team switcher and an account menu. For React with Radix UI, when navigation should stay put on wide screens.

Grouped links in a rail beside the page. The rail can shrink to icons.

Use it for the stable navigation of a wide product. A few destinations on a phone fit better in Bottom Navigation. In React, Radix UI keeps the rail open or closed, and the same header button opens it as a sheet on a narrow screen.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import {
  AudioWaveformIcon, BadgeCheckIcon, BellIcon, BookOpenIcon, BotIcon,
  ChevronRightIcon, ChevronsUpDownIcon, CommandIcon, CreditCardIcon,
  FolderIcon, ForwardIcon, FrameIcon, GalleryVerticalEndIcon,
  LogOutIcon, MapIcon, MoreHorizontalIcon, PieChartIcon, PlusIcon,
  Settings2Icon, SparklesIcon, SquareTerminalIcon, Trash2Icon,
} from "lucide-react";
import type React from "react";
import { useCallback, useState } from "react";
import {
  Avatar, AvatarFallback, AvatarImage,
} from "@/components/ui/avatar";
import {
  Collapsible, CollapsibleContent, CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuGroup,
  DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuSeparator,
  DropdownMenuShortcut, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sidebar, SidebarContent, SidebarFooter, SidebarGroup,
  SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu,
  SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub,
  SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider,
  SidebarRail, SidebarTrigger, useSidebar,
} from "@/components/ui/sidebar";

// This is sample data.
const data = {
  navMain: [
    {
      icon: SquareTerminalIcon,
      isActive: true,
      items: [
        {
          title: "History",
          url: "#",
        },
        {
          title: "Starred",
          url: "#",
        },
        {
          title: "Settings",
          url: "#",
        },
      ],
      title: "Playground",
      url: "#",
    },
    {
      icon: BotIcon,
      items: [
        {
          title: "Genesis",
          url: "#",
        },
        {
          title: "Explorer",
          url: "#",
        },
        {
          title: "Quantum",
          url: "#",
        },
      ],
      title: "Models",
      url: "#",
    },
    {
      icon: BookOpenIcon,
      items: [
        {
          title: "Introduction",
          url: "#",
        },
        {
          title: "Get Started",
          url: "#",
        },
        {
          title: "Tutorials",
          url: "#",
        },
        {
          title: "Changelog",
          url: "#",
        },
      ],
      title: "Documentation",
      url: "#",
    },
    {
      icon: Settings2Icon,
      items: [
        {
          title: "General",
          url: "#",
        },
        {
          title: "Team",
          url: "#",
        },
        {
          title: "Billing",
          url: "#",
        },
        {
          title: "Limits",
          url: "#",
        },
      ],
      title: "Settings",
      url: "#",
    },
  ],
  projects: [
    {
      icon: FrameIcon,
      name: "Design Engineering",
      url: "#",
    },
    {
      icon: PieChartIcon,
      name: "Sales & Marketing",
      url: "#",
    },
    {
      icon: MapIcon,
      name: "Travel",
      url: "#",
    },
  ],
  teams: [
    {
      logo: GalleryVerticalEndIcon,
      name: "Acme Inc",
      plan: "Enterprise",
    },
    {
      logo: AudioWaveformIcon,
      name: "Acme Corp.",
      plan: "Startup",
    },
    {
      logo: CommandIcon,
      name: "Evil Corp.",
      plan: "Free",
    },
  ],
  user: {
    avatar: "https://github.com/shadcn.png",
    email: "[email protected]",
    name: "shadcn",
  },
};

interface Team {
  logo: React.ElementType;
  name: string;
  plan: string;
}

function TeamMenuItem({
  index,
  onSelect,
  team,
}: {
  index: number;
  onSelect: (team: Team) => void;
  team: Team;
}) {
  const handleClick = useCallback(() => {
    onSelect(team);
  }, [onSelect, team]);

  return (
    <DropdownMenuItem className="gap-2 p-2" onClick={handleClick}>
      <div className="flex size-6 items-center justify-center rounded-md border">
        <team.logo aria-hidden="true" className="size-3.5 shrink-0" />
      </div>
      {team.name}
      <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
    </DropdownMenuItem>
  );
}

function TeamSwitcher({ teams }: { teams: Team[] }) {
  const { isMobile } = useSidebar();
  const [activeTeam, setActiveTeam] = useState(teams[0]);
  const handleSelectTeam = useCallback((team: Team) => {
    setActiveTeam(team);
  }, []);

  if (!activeTeam) {
    return null;
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
              size="lg"
            >
              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                <activeTeam.logo aria-hidden="true" className="size-4" />
              </div>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">{activeTeam.name}</span>
                <span className="truncate text-xs">{activeTeam.plan}</span>
              </div>
              <ChevronsUpDownIcon aria-hidden="true" className="ms-auto" />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="start"
            className="min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuGroupLabel className="text-muted-foreground text-xs">
                Teams
              </DropdownMenuGroupLabel>
              {teams.map((team, index) => (
                <TeamMenuItem
                  index={index}
                  key={team.name}
                  onSelect={handleSelectTeam}
                  team={team}
                />
              ))}
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem className="gap-2 p-2">
                <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                  <PlusIcon aria-hidden="true" className="size-4" />
                </div>
                <div className="font-medium text-muted-foreground">
                  Add team
                </div>
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}

function NavMain({
  items,
}: {
  items: {
    title: string;
    url: string;
    icon?: React.ElementType;
    isActive?: boolean;
    items?: {
      title: string;
      url: string;
    }[];
  }[];
}) {
  return (
    <SidebarGroup>
      <SidebarGroupLabel>Platform</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((item) => (
          <Collapsible
            asChild
            className="group/collapsible"
            defaultOpen={item.isActive}
            key={item.title}
          >
            <SidebarMenuItem>
              <CollapsibleTrigger asChild>
                <SidebarMenuButton tooltip={item.title}>
                  {item.icon ? <item.icon aria-hidden="true" /> : null}
                  <span>{item.title}</span>
                  <ChevronRightIcon
                    aria-hidden="true"
                    className="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                  />
                </SidebarMenuButton>
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items?.map((subItem) => (
                    <SidebarMenuSubItem key={subItem.title}>
                      <SidebarMenuSubButton asChild>
                        <a href={subItem.url}>
                          <span>{subItem.title}</span>
                        </a>
                      </SidebarMenuSubButton>
                    </SidebarMenuSubItem>
                  ))}
                </SidebarMenuSub>
              </CollapsibleContent>
            </SidebarMenuItem>
          </Collapsible>
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}

function NavProjects({
  projects,
}: {
  projects: {
    name: string;
    url: string;
    icon: React.ElementType;
  }[];
}) {
  const { isMobile } = useSidebar();

  return (
    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
      <SidebarGroupLabel>Projects</SidebarGroupLabel>
      <SidebarMenu>
        {projects.map((item) => (
          <SidebarMenuItem key={item.name}>
            <SidebarMenuButton asChild>
              <a href={item.url}>
                <item.icon aria-hidden="true" />
                <span>{item.name}</span>
              </a>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <SidebarMenuAction showOnHover>
                  <MoreHorizontalIcon aria-hidden="true" />
                  <span className="sr-only">More</span>
                </SidebarMenuAction>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align={isMobile ? "end" : "start"}
                className="w-48 rounded-lg"
                side={isMobile ? "bottom" : "right"}
              >
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <FolderIcon
                      aria-hidden="true"
                      className="text-muted-foreground"
                    />
                    <span>View Project</span>
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <ForwardIcon
                      aria-hidden="true"
                      className="text-muted-foreground"
                    />
                    <span>Share Project</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <Trash2Icon
                      aria-hidden="true"
                      className="text-muted-foreground"
                    />
                    <span>Delete Project</span>
                  </DropdownMenuItem>
                </DropdownMenuGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </SidebarMenuItem>
        ))}
        <SidebarMenuItem>
          <SidebarMenuButton className="text-sidebar-foreground/70">
            <MoreHorizontalIcon
              aria-hidden="true"
              className="text-sidebar-foreground/70"
            />
            <span>More</span>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarGroup>
  );
}

function NavUser({
  user,
}: {
  user: {
    name: string;
    email: string;
    avatar: string;
  };
}) {
  const { isMobile } = useSidebar();

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
              size="lg"
            >
              <Avatar className="size-8 rounded-lg">
                <AvatarImage alt={user.name} src={user.avatar} />
                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
              </Avatar>
              <div className="grid flex-1 text-start text-sm leading-tight">
                <span className="truncate font-medium">{user.name}</span>
                <span className="truncate text-xs">{user.email}</span>
              </div>
              <ChevronsUpDownIcon
                aria-hidden="true"
                className="ms-auto size-4"
              />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            align="end"
            className="min-w-56 rounded-lg"
            side={isMobile ? "bottom" : "right"}
            sideOffset={4}
          >
            <DropdownMenuGroup>
              <DropdownMenuGroupLabel className="p-0 font-normal">
                <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
                  <Avatar className="size-8 rounded-lg">
                    <AvatarImage alt={user.name} src={user.avatar} />
                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
                  </Avatar>
                  <div className="grid flex-1 text-start text-sm leading-tight">
                    <span className="truncate font-medium">{user.name}</span>
                    <span className="truncate text-xs">{user.email}</span>
                  </div>
                </div>
              </DropdownMenuGroupLabel>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <SparklesIcon aria-hidden="true" />
                Upgrade to Pro
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <BadgeCheckIcon aria-hidden="true" />
                Account
              </DropdownMenuItem>
              <DropdownMenuItem>
                <CreditCardIcon aria-hidden="true" />
                Billing
              </DropdownMenuItem>
              <DropdownMenuItem>
                <BellIcon aria-hidden="true" />
                Notifications
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <LogOutIcon aria-hidden="true" />
                Log out
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}

const SidebarDemo = ({ ...props }: React.ComponentProps<typeof Sidebar>) => (
  <div className="relative h-[400px] w-full overflow-hidden rounded-xl border">
    <SidebarProvider className="h-full min-h-0 overflow-hidden">
      <Sidebar className="absolute" collapsible="icon" {...props}>
        <SidebarHeader>
          <TeamSwitcher teams={data.teams} />
        </SidebarHeader>
        <SidebarContent>
          <NavMain items={data.navMain} />
          <NavProjects projects={data.projects} />
        </SidebarContent>
        <SidebarFooter>
          <NavUser user={data.user} />
        </SidebarFooter>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ms-1" />
          </div>
        </header>
      </SidebarInset>
    </SidebarProvider>
  </div>
);

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.
Arrow Down: Move down.
Arrow Up: Move up.
Arrow Left: Move left.
Arrow Right: Move right.
Home: Go to the start.
End: Go to the end.

Demos

Rtl

Arabic labels, dir set to rtl on the frame, and the rail on the right so it leads the line. collapsible is icon and variant is floating, with the team mark, groups, projects, and account menu from the main shell. Menus open toward the page. Set direction on those portaled menus too, or a dropdown stays left to right, and keep an accessible name on each icon.

PreviewCode

FAQ

How do I control whether a Sidebar is open in React?

Wrap the layout in SidebarProvider, then render Sidebar beside SidebarInset. The desktop sidebar starts open, so keep a boolean in state only when something else must open or close it. Pass open and defaultOpen on SidebarProvider. onOpenChange receives the next boolean, and useSidebar throws if you call it outside the provider.

How do I collapse a Sidebar to icons or off the screen?

Set collapsible on Sidebar. offcanvas, the default, slides it off the screen, icon shrinks it to icons, which the usage example does, and none keeps it open. variant is sidebar, floating, or inset, and it changes the chrome around that rail. data-state is expanded or collapsed.

How do I put a Sidebar on the right with Radix UI?

The sidebar sits on the left by default, so move it to the other edge without swapping the document direction. The Rtl demo is a separate case, for right-to-left text. Set side on Sidebar. inline-start, the default, and inline-end follow the reading direction, so the rail leads the line in right-to-left text too; left and right are the screen's edges whatever the direction, as in shadcn/ui.

What happens to a Sidebar on a narrow screen?

On a narrow viewport the sidebar opens as a Sheet instead of pushing the layout. useSidebar returns isMobile, plus open, toggleSidebar, and state, which is expanded or collapsed. Call it only under SidebarProvider. SidebarTrigger calls toggleSidebar, so the same button works on both layouts.

How do I toggle a Sidebar from the keyboard, and does it persist?

Command or Ctrl, plus B, toggles the sidebar. The desktop open state is written to a cookie named sidebar_state, but the component does not read that cookie back. Pass defaultOpen yourself if the next load should match. The shortcut stays on, and the cookie is written whenever the desktop state changes, with no prop to turn either one off.

How do I mark the current Sidebar link?

Set isActive on the current SidebarMenuButton. That sets data-active, so the row uses the sidebar accent tokens. Pass tooltip with the item name. The tooltip shows while the sidebar is collapsed to icons, and it stays hidden when the sidebar is expanded or on a phone.

How do I change the Sidebar width and colors?

The provider sets the CSS variables --sidebar-width and --sidebar-width-icon. Override those variables to resize the rail and the icon rail. Colors use the sidebar background, foreground, and accent tokens. Edit the sidebar file under components/ui for structure, and keep data-state and data-collapsible working, because the layout depends on them.

How do I install Sidebar in React?

Run the command in the Installation section above. It adds Sidebar and its parts to your ui folder. Import from that folder when the command finishes, instead of copying the source by hand, and rerun the command later if you want the latest files. The command uses the shadcn CLI.

API Reference

Sidebar

<div>

PropType

collapsible?"offcanvas" | "icon" | "none"

How it collapses: offcanvas slides it out, icon shrinks it to its * icons, none keeps it open.

Type: "offcanvas" | "icon" | "none"
Default: "offcanvas"

side?"inline-start" | "inline-end" | "left" | "right"

The edge it's on: inline-start (the default) and inline-end follow the reading direction; left and right are the screen's edges, as in shadcn/ui.

Type: "inline-start" | "inline-end" | "left" | "right"
Default: "inline-start"

variant?"sidebar" | "floating" | "inset"

The visual style.

Type: "sidebar" | "floating" | "inset"
Default: "sidebar"

className?string

Merged with the part's classes.

CSS variableType

--sidebar-widthstring

--sidebar-width-iconstring

SidebarContent

<div> data-slot="sidebar-content"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"content"

Default: "content"

SidebarFooter

<div> data-slot="sidebar-footer"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"footer"

Default: "footer"

SidebarGroup

<div> data-slot="sidebar-group"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group"

Default: "group"

SidebarGroupAction

data-slot="sidebar-group-action"

PropType

asChild?boolean

Merge props onto the child element instead of rendering a host.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group-action"

Default: "group-action"

SidebarGroupContent

<div> data-slot="sidebar-group-content"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group-content"

Default: "group-content"

SidebarGroupLabel

data-slot="sidebar-group-label"

PropType

asChild?boolean

Merge props onto the child element instead of rendering a host.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group-label"

Default: "group-label"

SidebarHeader

<div> data-slot="sidebar-header"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"header"

Default: "header"

SidebarInput

data-slot="sidebar-input"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"input"

Default: "input"

SidebarInset

<main> data-slot="sidebar-inset"

PropType

className?string

Merged with the part's classes.

SidebarMenu

<ul> data-slot="sidebar-menu"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu"

Default: "menu"

SidebarMenuAction

data-slot="sidebar-menu-action"

PropType

showOnHover?boolean

Hides the action until its menu item is hovered or focused, or its menu is * open. Always shown below md.

Default: false

asChild?boolean

Merge props onto the child element instead of rendering a host.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-action"

Default: "menu-action"

SidebarMenuBadge

<div> data-slot="sidebar-menu-badge"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-badge"

Default: "menu-badge"

SidebarMenuButton

data-slot="sidebar-menu-button"

PropType

isActive?boolean

Whether the button is the current page: highlighted, and data-active.

Default: false

size?"default" | "lg" | "sm"

The size.

Type: "default" | "lg" | "sm"
Default: "default"

tooltip?string | React.ComponentProps<typeof TooltipContent>

The tooltip it shows while the sidebar is collapsed to icons: its text, or * the tooltip's props.

Type: string | React.ComponentProps<typeof TooltipContent>

variant?"default" | "outline"

The visual style.

Type: "default" | "outline"
Default: "default"

asChild?boolean

Merge props onto the child element instead of rendering a host.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-active?string

Mirrors isActive.

data-sidebar"menu-button"

Default: "menu-button"

data-size?string

Mirrors size.

SidebarMenuItem

<li> data-slot="sidebar-menu-item"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-item"

Default: "menu-item"

SidebarMenuSkeleton

<div> data-slot="sidebar-menu-skeleton"

PropType

showIcon?boolean

Draws an icon placeholder before the text line.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-skeleton"

Default: "menu-skeleton"

CSS variableType

--skeleton-widthstring

SidebarMenuSub

<ul> data-slot="sidebar-menu-sub"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-sub"

Default: "menu-sub"

SidebarMenuSubButton

data-slot="sidebar-menu-sub-button"

PropType

isActive?boolean

Whether the button is the current page: highlighted, and data-active.

Default: false

size?"sm" | "md"

The size.

Type: "sm" | "md"
Default: "md"

asChild?boolean

Merge props onto the child element instead of rendering a host.

Default: false

className?string

Merged with the part's classes.

AttributeType

data-active?string

Mirrors isActive.

data-sidebar"menu-sub-button"

Default: "menu-sub-button"

data-size?string

Mirrors size.

SidebarMenuSubItem

<li> data-slot="sidebar-menu-sub-item"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-sub-item"

Default: "menu-sub-item"

SidebarProvider

PropType

open?boolean

Whether it's open. Pair with onOpenChange to control it.

defaultOpen?boolean

Whether it starts open, when you don't control open.

Default: true

onOpenChange?(open: boolean) → void

Called when it opens or closes.

Parameters: open – boolean
Returns: void

persist?boolean

Persist the desktop open state to a cookie. * * @default true.

Default: true

shortcut?boolean

Toggle the sidebar with ⌘B / Ctrl+B. * * @default true.

Default: true

className?string

Merged with the part's classes.

SidebarRail

<button> data-slot="sidebar-rail"

PropType

className?string

Merged with the part's classes.

AttributeType

data-sidebar"rail"

Default: "rail"

SidebarSeparator

data-slot="sidebar-separator"

PropType

decorative?boolean

Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that the rendered element is removed from the accessibility tree.

orientation?"horizontal" | "vertical"

Either vertical or horizontal. Defaults to horizontal.

Type: "horizontal" | "vertical"

asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AttributeType

data-sidebar"separator"

Default: "separator"

SidebarTrigger

data-slot="sidebar-trigger"

PropType

clickEffect?boolean

Apply a click effect to the button.

Default: true

isLoading?boolean

Show a loading indicator.

Default: false

pill?boolean

Fully rounded corners.

Default: false

size?"default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"

The size.

Type: "default" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "md" | "sm" | "xl" | "xs"
Default: "md"

The visual style.

Type: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary"
Default: "default"

asChild?boolean

Merge props onto the child element instead of rendering a host.

className?string

Merged with the part's classes.

AttributeType

data-sidebar"trigger"

Default: "trigger"

useSidebar

With other components

All 174 components

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Installation

Anatomy

Usage

Accessibility

Demos

Rtl

FAQ

How do I control whether a Sidebar is open in React?

How do I collapse a Sidebar to icons or off the screen?

How do I put a Sidebar on the right with Radix UI?

What happens to a Sidebar on a narrow screen?

How do I toggle a Sidebar from the keyboard, and does it persist?

How do I mark the current Sidebar link?

How do I change the Sidebar width and colors?

How do I install Sidebar in React?

API Reference

Sidebar

SidebarContent

SidebarFooter

SidebarGroup

SidebarGroupAction

SidebarGroupContent

SidebarGroupLabel

SidebarHeader

SidebarInput

SidebarInset

SidebarMenu

SidebarMenuAction

SidebarMenuBadge

SidebarMenuButton

SidebarMenuItem

SidebarMenuSkeleton

SidebarMenuSub

SidebarMenuSubButton

SidebarMenuSubItem

SidebarProvider

SidebarRail

SidebarSeparator

SidebarTrigger

useSidebar

With other components

Related