Pro Components

Base Components

Sidebar 4

Sidebar with collapsible nav group and user block (avatar + dropdown) in the footer.

Example

Introduction

Side Sheet 4 provides:
  • Collapsible nav: Single “Navigation” section (Dashboard, Projects, Team) that expands and collapses.
  • User footer: Avatar, name, and email in a button that opens a dropdown (Profile, Settings, Log out).
  • Main area: Breadcrumb and content.
Uses Button, Avatar, Dropdown Menu, and Collapsible. Suited to app shells that need a compact sidebar with user menu.

Usage

import { Sidebar11 } from "@/components/ui/sidebar-11";

<Sidebar11 />;
Replace nav items and user dropdown entries with your routes and account actions.

On this page

ExampleIntroductionInstallationUsage