Pro Components

Base Components

Sidebar 5

Sidebar with collapsible labeled sections, separators, and user dropdown in the footer.

Example

Introduction

Side Sheet 5 includes:
  • Collapsible sections: Overview (Dashboard, Projects) and Team (Members), each with a label and expand/collapse.
  • Separator between sections.
  • User footer: Avatar and name/email in a button that opens a dropdown (Settings, Log out).
  • Main area: Breadcrumb and content.
Uses Button, Avatar, Dropdown Menu, and Collapsible. Good for dashboards that need grouped nav and a clear user block.

Usage

import { Sidebar10 } from "@/components/ui/sidebar-10";

<Sidebar10 />;
Replace section labels, nav items, and user menu with your own data and routes.

On this page

ExampleIntroductionInstallationUsage