# Sidebar

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import BellIcon from "@tabler/icons/outline/bell.svg";
import BookOpenIcon from "@tabler/icons/outline/book.svg";
import ChartPieIcon from "@tabler/icons/outline/chart-pie.svg";
import ChevronRightIcon from "@tabler/icons/outline/chevron-right.svg";
import ChevronUpIcon from "@tabler/icons/outline/chevron-up.svg";
import CodeIcon from "@tabler/icons/outline/code.svg";
import CreditCardIcon from "@tabler/icons/outline/credit-card.svg";
import FrameIcon from "@tabler/icons/outline/frame.svg";
import LogoutIcon from "@tabler/icons/outline/logout.svg";
import MapIcon from "@tabler/icons/outline/map.svg";
import BotIcon from "@tabler/icons/outline/robot.svg";
import BadgeCheckIcon from "@tabler/icons/outline/rosette-discount-check.svg";
import Settings2Icon from "@tabler/icons/outline/settings-2.svg";
import SparklesIcon from "@tabler/icons/outline/sparkles.svg";
import TerminalIcon from "@tabler/icons/outline/terminal-2.svg";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const navMain = [
  {
    title: "Playground",
    url: "#",
    icon: TerminalIcon,
    isActive: true,
    items: [
      { title: "History", url: "#" },
      { title: "Starred", url: "#" },
      { title: "Settings", url: "#" },
    ],
  },
  {
    title: "Models",
    url: "#",
    icon: BotIcon,
    items: [
      { title: "Genesis", url: "#" },
      { title: "Explorer", url: "#" },
      { title: "Quantum", url: "#" },
    ],
  },
  {
    title: "Documentation",
    url: "#",
    icon: BookOpenIcon,
    items: [
      { title: "Introduction", url: "#" },
      { title: "Get Started", url: "#" },
      { title: "Tutorials", url: "#" },
      { title: "Changelog", url: "#" },
    ],
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings2Icon,
    items: [
      { title: "General", url: "#" },
      { title: "Team", url: "#" },
      { title: "Billing", url: "#" },
      { title: "Limits", url: "#" },
    ],
  },
];

const projects = [
  { name: "Design Engineering", url: "#", icon: FrameIcon },
  { name: "Sales & Marketing", url: "#", icon: ChartPieIcon },
  { name: "Travel", url: "#", icon: MapIcon },
];
---

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg">
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
            >
              <CodeIcon class="size-5" />
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-semibold">Starwind UI</span>
              <span class="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>

    <SidebarSeparator />

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            {
              navMain.map((item) => (
                <Collapsible defaultOpen={item.isActive} class="group/collapsible">
                  <SidebarMenuItem>
                    <CollapsibleTrigger asChild>
                      <SidebarMenuButton tooltip={item.title}>
                        <item.icon />
                        <span>{item.title}</span>
                        <ChevronRightIcon class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                      </SidebarMenuButton>
                    </CollapsibleTrigger>
                    {item.items && (
                      <CollapsibleContent>
                        <SidebarMenuSub>
                          {item.items.map((subItem) => (
                            <SidebarMenuSubItem>
                              <SidebarMenuSubButton href={subItem.url}>
                                <span>{subItem.title}</span>
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          ))}
                        </SidebarMenuSub>
                      </CollapsibleContent>
                    )}
                  </SidebarMenuItem>
                </Collapsible>
              ))
            }
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>

      <SidebarGroup class="group-data-[collapsible=icon]:hidden">
        <SidebarGroupLabel>Projects</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            {
              projects.map((project) => (
                <SidebarMenuItem>
                  <SidebarMenuButton href={project.url} tooltip={project.name}>
                    <project.icon />
                    <span>{project.name}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))
            }
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>

    <SidebarFooter>
      <SidebarMenu>
        <SidebarMenuItem>
          <Dropdown>
            <DropdownTrigger asChild>
              <SidebarMenuButton size="lg">
                <Avatar class="size-10 shrink-0 rounded-lg">
                  <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                  <AvatarFallback class="rounded-lg">B3</AvatarFallback>
                </Avatar>
                <div class="grid flex-1 text-left text-sm leading-tight">
                  <span class="truncate font-semibold">Boston343</span>
                  <span class="text-sidebar-foreground/70 truncate text-xs">@boston343</span>
                </div>
                <ChevronUpIcon class="ml-auto size-4" />
              </SidebarMenuButton>
            </DropdownTrigger>
            <DropdownContent class="min-w-48" side="right">
              <DropdownLabel class="p-0 font-normal">
                <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                  <Avatar class="size-8 rounded-lg">
                    <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                    <AvatarFallback class="rounded-lg">B3</AvatarFallback>
                  </Avatar>
                  <div class="grid flex-1 text-left text-sm leading-tight">
                    <span class="truncate font-semibold">boston343</span>
                    <span class="text-muted-foreground truncate text-xs">@boston343</span>
                  </div>
                </div>
              </DropdownLabel>
              <DropdownSeparator />
              <DropdownItem>
                <SparklesIcon class="mr-2 size-4" />
                Upgrade to Pro
              </DropdownItem>
              <DropdownSeparator />
              <DropdownItem>
                <BadgeCheckIcon class="mr-2 size-4" />
                Account
              </DropdownItem>
              <DropdownItem>
                <CreditCardIcon class="mr-2 size-4" />
                Billing
              </DropdownItem>
              <DropdownItem>
                <BellIcon class="mr-2 size-4" />
                Notifications
              </DropdownItem>
              <DropdownSeparator />
              <DropdownItem>
                <LogoutIcon class="mr-2 size-4" />
                Log out
              </DropdownItem>
            </DropdownContent>
          </Dropdown>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarFooter>

    <SidebarRail />
  </Sidebar>

  <main class="bg-background flex flex-1 flex-col">
    <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
      <SidebarTrigger />
      <span class="text-muted-foreground text-sm">Main Content</span>
    </header>
    <div class="flex-1 p-6">
      <p class="text-muted-foreground text-sm">
        Use <kbd class="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
        the sidebar <br /> after clicking in this window.
      </p>
    </div>
  </main>
