App Shell
Overview
Usage
Examples
API
<rhombus-app-shell> is a structure-only layout primitive wrapping mat-sidenav-container + mat-toolbar: a header, a collapsible sidenav, a content area, and an optional right-rail aside. It renders no nav items, brand, or theme control — every product concern is a projected slot, and it sources its chrome from the token contract.
Example
AcmeDocs
Getting started
The default content slot holds your routed view. The brand, nav, and header actions are all projected.
When to use
- Use it once as the application frame around your routed views, when you need a header, a collapsible sidenav, and a content area in a single responsive primitive. The showcase chrome around you is itself a
rhombus-app-shell; resize the window to watch the sidenav collapse to an overlay drawer. - Reach for the bottom-nav mode (
navMode="bottom") on a mobile-first product where a bottom tab bar fits better than a side drawer.
When not to use
- For the heading inside a single routed view, use a Page Header — the shell is the outer frame, not the per-page title.
- For a standalone bottom tab bar without the surrounding shell, use Bottom Nav directly.
- For in-page section navigation rather than app-level routing, use Tabs or Breadcrumbs.
Related components
- Page Header — the title block inside a routed view.
- Bottom Nav — the bar projected into the shell's bottom mode.
- Breadcrumbs — location trail within the content area.
- Theme Toggle — a common header-actions control.
Was this page helpful?