Skip to content
LayoutBrowse layout components
ComponentsLayoutStable

App shell

Full-page application layout: sidebar + main content with sticky navbar.

Live preview

Usage

Adapters:React stableVue stable
index.html
<div class="lm-app-shell lm-app-shell-sidebar">
  <nav class="lm-sidebar">…</nav>
  <main class="lm-app-main">…</main>
</div>

CSS classes (5)

ClassDescription
lm-app-shellTop-level grid container
lm-app-shell-sidebarTwo-column variant
lm-app-mainInner content region
lm-page-headerTitle + actions row
lm-page-title / -descriptionPage heading typography

Accessibility

  • Use semantic <main>, <nav>, <header> landmarks.

Spotted something wrong? Edit this entry on GitHub.