</SidebarProvider>
```
  </div>
  <div slot="react">
```tsx
import {
  IconBell as BellIcon,
  IconBook as BookOpenIcon,
  IconChartPie as ChartPieIcon,
  IconChevronRight as ChevronRightIcon,
  IconChevronUp as ChevronUpIcon,
  IconCode as CodeIcon,
  IconCreditCard as CreditCardIcon,
  IconFrame as FrameIcon,
  IconLogout as LogoutIcon,
  IconMap as MapIcon,
  IconRobot as BotIcon,
  IconRosetteDiscountCheck as BadgeCheckIcon,
  IconSettings2 as Settings2Icon,
  IconSparkles as SparklesIcon,
  IconTerminal2 as TerminalIcon,
} from "@tabler/icons-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const navMain = [
  {
    title: "Playground",
    url: "#",
    Icon: TerminalIcon,
    isActive: true,
    items: [
      { title: "History", url: "#" },
      { title: "Starred", url: "#" },
      { title: "Settings", url: "#" },
    ],
  },
  {
    title: "Models",
    url: "#",
    Icon: BotIcon,
    items: [
      { title: "Genesis", url: "#" },
      { title: "Explorer", url: "#" },
      { title: "Quantum", url: "#" },
    ],
  },
  {
    title: "Documentation",
    url: "#",
    Icon: BookOpenIcon,
    items: [
      { title: "Introduction", url: "#" },
      { title: "Get Started", url: "#" },
      { title: "Tutorials", url: "#" },
      { title: "Changelog", url: "#" },
    ],
  },
  {
    title: "Settings",
    url: "#",
    Icon: Settings2Icon,
    items: [
      { title: "General", url: "#" },
      { title: "Team", url: "#" },
      { title: "Billing", url: "#" },
      { title: "Limits", url: "#" },
    ],
  },
];

const projects = [
  { name: "Design Engineering", url: "#", Icon: FrameIcon },
  { name: "Sales & Marketing", url: "#", Icon: ChartPieIcon },
  { name: "Travel", url: "#", Icon: MapIcon },
];

