Components / App Shell
App Shell
Top-level application scaffold composing header, sidebar, content, and footer regions with landmark roles and a responsive collapsible sidebar. Compose cg-navbar (header) + cg-sidebar (sidebar) inside it.
layoutv0.8.0
Playground
Examples
Basic shell
<cg-app-shell style="height:280px;border:1px solid var(--cg-color-surface-base-divider);border-radius:8px;overflow:hidden;"><div slot="header" style="display:flex;align-items:center;padding:0 16px;font-weight:600;">My App</div><div slot="sidebar" style="padding:12px;"><cg-stack gap="xs"><cg-text>Dashboard</cg-text><cg-text>Reports</cg-text><cg-text>Settings</cg-text></cg-stack></div><div style="padding:16px;"><cg-text>Main content area</cg-text></div><div slot="footer" style="padding:8px 16px;"><cg-text size="sm" color="secondary">© Cognivo</cg-text></div></cg-app-shell>Collapsed sidebar
<cg-app-shell sidebar-collapsed style="height:240px;border:1px solid var(--cg-color-surface-base-divider);border-radius:8px;overflow:hidden;"><div slot="header" style="display:flex;align-items:center;padding:0 16px;font-weight:600;">Collapsed</div><div slot="sidebar" style="padding:12px;">Nav</div><div style="padding:16px;">Content spans full width</div></cg-app-shell>Sidebar on end
<cg-app-shell sidebar-position="end" style="height:240px;border:1px solid var(--cg-color-surface-base-divider);border-radius:8px;overflow:hidden;"><div slot="header" style="display:flex;align-items:center;padding:0 16px;font-weight:600;">End-aligned</div><div slot="sidebar" style="padding:12px;">Nav</div><div style="padding:16px;">Content</div></cg-app-shell>Import
import { CgAppShell } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-app-shell';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
sidebar-position | "start" | "end" | "start" | Which side the sidebar sits on |
sidebar-width | string | "260px" | Sidebar track width |
sidebar-collapsed | boolean | false | Collapse the sidebar |
header-height | string | "56px" | Header track height |
sticky-header | boolean | true | Header stays fixed while content scrolls |
Events
| Event | Detail | Description |
|---|---|---|
cg-app-shell-toggle | {collapsed: boolean} | Sidebar collapse toggled |