COMPONENTS / NAVIGATION
Sidebars
Five navigation shells with collapse, nesting, and a narrow-width layout.
standardv1.0.0verifiedFigma linked
Design variations
Classic
Icon rail
Grouped
Floating
Dual-level
Implementation
// npx github:rbillyjames0221/csc-ui init
import '@csc/ui/styles.css';
import { Sidebar } from '@csc/ui';
export function Example() {
return (
<Sidebar variant="classic" collapsed="false" />
);
}Agent prompt
Copy a prompt for this component from the AI Development Hub.
When to use it
Five navigation shells with collapse, nesting, and a narrow-width layout.
Dependencies: lucide-react. Source: packages/ui/src/sidebar.tsx. 1.0.0 — Classic, rail, grouped, floating, and dual-level sidebars.