export function Example() {
  return (
    <>
      <SidebarProvider>
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton size="lg">
                      <div
                        className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
                      >
                    <CodeIcon className="size-5" />
                  </div>
                  <div className="grid flex-1 text-left text-sm leading-tight">
                    <span className="truncate font-semibold">Starwind UI</span>
                    <span className="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
                  </div>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarHeader>

          <SidebarSeparator />

          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Platform</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
  {
                        navMain.map((item) => (
                    <Collapsible
                      key={`${item.url}-${item.title}`}
                      defaultOpen={item.isActive}
                      className="group/collapsible"
                    >
                      <SidebarMenuItem>
                        <CollapsibleTrigger asChild>
                          <SidebarMenuButton tooltip={item.title}>
                            <item.Icon />
                            <span>{item.title}</span>
                            <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                          </SidebarMenuButton>
                        </CollapsibleTrigger>
                        {item.items && (
                          <CollapsibleContent>
                            <SidebarMenuSub>
                              {item.items.map((subItem) => (
                                <SidebarMenuSubItem key={`${subItem.url}-${subItem.title}`}>
                                  <SidebarMenuSubButton href={subItem.url}>
                                    <span>{subItem.title}</span>
                                  </SidebarMenuSubButton>
                                </SidebarMenuSubItem>
                              ))}
                            </SidebarMenuSub>
                          </CollapsibleContent>
                        )}
                      </SidebarMenuItem>
                    </Collapsible>
                        ))
}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            <SidebarGroup className="group-data-[collapsible=icon]:hidden">
              <SidebarGroupLabel>Projects</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
  {
                        projects.map((project) => (
                    <SidebarMenuItem key={`${project.url}-${project.name}`}>
                      <SidebarMenuButton href={project.url} tooltip={project.name}>
                        <project.Icon />
                        <span>{project.name}</span>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                        ))
}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>

          <SidebarFooter>
            <SidebarMenu>
              <SidebarMenuItem>
                <Dropdown>
                  <DropdownTrigger asChild>
                    <SidebarMenuButton size="lg">
                      <Avatar className="size-10 shrink-0 rounded-lg">
                        <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                        <AvatarFallback className="rounded-lg">B3</AvatarFallback>
                      </Avatar>
                      <div className="grid flex-1 text-left text-sm leading-tight">
                        <span className="truncate font-semibold">Boston343</span>
                        <span className="text-sidebar-foreground/70 truncate text-xs">@boston343</span>
                      </div>
                      <ChevronUpIcon className="ml-auto size-4" />
                    </SidebarMenuButton>
                  </DropdownTrigger>
                  <DropdownContent className="min-w-48" side="right">
                    <DropdownLabel className="p-0 font-normal">
                      <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                        <Avatar className="size-8 rounded-lg">
                          <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                          <AvatarFallback className="rounded-lg">B3</AvatarFallback>
                        </Avatar>
                        <div className="grid flex-1 text-left text-sm leading-tight">
                          <span className="truncate font-semibold">boston343</span>
                          <span className="text-muted-foreground truncate text-xs">@boston343</span>
                        </div>
                      </div>
                    </DropdownLabel>
                    <DropdownSeparator />
                    <DropdownItem>
                      <SparklesIcon className="mr-2 size-4" />
                      Upgrade to Pro
                    </DropdownItem>
                    <DropdownSeparator />
                    <DropdownItem>
                      <BadgeCheckIcon className="mr-2 size-4" />
                      Account
                    </DropdownItem>
                    <DropdownItem>
                      <CreditCardIcon className="mr-2 size-4" />
                      Billing
                    </DropdownItem>
                    <DropdownItem>
                      <BellIcon className="mr-2 size-4" />
                      Notifications
                    </DropdownItem>
                    <DropdownSeparator />
                    <DropdownItem>
                      <LogoutIcon className="mr-2 size-4" />
                      Log out
                    </DropdownItem>
                  </DropdownContent>
                </Dropdown>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarFooter>

          <SidebarRail />
        </Sidebar>

        <main className="bg-background flex flex-1 flex-col">
          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
            <SidebarTrigger />
            <span className="text-muted-foreground text-sm">Main Content</span>
          </header>
          <div className="flex-1 p-6">
            <p className="text-muted-foreground text-sm">
                  Use <kbd className="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
                  the sidebar <br /> after clicking in this window.
            </p>
              </div>
        </main>
      </SidebarProvider>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { IconBell as BellIcon } from "@tabler/icons-vue";
import { IconBook as BookOpenIcon } from "@tabler/icons-vue";
import { IconChartPie as ChartPieIcon } from "@tabler/icons-vue";
import { IconChevronRight as ChevronRightIcon } from "@tabler/icons-vue";
import { IconChevronUp as ChevronUpIcon } from "@tabler/icons-vue";
import { IconCode as CodeIcon } from "@tabler/icons-vue";
import { IconCreditCard as CreditCardIcon } from "@tabler/icons-vue";
import { IconFrame as FrameIcon } from "@tabler/icons-vue";
import { IconLogout as LogoutIcon } from "@tabler/icons-vue";
import { IconMap as MapIcon } from "@tabler/icons-vue";
import { IconRobot as BotIcon } from "@tabler/icons-vue";
import { IconRosetteDiscountCheck as BadgeCheckIcon } from "@tabler/icons-vue";
import { IconSettings2 as Settings2Icon } from "@tabler/icons-vue";
import { IconSparkles as SparklesIcon } from "@tabler/icons-vue";
import { IconTerminal2 as TerminalIcon } from "@tabler/icons-vue";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/starwind/collapsible";
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownTrigger,
} from "@/components/starwind/dropdown";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const navMain = [
  {
    title: "Playground",
    url: "#",
    icon: TerminalIcon,
    isActive: true,
    items: [
      { title: "History", url: "#" },
      { title: "Starred", url: "#" },
      { title: "Settings", url: "#" },
    ],
  },
  {
    title: "Models",
    url: "#",
    icon: BotIcon,
    items: [
      { title: "Genesis", url: "#" },
      { title: "Explorer", url: "#" },
      { title: "Quantum", url: "#" },
    ],
  },
  {
    title: "Documentation",
    url: "#",
    icon: BookOpenIcon,
    items: [
      { title: "Introduction", url: "#" },
      { title: "Get Started", url: "#" },
      { title: "Tutorials", url: "#" },
      { title: "Changelog", url: "#" },
    ],
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings2Icon,
    items: [
      { title: "General", url: "#" },
      { title: "Team", url: "#" },
      { title: "Billing", url: "#" },
      { title: "Limits", url: "#" },
    ],
  },
];

const projects = [
  { name: "Design Engineering", url: "#", icon: FrameIcon },
  { name: "Sales & Marketing", url: "#", icon: ChartPieIcon },
  { name: "Travel", url: "#", icon: MapIcon },
];
</script>

<template>
  <SidebarProvider>
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg">
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
              >
                <CodeIcon class="size-5" />
              </div>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">Starwind UI</span>
                <span class="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarSeparator />

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <template v-for="item in navMain" :key="item.title">
                <Collapsible :defaultOpen="item.isActive" class="group/collapsible">
                  <SidebarMenuItem>
                    <CollapsibleTrigger asChild>
                      <SidebarMenuButton :tooltip="item.title">
                        <component :is="item.icon" />
                        <span>{{ item.title }}</span>
                        <ChevronRightIcon
                          class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
                        />
                      </SidebarMenuButton>
                    </CollapsibleTrigger>
                    <template v-if="item.items">
                      <CollapsibleContent>
                        <SidebarMenuSub>
                          <template v-for="subItem in item.items" :key="subItem.title">
                            <SidebarMenuSubItem>
                              <SidebarMenuSubButton :href="subItem.url">
                                <span>{{ subItem.title }}</span>
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          </template>
                        </SidebarMenuSub>
                      </CollapsibleContent>
                    </template>
                  </SidebarMenuItem>
                </Collapsible>
              </template>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup class="group-data-[collapsible=icon]:hidden">
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <template v-for="project in projects" :key="project.name">
                <SidebarMenuItem>
                  <SidebarMenuButton :href="project.url" :tooltip="project.name">
                    <component :is="project.icon" />
                    <span>{{ project.name }}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </template>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem>
            <Dropdown>
              <DropdownTrigger asChild>
                <SidebarMenuButton size="lg">
                  <Avatar class="size-10 shrink-0 rounded-lg">
                    <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                    <AvatarFallback class="rounded-lg">B3</AvatarFallback>
                  </Avatar>
                  <div class="grid flex-1 text-left text-sm leading-tight">
                    <span class="truncate font-semibold">Boston343</span>
                    <span class="text-sidebar-foreground/70 truncate text-xs">@boston343</span>
                  </div>
                  <ChevronUpIcon class="ml-auto size-4" />
                </SidebarMenuButton>
              </DropdownTrigger>
              <DropdownContent class="min-w-48" side="right">
                <DropdownLabel class="p-0 font-normal">
                  <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                    <Avatar class="size-8 rounded-lg">
                      <AvatarImage src="https://github.com/boston343.png" alt="boston343" />
                      <AvatarFallback class="rounded-lg">B3</AvatarFallback>
                    </Avatar>
                    <div class="grid flex-1 text-left text-sm leading-tight">
                      <span class="truncate font-semibold">boston343</span>
                      <span class="text-muted-foreground truncate text-xs">@boston343</span>
                    </div>
                  </div>
                </DropdownLabel>
                <DropdownSeparator />
                <DropdownItem>
                  <SparklesIcon class="mr-2 size-4" />
                  Upgrade to Pro
                </DropdownItem>
                <DropdownSeparator />
                <DropdownItem>
                  <BadgeCheckIcon class="mr-2 size-4" />
                  Account
                </DropdownItem>
                <DropdownItem>
                  <CreditCardIcon class="mr-2 size-4" />
                  Billing
                </DropdownItem>
                <DropdownItem>
                  <BellIcon class="mr-2 size-4" />
                  Notifications
                </DropdownItem>
                <DropdownSeparator />
                <DropdownItem>
                  <LogoutIcon class="mr-2 size-4" />
                  Log out
                </DropdownItem>
              </DropdownContent>
            </Dropdown>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>

    <main class="bg-background flex flex-1 flex-col">
      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
        <SidebarTrigger />
        <span class="text-muted-foreground text-sm">Main Content</span>
      </header>
      <div class="flex-1 p-6">
        <p class="text-muted-foreground text-sm">
          Use <kbd class="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
          the sidebar <br />
          after clicking in this window.
        </p>
      </div>
    </main>
  </SidebarProvider>
</template>
```
  </div>
</FrameworkCodeSwitcher>

Sidebars are one of the most complex components to build. They are central to any application and often contain a lot of moving parts.

The Starwind Sidebar is composable, themeable, and customizable.

> **Info:** The Starwind Sidebar is extremely similar to the shadcn/ui sidebar component.

## Installation

```bash
npx starwind@latest add sidebar --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add sidebar --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add sidebar --framework vue
```
</DocsTabsContent>
</DocsTabs>

Add the following colors to your global CSS file (usually `src/styles/starwind.css`) if they do not already exist:

> **Info:** They may not exist if you are adding the sidebar to an existing project. For new projects the `starwind init` command automatically adds this setup.

```scss  title="src/styles/starwind.css"
@theme inline {
  /* other variables... */

  --color-sidebar: var(--sidebar-background);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-outline: var(--sidebar-outline);
}

:root {
  /* other variables... */

  /* sidebar variables */
  --sidebar-background: var(--color-neutral-50);
  --sidebar-foreground: var(--color-neutral-950);
  --sidebar-primary: var(--color-blue-700);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: var(--color-neutral-100);
  --sidebar-accent-foreground: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-200);
  --sidebar-outline: var(--color-neutral-400);
}

