Pure Admin's layout system: navbar + sidebar + content + footer with configurable behavior
Layout Structure
The three-level nesting pattern
<.layout>
<.navbar>
<:start>...</:start>
<:center>...</:center>
<:end_>...</:end_>
</.navbar>
<.layout_inner>
<.sidebar>
<.sidebar_item label="Dashboard" icon="..." href="/" />
<.sidebar_submenu id="settings" label="Settings" icon="...">
<.sidebar_item label="General" href="/settings" />
</.sidebar_submenu>
</.sidebar>
<.layout_content>
<.main>content</.main>
<.footer>
<:start>...</:start>
<:end_>...</:end_>
</.footer>
</.layout_content>
</.layout_inner>
</.layout>
Layout CSS Classes
| Class | Description |
|---|---|
.pc-layout
| Root layout container (100vh flex column) |
.pc-layout__inner
| Content area below navbar (flex row) |
.pc-layout__sidebar
| Sidebar container (fixed width) |
.pc-layout__sidebar--icon-collapse
| Sidebar shows icons only when collapsed |
.pc-layout__sidebar--resizable
| Enable drag-to-resize sidebar |
.pc-layout__content
| Main content + footer wrapper (flex grow) |
.pc-layout--sticky
| Sticky sidebar (doesn't scroll with content) |
Navbar Structure
| Class | Description |
|---|---|
.pc-navbar
| Top navigation bar (3-section flex layout) |
.pc-navbar__start
| Left section: burger + brand + nav items |
.pc-navbar__center
| Center section: page title |
.pc-navbar__end
| Right section: nav + notifications + profile |
.pc-navbar__brand
| Brand/logo container |
.pc-navbar__nav
| Navigation link group |
.pc-navbar__nav-item
| Individual nav link |
.pc-navbar__dropdown
| CSS dropdown menu |
.pc-navbar__title
| Page title in center section |
Sidebar Components
LiveView Components
<.sidebar>- Sidebar container with optionalid<.sidebar_item>- Link item withlabel,icon,href,is_active<.sidebar_submenu>- Expandable group withid,label,icon,is_open
Sidebar Behavior
- Hide -
sidebar-hiddenon body hides completely - Icon collapse -
pc-layout__sidebar--icon-collapseshows icons only - Resizable -
pc-layout__sidebar--resizableenables drag handle - Sticky -
pc-layout--stickyon body fixes sidebar position - Submenu persistence -
PureAdminSidebarSubmenuhook saves open/closed state to localStorage
Container Width
Control the maximum width of the content area
| Class | Max Width | Description |
|---|---|---|
.(none)
| 100% | Fluid - full width (default) |
.pc-container-sm
| 768px | Small |
.pc-container-md
| 1024px | Medium |
.pc-container-lg
| 1280px | Large |
.pc-container-xl
| 1600px | Extra large |
.pc-container-2xl
| 1920px | 2X large |
Apply container width classes to
<body>. The settings panel manages this automatically via localStorage.