App Shell · Sidebar
A sidebar navigation shell with logo, nav links, and a user menu at the bottom. Responsive — sidebar collapses off-canvas on mobile.
Block
Avatar · Badge · Dropdown Menu · Button
When To Use
- Use App Shell · Sidebar when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
- Start from the example whose layout and information hierarchy already match the workflow you are building.
- Review the examples below to compare density, framing, and emphasis before copying one into production code.
When Not To Use
- Do not use App Shell · Sidebar when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
- Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Included examples
Sidebar with user menu
Variation points
Compare layout, content density, and emphasis across the included examples before copying an implementation.
Example Code
import { useState } from "react";
import {
LayoutDashboard, Users, FolderOpen, BarChart2, Settings,
Bell, ChevronDown, Menu, X, LogOut, User
} from "lucide-react";
import { Badge } from "@hilum/ui";
import { Button } from "@hilum/ui";
import { Avatar, AvatarFallback } from "@hilum/ui";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@hilum/ui";
import { cn } from "@hilum/ui";
const NAV_ITEMS = [
// ...trimmed for docsApp Shell · Sidebar navigation
Dashboard
Welcome back, Tom.
Revenue
32,450
Users
1,230
Uptime
97.2%