Pro Components

Base Components

Sidebar 2

Sidebar with multiple labeled navigation groups (Overview, Projects, Team, Workspace) and footer utilities.

Example

Introduction

Side Sheet 2 organizes navigation into labeled groups:
  • Overview: Dashboard, Tasks.
  • Projects: Active, Archived.
  • Team: Members, Sprints.
  • Workspace: Integrations.
  • Footer: Help and Settings links.
Main area includes a simple breadcrumb (Home / Dashboard). Ideal for apps with many nav items across different sections.

Usage

import { Sidebar3 } from "@/components/ui/sidebar-3";

<Sidebar3 />;
Replace group labels and items with your own structure. Connect breadcrumb to your router.

On this page

ExampleIntroductionInstallationUsage