Sidebar
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Sidebar } from "@corew500/ui/sidebar"
<Sidebar>Content</Sidebar>Variants
sidebarMenuButtonVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaulthighlight | default |
| size | defaultsmlg | default |
Variants
Loading...
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | enum | left | Which side of the viewport the sidebar appears on. |
| variant | enum | sidebar | Visual style variant of the sidebar. - `sidebar`: Standard sidebar with border separator - `floating`: Rounded corners, shadow, slight inset - `inset`: Background extends under sidebar area |
| collapsible | enum | none | Controls how the sidebar collapses: - `none` (default): Sidebar is always visible, never collapses - `icon`: Sidebar collapses to icon-only width, content shifts - `offcanvas`: Sidebar slides over content (like a drawer), use for mobile-style overlays |
Accessibility
Keyboard Navigation
- - Keyboard shortcut: Cmd/Ctrl+B toggles sidebar
Focus Management
- Focus management handled by child components
- Mobile overlay uses Sheet with proper focus trap
Localization
Translatable Content
- - No internal strings; pass translated content to child components
- Menu labels, headers, and content accept pre-resolved strings