Dashboard Shell
<base-dashboard-shell> is a Pro application shell for dashboards and admin apps: a collapsible navigation sidebar, a header bar, and a scrollable content area. The rail toggles between an expanded width and a mini icons-only rail, and below the lg breakpoint it becomes an off-canvas drawer with a backdrop, focus trap, and Escape-to-close.
Unlock it plus 85 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Live demo
Use the header's chevron button to collapse the rail to mini mode, or switch to the mobile preview where the sidebar turns into a drawer opened by the hamburger button.
Overview
This is the scrollable content area. Project your routed views, cards, and tables here. The rail on the left keeps navigation one click away while the content area stays wide.
Revenue
$48.2k
Users
1,284
Uptime
99.98%
HTML
Mini mode and sizing
[(collapsed)] toggles between the expanded rail and the mini icons-only rail; base-dashboard-shell-item hides its label and centers the icon automatically. Tune the widths with [width] and [miniWidth], and force a chrome with layout (auto | mobile | desktop) for narrow preview frames.
HTML
When to use
- Dashboards and admin panels with persistent icon navigation.
- Internal tools where the rail should collapse to save horizontal space.
- Prefer
<base-page-shell>for content webpages that need left and/or right panels. - Prefer the free
<base-sidenav>for docs hubs and section navigation.
Installation
Run the following command to add this shell to your project:
bash
npx base-ui-cli add dashboard-shell
API Reference
Base UI provides standalone components. Import the exact elements you want to use into your component.
typescript (Example)
import { DashboardShellComponent, DashboardShellContentComponent, DashboardShellHeaderComponent, DashboardShellItemComponent, DashboardShellSidebarComponent } from '@lussos/base-ui';
@Component({
selector: 'app-your-component',
imports: [
DashboardShellComponent,
DashboardShellContentComponent,
DashboardShellHeaderComponent,
DashboardShellItemComponent,
DashboardShellSidebarComponent
],
template: `...`
})
export class YourComponent {} Properties for dashboard-shell — generated from JSDoc in the library source.
| Selector | Property | Type | Default | Description |
|---|---|---|---|---|
base-dashboard-shell | class | string | '' | Extra host classes merged via `cn()`. |
base-dashboard-shell | collapsed | boolean | false | Start with the mini (icons-only) rail. Supports two-way binding. |
base-dashboard-shell | width | number | 260 | Expanded rail width in px. |
base-dashboard-shell | miniWidth | number | 64 | Mini (icons-only) rail width in px. |
base-dashboard-shell | layout | ShellLayoutMode | 'auto' | Chrome mode. `auto` follows the viewport `lg` breakpoint; `mobile` / `desktop` force that chrome (useful for narrow demos). |
base-dashboard-shell | (collapsedChange) | boolean | — | Emits whenever the rail collapses or expands. |
base-dashboard-shell-content | — | — | — | Scrollable main area for `base-dashboard-shell`. |
base-dashboard-shell-content | class | string | '' | Extra host classes merged via `cn()`. |
base-dashboard-shell-header | class | string | '' | Extra host classes merged via `cn()`. |
base-dashboard-shell-header | showCollapseToggle | boolean | true | Show the desktop collapse/expand rail toggle. |
base-dashboard-shell-item | class | string | '' | Extra host classes merged via `cn()`. |
base-dashboard-shell-item | icon | string | '' | Icon sprite name rendered before the label. |
base-dashboard-shell-sidebar | — | — | — | Navigation rail for `base-dashboard-shell`. Expanded width animates down to the mini (icons-only) width when the shell collapses; below the `lg` breakpoint it slides off-canvas and reopens as a focus-trapped drawer. |
base-dashboard-shell-sidebar | class | string | '' | Extra host classes merged via `cn()`. |
On this page