---
title: Sidebar Shell
description: One navigation column at full height, the top bar inside the content column beside it — the shape most admin panels and dashboards take.
visibility: guest
draft: false
category: application-shells
tags: [application-shells, shell, sidebar, flush, collapsible]
dependencies: [app-shell, avatar, button, card, dropdown, footer, heading, main, profile, shell-bar, sidebar, skip-link, stack, stat, stats, text]
responsive: true
dark_compatible: true
---
# Sidebar Shell
One navigation column running the full height of the window, the content beside it, and the
top bar inside that content column rather than spanning the whole width. It is the shape most
admin panels and dashboards take, and the reason is the column: everything the application
can do is visible at once, in one list, without a second level of chrome.
Leave it the moment the application has several product areas. A single column then has to
answer two questions at the same time — which area am I in, and where am I inside it — and it
answers both badly. That is where the console shape starts, with a rail for the areas and a
column for the pages inside one.
**Composed from:** `app-shell`, `avatar`, `button`, `card`, `dropdown`, `footer`, `heading`, `main`, `profile`, `shell-bar`, `sidebar`, `skip-link`, `stack`, `stat`, `stats`, `text`.
> **A shell has no outer edge of its own.** It fills the browser window, so in a real
> application its outer edges ARE the window's edges — square, and as wide as the screen.
> Every radius in this family faces INWARD, toward the inset content panel; nothing faces out.
> The previews below carry no frame for the same reason: the box they sit in is standing in
> for the window, and a shell drawn inside a second border is a window inside a window.
:::preview{title="Sidebar Shell — one navigation column, the bar inside the content" wide bleed height="28rem"}
Acme Console
Dashboard
Customers
Invoices
Products
Settings
Profile
Preferences
Sign out
{{-- The toggle sits in `start`, not the default slot: the default slot SCROLLS
when the bar overflows, and on a phone it overflows immediately — a burger
that scrolls away is the one control a reader cannot afford to lose. --}}
Dashboard
Export
New invoice
Figures update hourly. The column on the left stays put while this area scrolls.
:::
## Collapsing the column to icons
A column that is always open costs the same width on every page, and on a laptop that width
is real estate the content wanted. `collapsible` gives the reader a handle to give it back:
the labels go, the icons stay, and the column narrows to the width of one icon plus its
padding.
The labels are not removed from the page when this happens — they become `sr-only`, so a
screen reader still hears "Customers" where a sighted reader now sees only the icon. That is
the whole reason the item takes a label at all rather than an icon with a tooltip.
`persist` remembers the reader's choice across page loads by writing it to the browser's own
storage, which is what you want in a real application. It is deliberately absent from the
preview below: a preview whose rendered state depends on the visitor's storage shows
different things to different people, and one of them is always the wrong one to document.
:::preview{title="The same column, collapsed to icons" wide bleed height="24rem"}
Dashboard
Customers
Invoices
Settings
Dashboard
The column keeps its icons and gives the labels back to the content.
:::
## Everything at once
The two previews above each isolate one decision, which is what makes them readable and what
makes them incomplete: neither shows a shell with all of its parts in place at the same time.
This one does, and it is the one to copy from. Every zone the shell has is filled — a brand
row above the navigation, labeled groups, a nested collapsible section, an item carrying an
unread count, the collapse control, an account row pinned to the foot of the column, a bar
with both of its clusters, and a real page footer at the end of the content.
::: tip Start here and strip back
Furnishing an empty shell means working out which slot each part belongs in. Starting from a
full one means taking out the slots you have no content for, and what is left still stands up —
the zones are independent of one another.
:::
:::preview{title="Sidebar Shell — every zone filled" wide bleed height="34rem"}
Acme Console
Dashboard
Inbox
Customers
Invoices
Revenue
Churn
Forecast
Settings
Profile
Preferences
Sign out
Dashboard
Export
New invoice
This week
Nine invoices went out and four were settled. The column on the left stays put while this area scrolls.
© 2026 Acme Inc.
:::
## Blade Code
Save this as your application's root layout. Two common locations:
- `resources/views/layouts/app.blade.php` — Livewire v4's default page layout (`layouts::app`) and the path `php artisan livewire:layout` creates. Livewire uses it without an attribute; reference it explicitly from a Livewire component class via `#[Layout('layouts.app')]`, or from a route or controller view via `@extends('layouts.app')`.
- `resources/views/components/layouts/app.blade.php` — the anonymous-component path Livewire v3 used by default, still found in projects created before v4. Reference it via `#[Layout('components.layouts.app')]`.
In the Livewire Starter Kit, `layouts/app.blade.php` only hands the page on to a shell in `layouts/app/` — that shell is the file holding the `` and ``.
Pick whichever matches the scaffolding your fresh Laravel install or starter kit already ships with.
```blade
{{-- 1. The skip link sits OUTSIDE the shell and before it. Under
header-placement="content" the navigation column comes first in DOM order, so a skip
link placed inside would be reached only after every navigation item — which is the
one thing it exists to prevent. --}}
{{-- 2. `viewport` makes the shell fill the window rather than flow with the page. It is
what turns this from a layout into a shell. --}}
{{-- 3. The navigation column. `variant="flush"` draws no surface of its own, so the
column sits directly on the shell's background instead of being a panel inside it. --}}
{{-- 4. The column's own head. `bleed` lets the bar reach the column's edges, so
its bottom edge lines up with the bar in the content column beside it. --}}
Acme Console
{{-- 5. `icon` takes a VOCABULARY name, not a glyph name — so the same markup
keeps its meaning if the application changes icon set. --}}
Dashboard
Customers
Invoices
Settings
{{-- 6. The account menu goes in the column's footer zone. Nothing needs to be
pushed down by hand — the zone is already anchored to the bottom. --}}
Profile
Preferences
Sign out
{{-- 7. The toggle belongs in the bar's `start` slot, which is pinned. The default slot
scrolls when the bar overflows, and on a phone it overflows immediately — so a
toggle placed there scrolls out of reach exactly when it is needed. --}}
{{ $title ?? 'Dashboard' }}
Export
New invoice
{{-- 8. `id="main-content"` is what the skip link in step 1 jumps to, and setting it also
gives the landmark tabindex="-1" so the jump moves FOCUS and not just the scroll
position. `max="none"` lets the content use the full column width. --}}
{{ $slot }}
```
## Customization
| What | How |
|------|-----|
| Column width | Set `--wk-sidebar-w` on the shell or any ancestor — the sidebar reads it and falls back to `16rem`. It is a CSS variable rather than a prop so a whole application can set it once. |
| Collapsed width | Fixed at the width of one icon plus its padding. It is not themeable on purpose: the collapsed column exists to be exactly as wide as its icons, and a different value makes it a narrow column instead of an icon rail. |
| Column surface | `variant="flush"` above draws no surface of its own, which is what a column against the shell's own background wants. Drop it for a paneled column with its own border and elevation. |
| Bar height and padding | `padding` on `shell-bar` (`sm`, default, `lg`). The bar's bottom edge is the shell's horizontal rule, so it aligns with the same edge in the other columns automatically. |
| Navigation items | `sidebar.group` for the headings, `sidebar.item` for the rows. The `icon` prop takes a vocabulary name, not a glyph name, so it survives a change of icon set. |
| Account menu | The `footer` slot of the sidebar. Anything can go there; the composition above uses a `dropdown` because a menu of account actions is what most applications put there. |
## Accessibility
Everything below is what the components emit — there is nothing to wire up by hand.
- **Skip link** — `` at the top of the page, visible on keyboard focus,
targeting the `main` landmark. It is the first thing a keyboard reader meets, and it exists
because the alternative is tabbing through the whole navigation column on every page.
- **Landmarks** — the sidebar renders `