shadcn.io is not affiliated with official shadcn/ui

Components

Free

Sidebar for React

Grouped navigation in a collapsible rail beside the page, with a team switcher and an account menu. For React with Base UI, when those links should stay put on a wide screen.

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, Base 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: "m@example.com",
    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
            render={
              <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" />
          </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
            className="group/collapsible"
            defaultOpen={item.isActive}
            key={item.title}
          >
            <SidebarMenuItem>
              <CollapsibleTrigger
                render={<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"
                />
              </CollapsibleTrigger>
              <CollapsibleContent>
                <SidebarMenuSub>
                  {item.items?.map((subItem) => (
                    <SidebarMenuSubItem key={subItem.title}>
                      <SidebarMenuSubButton render={<a href={subItem.url} />}>
                        <span>{subItem.title}</span>
                      </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 render={<a href={item.url} />}>
              <item.icon aria-hidden="true" />
              <span>{item.name}</span>
            </SidebarMenuButton>
            <DropdownMenu>
              <DropdownMenuTrigger render={<SidebarMenuAction showOnHover />}>
                <MoreHorizontalIcon aria-hidden="true" />
                <span className="sr-only">More</span>
              </DropdownMenuTrigger>
              <DropdownMenuContent
                align={isMobile ? "end" : "start"}
                className="w-48 rounded-lg"
                side={isMobile ? "bottom" : "right"}
              >
                <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>
                <DropdownMenuSeparator />
                <DropdownMenuItem>
                  <Trash2Icon
                    aria-hidden="true"
                    className="text-muted-foreground"
                  />
                  <span>Delete Project</span>
                </DropdownMenuItem>
              </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
            render={
              <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" />
          </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 Base 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 to right on Sidebar. side left is the default.

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?"left" | "right"

The screen edge it's on: left or right.

Type: "left" | "right"
Default: "left"

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

The visual style.

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

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

Default: "cn-sidebar-inner flex size-full flex-col"

CSS variableType

--sidebar-widthstring

--sidebar-width-iconstring

SidebarContent

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"content"

Default: "content"

SidebarFooter

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"footer"

Default: "footer"

SidebarGroup

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group"

Default: "group"

SidebarGroupAction

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarGroupContent

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"group-content"

Default: "group-content"

SidebarGroupLabel

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarHeader

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"header"

Default: "header"

SidebarInput

data-slot="sidebar-input"

PropType

value?React.ComponentProps<"input">["value"]

The value of the input. Use when controlled.

Type: React.ComponentProps<"input">["value"]

defaultValue?Field.Control.Props["defaultValue"]

The default value of the input. Use when uncontrolled.

Type: Field.Control.Props["defaultValue"]

onValueChange?(value: string, eventDetails: Input.ChangeEventDetails) → void

Callback fired when the value changes. Use when controlled.

Type

(value: string, eventDetails: Input.ChangeEventDetails) → void

Parameters

value – string

eventDetails – Input.ChangeEventDetails

Returns

void

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"input"

Default: "input"

SidebarInset

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarMenu

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu"

Default: "menu"

SidebarMenuAction

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

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarMenuBadge

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-badge"

Default: "menu-badge"

SidebarMenuButton

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"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarMenuItem

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

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

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

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

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"menu-sub"

Default: "menu-sub"

SidebarMenuSubButton

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"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarMenuSubItem

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

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

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

SidebarRail

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

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"rail"

Default: "rail"

SidebarSeparator

data-slot="sidebar-separator"

PropType

orientation?"horizontal" | "vertical"

The orientation of the separator.

Type: "horizontal" | "vertical"
Default: "horizontal"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

AttributeType

data-sidebar"separator"

Default: "separator"

SidebarTrigger

PropType

clickEffect?boolean

Apply a click effect to the button.

Default: true

focusableWhenDisabled?boolean

Whether the button should be focusable when disabled.

Default: false

isLoading?boolean

Show a loading indicator.

Default: false

nativeButton?boolean

Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (for example, <div>).

Default: true

pill?boolean

Fully rounded corners.

Default: false

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

The size.

Type: "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"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

className?string

Merged with the part's classes.

useSidebar

With other components

Free
Dropdown Menu
Menus
Workspace switcher
Free
Collapsible
Disclosure
Nested nav group
Free
Breadcrumb
Navigation
Next to the trigger
Free
Tooltip
Overlays
Labels in icon mode
Free
Separator
Layout
Split header and list
Free
Button
Buttons
The trigger is one

Free
Sheet
Overlays
Mobile already is this
Free
Navigation Menu
Navigation
Top header instead
Free
Menubar
Menus
File Edit View
Free
Drawer
Overlays
Thumb-first panel
Free
Resizable
Layout
Drag to change width
Free
Command
Overlays
Search the same routes

All 105 components

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 Base 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