Sidebar

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Sidebar

Documentation for the Sidebar component.

Installation

bash

deno run -A jsr:@lockness/ui add sidebar

Usage

tsx

import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarInset
} from '@lockness/ui/components'

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton href="/">Home</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton href="/docs">Docs</SidebarMenuButton>
        </SidebarMenuItem>
        <SidebarMenuItem>
          <SidebarMenuButton href="/settings">Settings</SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>Main content</SidebarInset>
</SidebarProvider>

Props

SidebarProvider

Prop	Type	Default	Description
defaultOpen	`boolean`	`true`	Whether the sidebar is open by default
side	`'left' \| 'right'`	`'left'`	Which side the sidebar appears on
class	`string`	-	Additional CSS class names
style	`Record<string, string \| number>`	-	Inline styles (including CSS custom properties)
children	`unknown`	-	Provider content (Sidebar and SidebarInset)

Sidebar

Prop	Type	Default	Description
side	`'left' \| 'right'`	`'left'`	Which side the sidebar appears on
variant	`'sidebar' \| 'floating' \| 'inset'`	`'sidebar'`	Visual style variant
collapsible	`'offcanvas' \| 'icon' \| 'none'`	`'offcanvas'`	Collapse behavior
topOffset	`string`	-	Top offset for navbar (e.g., '16' for 4rem/64px navbar)
class	`string`	-	Additional CSS class names
children	`unknown`	-	Sidebar content

SidebarTrigger

Prop	Type	Default	Description
class	`string`	-	Additional CSS class names
children	`unknown`	-	Custom trigger content (defaults to sidebar icon)

SidebarRail

Prop	Type	Default	Description
class	`string`	-	Additional CSS class names

INTERACTIVE DEMO

⌘/Ctrl + B to toggle • Click trigger button • Hover over icons in collapsed mode

FEATURES

🎯 Collapsible

Three modes: offcanvas (mobile), icon (collapsed), none (fixed)

⌨️ Keyboard

Cmd/Ctrl + B shortcut for quick toggle

🔄 Persistent

State saved in localStorage across sessions

🎨 Themeable

CSS variables for full theme customization

📱 Responsive

Overlay on mobile, docked on desktop

🧩 Composable

17+ sub-components for flexible layouts

BASIC USAGE

tsx

import {
  SidebarProvider,
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@lockness/ui/components'

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton href="/home">
                Home
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <main>Your content</main>
  </SidebarInset>
</SidebarProvider>

WITH UNPOLY

tsx

<SidebarMenuButton href="/dashboard">
  Dashboard
</SidebarMenuButton>

// Automatically includes:
// - up-follow for AJAX navigation
// - up-nav for active state detection

THEMING

css

--sidebar: oklch(0.97 0.005 240)
--sidebar-foreground: oklch(0.15 0.020 240)
--sidebar-primary: oklch(0.35 0.080 240)
--sidebar-primary-foreground: oklch(0.98 0.005 240)
--sidebar-accent: oklch(0.95 0.010 240)
--sidebar-accent-foreground: oklch(0.25 0.020 240)
--sidebar-border: oklch(0.90 0.010 240)
--sidebar-ring: oklch(0.35 0.080 240)

Edit this page