Components
Application shell
Compose a global header, primary navigation, contextual controls, and flexible content into a responsive application frame.
Components
Application shell
An application shell establishes the persistent frame around product content. These patterns compose Boobstrap navigation and layout primitives; they do not replace the underlying components. See the Sidebar guide for sidebar variants, menu anatomy, responsive behavior, controller methods, and the complete class reference.
Choose where the product identity lives.
Use a stacked shell when one global header owns branding across the full viewport. Use a sidebar-first shell when the full-height navigation rail owns the brand and the main header only needs to expose the collapse control.
Choose a variation
| Variation | Brand placement | Header relationship | Best fit |
|---|---|---|---|
| Stacked | Global header | The navigation rails begin below the full-width header. | Documentation, admin tools, and products with shared global navigation. |
| Sidebar-first | Sidebar header | The sidebar header and main header share one aligned height. | Dashboards and workspaces where primary navigation defines the product frame. |
Stacked shell
The global header spans the viewport and owns the primary sidebar control, so the start and end rails begin directly beneath it. The navigation rail has no duplicate sidebar header; section labels use the same .bs-nav-heading treatment as the documentation site.
HTML · Stacked application shell
<header class="bs-navbar bs-px-6">
<a class="bs-navbar-brand bs-inline-flex bs-items-center bs-gap-2" href="/"><i data-lucide="heart" class="bs-icon bs-icon-lg bs-text-primary" aria-hidden="true"></i><span>Acme Corp</span></a>
<button class="bs-navbar-toggle bs-hidden bs-lg-inline-flex" type="button" data-bs-toggle="sidebar" aria-controls="stacked-shell-sidebar" aria-label="Toggle primary sidebar"><i data-lucide="menu" class="bs-icon" aria-hidden="true"></i></button>
</header>
<div class="bs-sidebar-layout">
<aside class="bs-sidebar bs-sidebar-start bs-sidebar-collapsible bs-p-0" id="stacked-shell-sidebar" data-bs-sidebar data-bs-sidebar-collapse="icon" data-bs-state="expanded" aria-label="Application navigation">
<div class="bs-sidebar-content bs-pt-4">
<section class="bs-sidebar-group" aria-labelledby="stacked-application-label">
<p class="bs-nav-heading bs-sidebar-label bs-m-0 bs-mb-2" id="stacked-application-label">Application</p>
<div class="bs-sidebar-group-content"><ul class="bs-sidebar-menu">
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="/" aria-current="page"><i data-lucide="layout-dashboard" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Dashboard</span></a></li>
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="/projects"><i data-lucide="panels-top-left" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Projects</span></a></li>
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="/team"><i data-lucide="user" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Team</span></a></li>
</ul></div>
</section>
</div>
</aside>
<main class="bs-sidebar-main bs-p-6" aria-label="Application content">
<h4 class="bs-mb-2">Dashboard</h4>
<p class="bs-text-muted bs-mb-4">Track projects and collaborate with your team from one focused workspace.</p>
<div class="bs-grid bs-gap-3">
<article class="bs-card bs-card-subtle bs-card-compact bs-col-12 bs-col-md-6"><div class="bs-card-content"><span class="bs-text-xs bs-text-muted">Active projects</span><h5 class="bs-card-title">12</h5></div></article>
<article class="bs-card bs-card-subtle bs-card-compact bs-col-12 bs-col-md-6"><div class="bs-card-content"><span class="bs-text-xs bs-text-muted">Team members</span><h5 class="bs-card-title">24</h5></div></article>
</div>
</main>
<aside class="bs-sidebar bs-sidebar-end bs-sidebar-toc" aria-label="On this page">
<p class="bs-nav-heading bs-m-0 bs-mb-2">On this page</p>
<nav class="bs-nav"><a class="bs-nav-link" href="#dashboard" aria-current="location">Dashboard</a><a class="bs-nav-link" href="#active-projects">Active projects</a><a class="bs-nav-link" href="#team-members">Team members</a></nav>
</aside>
</div>Sidebar-first shell
The navigation rail spans the full viewport and owns the brand. Its header and the main utility header share one 4rem height, and the utility header contains only the sidebar collapse control.
HTML · Sidebar-first application shell
<div class="bs-sidebar-layout">
<aside class="bs-sidebar bs-sidebar-start bs-sidebar-collapsible bs-sidebar-drawer bs-p-0" id="sidebar-first-example" data-bs-sidebar data-bs-sidebar-collapse="icon" data-bs-state="expanded" aria-label="Application navigation">
<div class="bs-sidebar-header bs-navbar">
<a class="bs-navbar-brand bs-inline-flex bs-items-center bs-gap-2" href="#application-shell-sidebar-first"><i data-lucide="heart" class="bs-icon bs-icon-lg bs-text-primary" aria-hidden="true"></i><span class="bs-sidebar-label bs-whitespace-nowrap">Acme Corp</span></a>
</div>
<div class="bs-sidebar-content bs-pt-4">
<div class="bs-sidebar-group">
<p class="bs-nav-heading bs-sidebar-label bs-m-0 bs-mb-2">Application</p>
<nav class="bs-sidebar-group-content" aria-label="Application sections"><ul class="bs-sidebar-menu">
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="#application-shell-sidebar-first" aria-current="page" data-bs-sidebar-close><i data-lucide="layout-dashboard" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Dashboard</span></a></li>
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="#application-shell-sidebar-first" data-bs-sidebar-close><i data-lucide="panels-top-left" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Projects</span></a></li>
<li class="bs-sidebar-menu-item"><a class="bs-sidebar-menu-button" href="#application-shell-sidebar-first" data-bs-sidebar-close><i data-lucide="user" class="bs-icon" aria-hidden="true"></i><span class="bs-sidebar-label">Team</span></a></li>
</ul></nav>
</div>
</div>
</aside>
<main class="bs-sidebar-main" aria-label="Application content">
<header class="bs-navbar bs-navbar-sticky bs-px-6">
<button class="bs-navbar-toggle" type="button" data-bs-toggle="sidebar" aria-controls="sidebar-first-example" aria-label="Toggle sidebar"><i data-lucide="menu" class="bs-icon" aria-hidden="true"></i></button>
</header>
<div class="bs-p-6">
<h4 class="bs-mb-2">Dashboard</h4>
<p class="bs-text-muted bs-mb-4">Track projects and collaborate with your team from one focused workspace.</p>
<div class="bs-grid bs-gap-3">
<article class="bs-card bs-card-subtle bs-card-compact bs-col-12 bs-col-md-6" aria-labelledby="active-projects-card-title"><div class="bs-card-content"><span class="bs-text-xs bs-text-muted">Active projects</span><h5 class="bs-card-title" id="active-projects-card-title">12</h5></div></article>
<article class="bs-card bs-card-subtle bs-card-compact bs-col-12 bs-col-md-6" aria-labelledby="team-members-card-title"><div class="bs-card-content"><span class="bs-text-xs bs-text-muted">Team members</span><h5 class="bs-card-title" id="team-members-card-title">24</h5></div></article>
</div>
</div>
</main>
</div>
<button class="bs-sidebar-backdrop" type="button" data-bs-sidebar-dismiss aria-controls="sidebar-first-example" aria-label="Close application navigation"></button>Place the brand once
Keep identity in the global header for a stacked shell or in .bs-sidebar-header for a sidebar-first shell. Do not duplicate it across both regions.
Share one header height
Applying .bs-navbar to the sidebar header gives both sidebar-first header regions the same 4rem sizing contract and aligned border.
Keep mobile behavior complete
Pair .bs-sidebar-drawer with a named toggle and backdrop so focus, Escape dismissal, scroll locking, and state remain synchronized.
Use the component reference
For menu variants, collapse modes, custom properties, data attributes, and controller events, continue with the Sidebar guide.
Composition reference
| Class | Role in the shell |
|---|---|
.bs-navbar | Creates the global or contextual header and establishes the shared sidebar-first header height. |
.bs-sidebar-layout | Places primary navigation beside a flexible main surface. |
.bs-sidebar-main | Allows the application content region to grow and shrink safely. |
.bs-sidebar-header | Holds product identity only in the sidebar-first variation. |
.bs-sidebar-content | Provides the independently scrolling navigation region. |
.bs-nav-heading | Labels navigation sections consistently with the documentation shell. |
.bs-sidebar-end.bs-sidebar-toc | Adds an optional compact page-outline rail to a stacked shell. |
.bs-sidebar-collapsible | Enables the sidebar-first rail to collapse on desktop. |
.bs-sidebar-drawer | Turns primary navigation into an off-canvas drawer on smaller viewports. |
.bs-sidebar-backdrop | Provides the drawer's external dismiss target. |
These are the composition-level contracts used by the examples. The Sidebar guide remains the source of truth for the complete sidebar API.