Design System/Blocks/App Shell · Stacked

App Shell · Stacked

A top-navigation shell with logo, nav links, notification bell, and a user menu. Collapses to a hamburger on mobile.

Block

Avatar · Badge · Dropdown Menu · Button

When To Use

Use App Shell · Stacked 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 · Stacked 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

Top navbar 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,
  Bell, Menu, X, ChevronDown, Settings, 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 docs

App Shell · Stacked navigation

Acme Inc.

Dashboard

Here's what's happening today.

Revenue

$32,450

+4.6% vs last mo.

Users

1,230

+2.1% vs last mo.

Orders

847

-0.5% vs last mo.

Uptime

99.9%

+0.1% vs last mo.

Recent activity

View all

Invoice #1234 paid

New user signup: alex@example.com

Deployment to production succeeded