🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Sidebar

Sidebar component for the Simpson Strong-Tie design system.

Example

"use client"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@strongtie/design-system/sidebar"
import {
  MdCalendarToday,
  MdHome,
  MdInbox,
  MdSearch,
  MdSettings,
} from "react-icons/md"

const items = [
  {
    title: "Home",
    url: "#",
    icon: MdHome,
  },
  {
    title: "Inbox",
    url: "#",
    icon: MdInbox,
  },
  {
    title: "Calendar",
    url: "#",
    icon: MdCalendarToday,
  },
  {
    title: "Search",
    url: "#",
    icon: MdSearch,
  },
  {
    title: "Settings",
    url: "#",
    icon: MdSettings,
  },
]

export function SidebarDefault() {
  return (
    <SidebarProvider>
      <div className="flex h-screen w-full">
        <Sidebar>
          <SidebarHeader>
            <div className="p-4 text-lg font-semibold">Application</div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Menu</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild>
                        <a href={item.url}>
                          <item.icon />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <div className="text-muted-foreground p-4 text-sm">v1.0.0</div>
          </SidebarFooter>
        </Sidebar>
        <main className="flex-1 p-6">
          <SidebarTrigger />
          <div className="mt-4">
            <h1 className="text-2xl font-bold">Main Content</h1>
            <p className="text-muted-foreground mt-2">
              Toggle the sidebar using the button above.
            </p>
          </div>
        </main>
      </div>
    </SidebarProvider>
  )
}

Installation


npm install @strongtie/design-system

import { Sidebar } from "@strongtie/design-system/sidebar"

Components

This module exports the following components:

Sidebar
SidebarContent
SidebarFooter
SidebarGroup
SidebarGroupAction
SidebarGroupContent
SidebarGroupLabel
SidebarHeader
SidebarInput
SidebarInset
SidebarMenu
SidebarMenuAction
SidebarMenuBadge
SidebarMenuButton
SidebarMenuItem
SidebarMenuSkeleton
SidebarMenuSub
SidebarMenuSubButton
SidebarMenuSubItem
SidebarProvider
SidebarRail
SidebarSeparator
SidebarTrigger
useSidebar

Props

`<Sidebar>`

Prop	Type	Default
`collapsible`	`none` \| `offcanvas` \| `icon`	`offcanvas`
`side`	`left` \| `right`	`left`
`variant`	`sidebar` \| `floating` \| `inset`	`sidebar`

`<SidebarMenuAction>`

Prop	Type	Default	Description
`showOnHover`	`boolean`	`false`

`<SidebarMenuButton>`

Prop	Type	Default
`isActive`	`boolean`	`false`
`size`	`"default" \| "sm" \| "lg" \| null`	`default`
`tooltip`	`string \| (TooltipContentProps & RefAttributes<HTMLDivElement>)`	-
`variant`	`"default" \| "outline" \| null`	`default`

`<SidebarMenuSkeleton>`

Prop	Type	Default	Description
`showIcon`	`boolean`	`false`

`<SidebarMenuSubButton>`

Prop	Type	Default	Description
`isActive`	`boolean`	`false`
`size`	`sm` \| `md`	`md`

`<SidebarProvider>`

Prop	Type	Default
`defaultOpen`	`boolean`	`true`
`onOpenChange`	`((open: boolean) => void)`	-
`open`	`boolean`	-

`<SidebarSeparator>`

Prop	Type	Default	Description
`text`	`string`	-	Optional text to display within the separator. When provided, renders as a line with text in the middle.

`<SidebarTrigger>`

Prop	Type	Default	Description
`size`	`icon` \| `default` \| `sm` \| `lg`	`'default'`	The size of the button, affecting padding and font size.
`variant`	`link` \| `default` \| `outline` \| `secondary` \| `ghost` \| `destructive`	`'default'`	The visual style variant of the button.

Examples

"use client"

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@strongtie/design-system/sidebar"
import {
  MdCalendarToday,
  MdHome,
  MdInbox,
  MdSearch,
  MdSettings,
} from "react-icons/md"

const items = [
  {
    title: "Home",
    url: "#",
    icon: MdHome,
  },
  {
    title: "Inbox",
    url: "#",
    icon: MdInbox,
  },
  {
    title: "Calendar",
    url: "#",
    icon: MdCalendarToday,
  },
  {
    title: "Search",
    url: "#",
    icon: MdSearch,
  },
  {
    title: "Settings",
    url: "#",
    icon: MdSettings,
  },
]

export function SidebarDefault() {
  return (
    <SidebarProvider>
      <div className="flex h-screen w-full">
        <Sidebar>
          <SidebarHeader>
            <div className="p-4 text-lg font-semibold">Application</div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Menu</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild>
                        <a href={item.url}>
                          <item.icon />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>
            <div className="text-muted-foreground p-4 text-sm">v1.0.0</div>
          </SidebarFooter>
        </Sidebar>
        <main className="flex-1 p-6">
          <SidebarTrigger />
          <div className="mt-4">
            <h1 className="text-2xl font-bold">Main Content</h1>
            <p className="text-muted-foreground mt-2">
              Toggle the sidebar using the button above.
            </p>
          </div>
        </main>
      </div>
    </SidebarProvider>
  )
}

Basic

"use client"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@strongtie/design-system/sidebar"
import { MdHome, MdNotifications, MdPerson, MdSettings } from "react-icons/md"

export function SidebarBasic() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton asChild>
                    <a href="#">
                      <MdHome />
                      <span>Home</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton asChild>
                    <a href="#">
                      <MdNotifications />
                      <span>Notifications</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton asChild>
                    <a href="#">
                      <MdPerson />
                      <span>Profile</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton asChild>
                    <a href="#">
                      <MdSettings />
                      <span>Settings</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Base Class

sidebar-menu-button

Variants

variant (default: default)

Value	Classes
`default`	`(none)`
`outline`	`sidebar-menu-button-outline`

size (default: default)

Value	Classes
`default`	`(none)`
`sm`	`sidebar-menu-button-sm`
`lg`	`sidebar-menu-button-lg`

Component Slots

The following data attributes are used to identify component parts:

sidebar
sidebar-container
sidebar-content
sidebar-footer
sidebar-gap
sidebar-group
sidebar-group-action
sidebar-group-content
sidebar-group-label
sidebar-header
sidebar-inner
sidebar-input
sidebar-inset
sidebar-menu
sidebar-menu-action
sidebar-menu-badge
sidebar-menu-button
sidebar-menu-item
sidebar-menu-skeleton
sidebar-menu-skeleton-icon
sidebar-menu-skeleton-text
sidebar-menu-sub
sidebar-menu-sub-button
sidebar-menu-sub-item
sidebar-rail
sidebar-separator
sidebar-trigger
sidebar-wrapper

Additional Classes

Other CSS classes used by this component:

sidebar
sidebar-container
sidebar-content
sidebar-footer
sidebar-gap
sidebar-group
sidebar-group-action
sidebar-group-content
sidebar-group-label
sidebar-header
sidebar-inner
sidebar-input
sidebar-inset
sidebar-menu
sidebar-menu-action
sidebar-menu-action-hover
sidebar-menu-badge
sidebar-menu-item
sidebar-menu-skeleton
sidebar-menu-sub
sidebar-menu-sub-button
sidebar-menu-sub-item
sidebar-rail
sidebar-separator
sidebar-trigger
sidebar-wrapper
sr-only

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Sheet Skeleton