App Shell
Application shell layout with sidebar and topbar
SaaSNavigation
Overview
AppShell provides the main layout structure for SaaS applications. It manages the sidebar and topbar positioning, handles responsive collapsing, and provides a NavigationProvider context for coordinating navigation state across child components.
Usage
import { AppShell, Sidebar, Topbar } from "@leanicon/web-builder-library/saas";
<AppShell sidebar={<Sidebar>...</Sidebar>} topbar={<Topbar>...</Topbar>}>
<main>Page content</main>
</AppShell>;Variants
Default
Dashboard
Welcome back! Here's an overview of your workspace.
Default Collapsed
Dashboard
Sidebar starts in collapsed state.
No Sidebar
Full Width Layout
AppShell without a sidebar renders full-width content.
Dark
Dashboard
Dark mode layout with sidebar and topbar.
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | ReactNode | — | Yes | Child content (main page content) |
sidebar | ReactNode | — | No | Sidebar component |
topbar | ReactNode | — | No | Topbar component |
sidebarCollapsed | boolean | — | No | Whether sidebar is collapsed (controlled) |
onSidebarCollapsedChange | ((collapsed: boolean) => void) | — | No | Callback when sidebar collapse state changes |
defaultSidebarCollapsed | boolean | — | No | Default sidebar collapsed state (uncontrolled mode) |