Pro Components

Base Components

Sidebar 1

Collapsible sidebar that shrinks to icon-only rail, with nav links and settings in the footer.

Example

Introduction

Side Sheet 1 is a simple sidebar layout with:
  • Collapsible rail: Toggle to expand (full labels) or collapse (icons only). Logo/brand and collapse button in the header.
  • Nav links: Dashboard, Projects, Team with icons.
  • Footer: Settings link.
Uses Button. Suited to apps that need a compact side navigation that can collapse to save space.

Usage

import { Sidebar9 } from "@/components/ui/sidebar-9";

<Sidebar9 />;
Replace nav items and links with your routes. Wire the collapse state to layout or persist it if needed.

On this page

ExampleIntroductionInstallationUsage