AppShell

Standard layout: nav + header + content.

Overview

AppShell is a composable block that provides the foundation for application layouts. It combines sidebar navigation, top header, and main content area into a single, flexible component. Perfect for dashboards, admin panels, and multi-page applications.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Props

• sidebar - Sidebar navigation content (optional)
• sidebarHeader - Sidebar header content like logo, title (optional)
• sidebarFooter - Sidebar footer content like user menu (optional)
• header - Top header content (optional)
• children - Main content area (required)
• sidebarPosition - Sidebar position: "left" | "right" (default: "left")
• sidebarWidth - Sidebar width: "sm" | "md" | "lg" (default: "md")
• contentMaxWidth - Maximum width of main content: "sm" | "md" | "lg" | "xl" | "full" (default: "full")
• className - Additional className for root container (optional)

Features

• Flexible sidebar with header and footer sections
• Sticky top header bar
• Configurable sidebar width and position
• Content max-width constraints
• Responsive layout
• Fully accessible structure
• Works seamlessly with NavigationHeader and other blocks

Related Blocks

• NavigationHeader - Use in header prop
• DashboardTemplate - Complete dashboard template using AppShell
• KpiStrip - Display KPIs in content area

Install

1

Accessibility

AppShell uses semantic HTML elements (header, aside, main, nav) and is fully accessible. The layout structure follows ARIA landmarks best practices.