.dark {
  /* other variables... */

  /* sidebars variables */
  --sidebar-background: var(--color-neutral-900);
  --sidebar-foreground: var(--color-neutral-50);
  --sidebar-primary: var(--color-blue-700);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: var(--color-neutral-800);
  --sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-border: var(--color-neutral-800);
  --sidebar-outline: var(--color-neutral-600);
}
```

## Usage

Wrap the sidebar and the page content with `SidebarProvider`. The trigger can live in the page
header or another control region.

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import { Sidebar, SidebarContent, SidebarProvider, SidebarTrigger } from "@/components/starwind/sidebar";
---

<SidebarProvider>
  <Sidebar>
    <SidebarContent>Navigation</SidebarContent>
  </Sidebar>
  <main>
    <SidebarTrigger />
    <slot />
  </main>
</SidebarProvider>
```
</div>
<div slot="react">
```tsx
import { Sidebar, SidebarContent, SidebarProvider, SidebarTrigger } from "@/components/starwind/sidebar";

export function Example() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>Navigation</SidebarContent>
      </Sidebar>
      <main>
        <SidebarTrigger />
        <div>Page content</div>
      </main>
    </SidebarProvider>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarContent>Navigation</SidebarContent>
    </Sidebar>
    <main>
      <SidebarTrigger />
      <slot />
    </main>
  </SidebarProvider>
</template>
```
</div>
</FrameworkCodeSwitcher>

