Sidebar | Bearnie

Note: The sidebar is hidden by default on mobile. View these examples on desktop or use the SidebarTrigger to toggle visibility.

Main content area

<Sidebar>
<SidebarHeader>
  <div class="flex items-center gap-2 px-2">
    <div class="size-6 rounded-md bg-primary"></div>
    <span class="font-semibold">Acme Inc</span>
  </div>
</SidebarHeader>
<SidebarContent>
  <SidebarGroup>
    <SidebarGroupLabel>Application</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="#" isActive>
          <span>Home</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton href="#">
          <span>Inbox</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</SidebarContent>
<SidebarFooter>
  <SidebarMenu>
    <SidebarMenuItem>
      <SidebarMenuButton href="#">
        <span>Settings</span>
      </SidebarMenuButton>
    </SidebarMenuItem>
  </SidebarMenu>
</SidebarFooter>
</Sidebar>

Installation

npx bearnie add sidebar

import Sidebar from "@/components/ui/sidebar/Sidebar.astro";
import SidebarHeader from "@/components/ui/sidebar/SidebarHeader.astro";
import SidebarContent from "@/components/ui/sidebar/SidebarContent.astro";
import SidebarFooter from "@/components/ui/sidebar/SidebarFooter.astro";
import SidebarGroup from "@/components/ui/sidebar/SidebarGroup.astro";
import SidebarGroupLabel from "@/components/ui/sidebar/SidebarGroupLabel.astro";
import SidebarMenu from "@/components/ui/sidebar/SidebarMenu.astro";
import SidebarMenuItem from "@/components/ui/sidebar/SidebarMenuItem.astro";
import SidebarMenuButton from "@/components/ui/sidebar/SidebarMenuButton.astro";
import SidebarTrigger from "@/components/ui/sidebar/SidebarTrigger.astro";
import SidebarSeparator from "@/components/ui/sidebar/SidebarSeparator.astro";

Usage

import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "@/components/ui/sidebar"

<Sidebar>
<SidebarHeader>
  <span>Logo</span>
</SidebarHeader>
<SidebarContent>
  <SidebarGroup>
    <SidebarGroupLabel>Menu</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="/">
          <HomeIcon />
          <span>Home</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</SidebarContent>
<SidebarFooter>
  <SidebarMenu>
    <SidebarMenuItem>
      <SidebarMenuButton href="/settings">
        <SettingsIcon />
        <span>Settings</span>
      </SidebarMenuButton>
    </SidebarMenuItem>
  </SidebarMenu>
</SidebarFooter>
</Sidebar>

Examples

With trigger

Use SidebarTrigger to toggle the sidebar.

<Sidebar defaultOpen={true}>
<SidebarHeader>
  <span class="px-2 font-semibold">App</span>
</SidebarHeader>
<SidebarContent>
  <SidebarGroup>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="#" isActive>
          <span>Dashboard</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</SidebarContent>
</Sidebar>

<!-- In your main content -->
<SidebarTrigger />

Multiple groups

Content

<Sidebar>
<SidebarHeader>
  <span class="px-2 font-semibold">Workspace</span>
</SidebarHeader>
<SidebarContent>
  <SidebarGroup>
    <SidebarGroupLabel>Platform</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="#" isActive>
          <span>Dashboard</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
      <SidebarMenuItem>
        <SidebarMenuButton href="#">
          <span>Messages</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
  <SidebarSeparator />
  <SidebarGroup>
    <SidebarGroupLabel>Projects</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="#">
          <span>Project Alpha</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</SidebarContent>
</Sidebar>

Structure

Sidebar - Main container with collapsible state
SidebarHeader - Sticky header section
SidebarContent - Scrollable content area
SidebarFooter - Sticky footer section
SidebarGroup - Groups related menu items
SidebarGroupLabel - Label for a group
SidebarMenu - Menu container (ul)
SidebarMenuItem - Menu item wrapper (li)
SidebarMenuButton - Clickable menu button/link
SidebarTrigger - Toggle button
SidebarSeparator - Visual divider

Props

Prop	Type	Default	Description
side	”left” \| “right"	"left”	Side of the screen
collapsible	boolean	true	Whether sidebar can collapse
defaultOpen	boolean	true	Initial open state
class	string	-	Additional CSS classes

SidebarMenuButton

Prop	Type	Default	Description
href	string	-	Link URL (renders as anchor)
isActive	boolean	false	Active state styling
class	string	-	Additional CSS classes

SidebarTrigger

Prop	Type	Default	Description
for	string	-	ID of sidebar to target
class	string	-	Additional CSS classes

Theming

The sidebar uses dedicated CSS variables for theming:

:root {
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.439 0 0);
}