Page Shell

<base-page-shell> is a Pro content shell for mobile-ready webpages: a main area flanked by a left panel, a right panel, or both. Panels are hidden by default at every viewport and open on demand from the header toggles — on mobile as focus-trapped drawers over a backdrop, on desktop by pushing the full-width content sideways without narrowing it.

Proshell

Live demo

Choose which panels to project, then open them with the panel buttons in the header. On desktop the content is pushed aside at full width; switch to the mobile preview where the panels become drawers over a backdrop.

Left, right, or both

Project one <base-page-shell-sidebar> per side you need — the side input places it at the correct edge. Add a matching <base-page-shell-toggle side="..."> in the header for each panel; panels stay hidden until toggled open. Tune the panel width with [width] — the content push on desktop follows it automatically.

When to use

• Docs, blogs, and marketing pages with contextual side panels.
• Reading layouts with a table of contents on either edge.
• Prefer <base-dashboard-shell> for apps with persistent icon navigation.
• Prefer the free <base-sidenav> for docs hubs and section navigation.

Installation

Run the following command to add this shell to your project:

npx base-ui-cli add page-shell

import { PageShellComponent, PageShellContentComponent, PageShellHeaderComponent, PageShellSidebarComponent, PageShellToggleComponent } from '@lussos/base-ui';

@Component({
  selector: 'app-your-component',
  imports: [
    PageShellComponent,
    PageShellContentComponent,
    PageShellHeaderComponent,
    PageShellSidebarComponent,
    PageShellToggleComponent
  ],
  template: `...`
})
export class YourComponent {}