## Composition

A Sidebar layout starts with `SidebarProvider`. Add only the groups, menus, actions, and supporting
parts that the application needs.

```text
SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       ├── SidebarGroupAction
│   │       └── SidebarGroupContent
│   │           └── SidebarMenu
│   │               └── SidebarMenuItem
│   │                   ├── SidebarMenuButton
│   │                   ├── SidebarMenuAction
│   │                   ├── SidebarMenuBadge
│   │                   └── SidebarMenuSub
│   │                       └── SidebarMenuSubItem
│   │                           └── SidebarMenuSubButton
│   ├── SidebarFooter
│   └── SidebarRail
├── SidebarInset
└── SidebarTrigger
```

<Image src={SidebarStructureImage} alt="Sidebar Structure" />

## Basic Layout

Wrap your application with `SidebarProvider` and place `Sidebar` alongside your main content:

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import {
  Sidebar,
  SidebarContent,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";
import AppSidebar from "@/components/app-sidebar.astro";
---

<SidebarProvider>
  <AppSidebar />
  <main>
    <SidebarTrigger />
    <slot />
  </main>
</SidebarProvider>
```
</div>
<div slot="react">
```tsx
import type { ReactNode } from "react";
import {
  Sidebar,
  SidebarContent,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";
import { AppSidebar } from "@/components/app-sidebar";

export function Example({ children }: { children: ReactNode }) {
  return (
    <>
      <SidebarProvider>
        <AppSidebar />
        <main>
          <SidebarTrigger />
          {children}
        </main>
      </SidebarProvider>
    </>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar><SidebarContent>Navigation</SidebarContent></Sidebar>
    <main>
      <SidebarTrigger />
      <slot />
    </main>
  </SidebarProvider>
</template>
```
</div>
</FrameworkCodeSwitcher>

## Creating a Sidebar Component

<FrameworkCodeSwitcher>
<div slot="astro">
```astro title="src/components/app-sidebar.astro"
---
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "@/components/starwind/sidebar";
---

<Sidebar>
  <SidebarHeader />
  <SidebarContent>
    <SidebarGroup />
    <SidebarGroup />
  </SidebarContent>
  <SidebarFooter />
</Sidebar>
```
</div>
<div slot="react">
```tsx title="src/components/app-sidebar.tsx"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "@/components/starwind/sidebar";

export function AppSidebar() {
  return (
    <>
      <Sidebar>
        <SidebarHeader />
        <SidebarContent>
          <SidebarGroup />
          <SidebarGroup />
        </SidebarContent>
        <SidebarFooter />
      </Sidebar>
    </>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "@/components/starwind/sidebar";
import { SidebarProvider } from "@/components/starwind/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup />
        <SidebarGroup />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  </SidebarProvider>
</template>
```
</div>
</FrameworkCodeSwitcher>

## With Menu Items

Use `SidebarMenu`, `SidebarMenuItem`, and `SidebarMenuButton` to create navigation menus.
`SidebarMenuButton` supports `sm`, `md`, and `lg` sizes and defaults to `md`:

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import CalendarIcon from "@tabler/icons/outline/calendar.svg";
import CodeIcon from "@tabler/icons/outline/code.svg";
import HomeIcon from "@tabler/icons/outline/home.svg";
import InboxIcon from "@tabler/icons/outline/inbox.svg";
import SearchIcon from "@tabler/icons/outline/search.svg";
import SettingsIcon from "@tabler/icons/outline/settings.svg";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const items = [
  { title: "Home", url: "#", icon: HomeIcon },
  { title: "Inbox", url: "#", icon: InboxIcon },
  { title: "Calendar", url: "#", icon: CalendarIcon },
  { title: "Search", url: "#", icon: SearchIcon },
  { title: "Settings", url: "#", icon: SettingsIcon },
];
---

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg">
            <div
              class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
            >
              <CodeIcon class="size-5" />
            </div>
            <div class="grid flex-1 text-left text-sm leading-tight">
              <span class="truncate font-semibold">Starwind UI</span>
              <span class="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
            </div>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>

    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Application</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            {
              items.map((item) => (
                <SidebarMenuItem>
                  <SidebarMenuButton href={item.url}>
                    <item.icon />
                    <span>{item.title}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))
            }
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>

  <main class="bg-background flex flex-1 flex-col">
    <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
      <SidebarTrigger />
      <span class="text-muted-foreground text-sm">Main Content</span>
    </header>
    <div class="flex-1 p-6">
      <p class="text-muted-foreground text-sm">
        Use <kbd class="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
        the sidebar <br /> after clicking in this window.
      </p>
    </div>
  </main>
</SidebarProvider>
```
  </div>
  <div slot="react">
```tsx
import { IconCalendar as CalendarIcon } from "@tabler/icons-react";
import { IconCode as CodeIcon } from "@tabler/icons-react";
import { IconHome as HomeIcon } from "@tabler/icons-react";
import { IconInbox as InboxIcon } from "@tabler/icons-react";
import { IconSearch as SearchIcon } from "@tabler/icons-react";
import { IconSettings as SettingsIcon } from "@tabler/icons-react";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const items = [
  { title: "Home", url: "#", Icon: HomeIcon },
  { title: "Inbox", url: "#", Icon: InboxIcon },
  { title: "Calendar", url: "#", Icon: CalendarIcon },
  { title: "Search", url: "#", Icon: SearchIcon },
  { title: "Settings", url: "#", Icon: SettingsIcon },
];

export function Example() {
  return (
    <>
      <SidebarProvider>
        <Sidebar collapsible="icon">
          <SidebarHeader>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton size="lg">
                  <div
                    className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
                  >
                    <CodeIcon className="size-5" />
                  </div>
                  <div className="grid flex-1 text-left text-sm leading-tight">
                    <span className="truncate font-semibold">Starwind UI</span>
                    <span className="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
                  </div>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarHeader>

          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Application</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {
                    items.map((item) => (
                      <SidebarMenuItem key={`${item.url}-${item.title}`}>
                        <SidebarMenuButton href={item.url}>
                          <item.Icon />
                          <span>{item.title}</span>
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))
                  }
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>

        <main className="bg-background flex flex-1 flex-col">
          <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4">
            <SidebarTrigger />
            <span className="text-muted-foreground text-sm">Main Content</span>
          </header>
          <div className="flex-1 p-6">
            <p className="text-muted-foreground text-sm">
              Use <kbd className="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
              the sidebar <br /> after clicking in this window.
            </p>
          </div>
        </main>
      </SidebarProvider>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { IconCalendar as CalendarIcon } from "@tabler/icons-vue";
import { IconCode as CodeIcon } from "@tabler/icons-vue";
import { IconHome as HomeIcon } from "@tabler/icons-vue";
import { IconInbox as InboxIcon } from "@tabler/icons-vue";
import { IconSearch as SearchIcon } from "@tabler/icons-vue";
import { IconSettings as SettingsIcon } from "@tabler/icons-vue";

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/starwind/sidebar";

const items = [
  { title: "Home", url: "#", icon: HomeIcon },
  { title: "Inbox", url: "#", icon: InboxIcon },
  { title: "Calendar", url: "#", icon: CalendarIcon },
  { title: "Search", url: "#", icon: SearchIcon },
  { title: "Settings", url: "#", icon: SettingsIcon },
];
</script>

<template>
  <SidebarProvider>
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton size="lg">
              <div
                class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-10 items-center justify-center rounded-lg"
              >
                <CodeIcon class="size-5" />
              </div>
              <div class="grid flex-1 text-left text-sm leading-tight">
                <span class="truncate font-semibold">Starwind UI</span>
                <span class="text-sidebar-foreground/70 truncate text-xs">Enterprise</span>
              </div>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Application</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <template v-for="item in items" :key="item.title">
                <SidebarMenuItem>
                  <SidebarMenuButton :href="item.url">
                    <component :is="item.icon" />
                    <span>{{ item.title }}</span>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </template>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>

    <main class="bg-background flex flex-1 flex-col">
      <header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
        <SidebarTrigger />
        <span class="text-muted-foreground text-sm">Main Content</span>
      </header>
      <div class="flex-1 p-6">
        <p class="text-muted-foreground text-sm">
          Use <kbd class="bg-muted rounded px-1.5 py-0.5 text-xs font-medium">Ctrl+B</kbd> to toggle
          the sidebar <br />
          after clicking in this window.
        </p>
      </div>
    </main>
  </SidebarProvider>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## With Inset Variant

When using the `inset` variant, wrap your main content in `SidebarInset`:

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import {
  Sidebar,
  SidebarInset,
  SidebarProvider,
} from "@/components/starwind/sidebar";
---

<SidebarProvider>
  <Sidebar variant="inset">
    {/* Sidebar content */}
  </Sidebar>
  <SidebarInset>
    <main>{/* Main content */}</main>
  </SidebarInset>
</SidebarProvider>
```
</div>
<div slot="react">
```tsx
import {
  Sidebar,
  SidebarInset,
  SidebarProvider,
} from "@/components/starwind/sidebar";

export function Example() {
  return (
    <>
      <SidebarProvider>
        <Sidebar variant="inset">
          {/* Sidebar content */}
        </Sidebar>
        <SidebarInset>
          <main>{/* Main content */}</main>
        </SidebarInset>
      </SidebarProvider>
    </>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import { Sidebar, SidebarInset, SidebarProvider } from "@/components/starwind/sidebar";
</script>

<template>
  <SidebarProvider>
    <Sidebar variant="inset">
      <!-- Sidebar content -->
    </Sidebar>
    <SidebarInset>
      <main><!-- Main content --></main>
    </SidebarInset>
  </SidebarProvider>
</template>
```
</div>
</FrameworkCodeSwitcher>

## API Reference
### SidebarProvider
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `persistenceKey` | `string` | No | - | Primitive override | Sets the storage key used for persisted state. |
| `persistenceStorage` | `"localStorage" \| "cookie" \| false` | No | - | Primitive override | Selects where persisted state is stored. |
- Inherits div attributes.

### Sidebar
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `collapsible` | `"offcanvas" \| "icon" \| "none"` | No | `"offcanvas"` | Primitive override | Selects how the component can collapse. |
- Inherits div attributes.

### SidebarTrigger
- Inherits Button props.

### SidebarRail
- Inherits button attributes.

### SidebarInset
- Inherits main attributes.

### SidebarContent
- Inherits div attributes.

### SidebarHeader
- Inherits div attributes.

### SidebarFooter
- Inherits div attributes.

### SidebarGroup
- Inherits div attributes.

### SidebarGroupLabel
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Preserves the Sidebar Group Label recipe on its existing wrapper while rendering the supplied child inside it. |
- Inherits div attributes.

### SidebarGroupAction
- Inherits Button props.

### SidebarGroupContent
- Inherits div attributes.

### SidebarInput
- Inherits Input props.

### SidebarSeparator
- Inherits Separator props.

### SidebarMenu
- Inherits ul attributes.

### SidebarMenuItem
- Inherits li attributes.

### SidebarMenuButton
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
| `isActive` | `boolean` | No | `false` | Wrapper prop | Applies the active visual state. |
| `size` | `"sm" \| "md" \| "lg"` | No | `"md"` | Styled variant | Selects the component's visual size. |
| `tooltip` | `string` | No | - | Wrapper prop | Provides collapsed-sidebar tooltip text for this menu button. |
| `variant` | `"default" \| "outline"` | No | `"default"` | Styled variant | Selects the component's visual variant. |
- Inherits a attributes. Omits `type`.
- Inherits button attributes.

### SidebarMenuAction
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `showOnHover` | `boolean` | No | `false` | Wrapper prop | Reveals the action when its containing item is hovered. |
- Inherits Button props.

### SidebarMenuBadge
- Inherits div attributes.

### SidebarMenuSkeleton
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `showIcon` | `boolean` | No | `false` | Wrapper prop | Shows the component's generated icon. |
| `width` | `string` | No | - | Wrapper prop | Sets the component width. |
- Inherits div attributes.

### SidebarMenuSub
- Inherits ul attributes.

### SidebarMenuSubItem
- Inherits li attributes.

### SidebarMenuSubButton
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `isActive` | `boolean` | No | `false` | Wrapper prop | Applies the active visual state. |
| `size` | `"sm" \| "md"` | No | `"md"` | Styled variant | Selects the component's visual size. |
- Inherits a attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Sidebar Primitive](/docs/primitives/sidebar/)
- Runtime factory: [`createSidebarController`](/docs/runtime/#create-sidebar-controller) from `@starwind-ui/runtime/sidebar`

## Changelog

### v2.1.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v2.1.0

- Renamed the standard `SidebarMenuButton` size from `default` to `md`. Omitting `size` keeps the same medium styling.

### v2.0.0

- Rebuilt Sidebar on Starwind Runtime for provider, collapsed, mobile, and control state.
- See the [Sidebar Primitive](/docs/primitives/sidebar/) for the underlying unstyled anatomy and behavior API.