Bottom bar
tier 1 — the frameThe bar across the bottom of a phone, holding the few places or actions used most. It takes the sidebar's place below 560px, and its items are the same links a nav holds — only the container changes.
Bottom bar
Live — scroll the list. .bottombar is the last child of
.content, so .page ends where it begins and nothing sits under it.
Icons only: the current item also shows its label and carries the topbar's brand line, and
every other label is visually hidden, so each item keeps its accessible name.
.bottombar-count rides the icon, and follows the label on the current item so a
wide count never covers text. --end sets a cell apart with a short divider;
.bottombar-accessory holds something running in the background.
data-hide-on-scroll steps the items away on the way down and back on the way up.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<div class="bare-brand"><div class="brand-logo" style="background:var(--brand)"></div><strong>Dispatch</strong></div>
<div class="topbar-spacer"></div>
<button class="topbar-btn" aria-label="Notifications"><i class="ri-notification-3-line"></i></button>
</header>
<main class="page">
<h1>Orders</h1>
<div class="card">
<ul class="list">
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10248</span><span class="list-sub">Northwind Retail · 3 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10249</span><span class="list-sub">2 items · leaves 14:30</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10250</span><span class="list-sub">Address rejected</span></span>
<span class="list-meta"><span class="badge badge-danger">On hold</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10251</span><span class="list-sub">6 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10252</span><span class="list-sub">1 item · delivered</span></span>
<span class="list-meta"><span class="badge badge-go">Done</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10253</span><span class="list-sub">4 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10254</span><span class="list-sub">3 items · leaves 16:00</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10255</span><span class="list-sub">2 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
</ul>
</div>
</main>
<nav class="bottombar" aria-label="Main" data-hide-on-scroll>
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>Tint
.bottombar--tint marks the current place the way the sidebar marks its current
link: --brand-tint on a control-radius block, with no line.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<div class="bare-brand"><div class="brand-logo" style="background:var(--brand)"></div><strong>Dispatch</strong></div>
<div class="topbar-spacer"></div>
<button class="topbar-btn" aria-label="Notifications"><i class="ri-notification-3-line"></i></button>
</header>
<main class="page">
<h1>Orders</h1>
<div class="card">
<ul class="list">
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10248</span><span class="list-sub">Northwind Retail · 3 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10249</span><span class="list-sub">2 items · leaves 14:30</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10250</span><span class="list-sub">Address rejected</span></span>
<span class="list-meta"><span class="badge badge-danger">On hold</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10251</span><span class="list-sub">6 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10252</span><span class="list-sub">1 item · delivered</span></span>
<span class="list-meta"><span class="badge badge-go">Done</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10253</span><span class="list-sub">4 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10254</span><span class="list-sub">3 items · leaves 16:00</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10255</span><span class="list-sub">2 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
</ul>
</div>
</main>
<nav class="bottombar bottombar--tint" aria-label="Main">
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>Card
.bottombar--card floats the items as a card — its border, radius and
--shadow-float — and the accessory becomes a smaller card of its own above them.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<div class="bare-brand"><div class="brand-logo" style="background:var(--brand)"></div><strong>Dispatch</strong></div>
<div class="topbar-spacer"></div>
<button class="topbar-btn" aria-label="Notifications"><i class="ri-notification-3-line"></i></button>
</header>
<main class="page">
<h1>Orders</h1>
<div class="card">
<ul class="list">
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10248</span><span class="list-sub">Northwind Retail · 3 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10249</span><span class="list-sub">2 items · leaves 14:30</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10250</span><span class="list-sub">Address rejected</span></span>
<span class="list-meta"><span class="badge badge-danger">On hold</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10251</span><span class="list-sub">6 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10252</span><span class="list-sub">1 item · delivered</span></span>
<span class="list-meta"><span class="badge badge-go">Done</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10253</span><span class="list-sub">4 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10254</span><span class="list-sub">3 items · leaves 16:00</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10255</span><span class="list-sub">2 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
</ul>
</div>
</main>
<nav class="bottombar bottombar--card" aria-label="Main">
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>Roundness
--bottombar-radius on the bar sets how round it is, and the current item's block
and the --end cell follow it in by the card's padding, so the corners stay
concentric. Set it on .bottombar in your own stylesheet to round every bar in the
app. .bottombar--tint rounds its current item's block by the same value; the line
and --icons bars run edge to edge and have no corner to round.
The default, --radius-surface
12px
18px
--radius-pill
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:var(--space-9); width:100%; max-width:760px">
<div>
<p class="text-muted" style="margin:0 0 var(--space-4) var(--space-5)">The default, <code>--radius-surface</code></p>
<nav class="bottombar bottombar--card" aria-label="Main">
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>
<div>
<p class="text-muted" style="margin:0 0 var(--space-4) var(--space-5)"><code>12px</code></p>
<nav class="bottombar bottombar--card" style="--bottombar-radius: 12px" aria-label="Main">
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>
<div>
<p class="text-muted" style="margin:0 0 var(--space-4) var(--space-5)"><code>18px</code></p>
<nav class="bottombar bottombar--card" style="--bottombar-radius: 18px" aria-label="Main">
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>
<div>
<p class="text-muted" style="margin:0 0 var(--space-4) var(--space-5)"><code>--radius-pill</code></p>
<nav class="bottombar bottombar--card" style="--bottombar-radius: var(--radius-pill)" aria-label="Main">
<div class="bottombar-accessory">
<i class="ri-upload-cloud-2-line"></i>
<span class="bottombar-accessory-text">Uploading scans <span class="text-muted">12 of 40</span></span>
<span class="bottombar-meter"><span class="progress"><span class="progress-bar" style="width:30%"></span></span></span>
<button class="btn btn-ghost btn-icon btn-sm" type="button" aria-label="Pause"><i class="ri-pause-line"></i></button>
</div>
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>
</div>Icons only
.bottombar--icons shows no label at all, with a short brand mark under the
current icon. The labels are still in the markup and still name each item, so write them.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<div class="bare-brand"><div class="brand-logo" style="background:var(--brand)"></div><strong>Dispatch</strong></div>
<div class="topbar-spacer"></div>
<button class="topbar-btn" aria-label="Notifications"><i class="ri-notification-3-line"></i></button>
</header>
<main class="page">
<h1>Orders</h1>
<div class="card">
<ul class="list">
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10248</span><span class="list-sub">Northwind Retail · 3 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10249</span><span class="list-sub">2 items · leaves 14:30</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10250</span><span class="list-sub">Address rejected</span></span>
<span class="list-meta"><span class="badge badge-danger">On hold</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10251</span><span class="list-sub">6 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10252</span><span class="list-sub">1 item · delivered</span></span>
<span class="list-meta"><span class="badge badge-go">Done</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10253</span><span class="list-sub">4 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10254</span><span class="list-sub">3 items · leaves 16:00</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10255</span><span class="list-sub">2 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
</ul>
</div>
</main>
<nav class="bottombar bottombar--icons" aria-label="Main">
<div class="bottombar-items">
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-search-line"></i></span>
<span class="bottombar-label">Search</span>
</button>
</div>
</nav>
</div>Menu first
Live — open the menu. A --start cell opens every page in a
sheet, so the bar holds the few places used most and the sheet holds
the rest. The sheet is an ordinary .nav. It is a real modal, so here it rises
from the bottom of the window rather than of the frame, as it would in the app.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<div class="bare-brand"><div class="brand-logo" style="background:var(--brand)"></div><strong>Dispatch</strong></div>
<div class="topbar-spacer"></div>
<button class="topbar-btn" aria-label="Notifications"><i class="ri-notification-3-line"></i></button>
</header>
<main class="page">
<h1>Orders</h1>
<div class="card">
<ul class="list">
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10248</span><span class="list-sub">Northwind Retail · 3 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10249</span><span class="list-sub">2 items · leaves 14:30</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10250</span><span class="list-sub">Address rejected</span></span>
<span class="list-meta"><span class="badge badge-danger">On hold</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10251</span><span class="list-sub">6 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10252</span><span class="list-sub">1 item · delivered</span></span>
<span class="list-meta"><span class="badge badge-go">Done</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10253</span><span class="list-sub">4 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10254</span><span class="list-sub">3 items · leaves 16:00</span></span>
<span class="list-meta"><span class="badge badge-info">Packed</span></span>
</a>
</li>
<li>
<a class="list-row" href="#">
<span class="list-main"><span class="list-title">Order 10255</span><span class="list-sub">2 items</span></span>
<span class="list-meta"><span class="badge badge-warn">Picking</span></span>
</a>
</li>
</ul>
</div>
</main>
<nav class="bottombar bottombar--tint" aria-label="Main">
<div class="bottombar-items">
<button class="bottombar-item bottombar-item--start" type="button" onclick="document.getElementById('dispatch-all-pages').showModal()">
<span class="bottombar-icon"><i class="ri-menu-line"></i></span>
<span class="bottombar-label">All pages</span>
</button>
<a class="bottombar-item active" href="#" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i><span class="bottombar-count">12</span></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
<a class="bottombar-item" href="#">
<span class="bottombar-icon"><i class="ri-user-line"></i></span>
<span class="bottombar-label">Account</span>
</a>
</div>
</nav>
<dialog class="drawer sheet" data-sheet id="dispatch-all-pages" aria-labelledby="dispatch-all-pages-title">
<div class="sheet-handle"></div>
<div class="drawer-header">
<h3 id="dispatch-all-pages-title">All pages</h3>
<button class="modal-close" type="button" aria-label="Close" onclick="this.closest('dialog').close()"><i class="ri-close-line"></i></button>
</div>
<div class="drawer-body drawer-body--flush">
<nav class="nav">
<div class="nav-scroll">
<div class="nav-section">
<span class="nav-section-label">Orders</span>
<a class="nav-link active" href="#" aria-current="page"><i class="ri-inbox-line"></i><span>Queue</span><span class="nav-count">3</span></a>
<a class="nav-link" href="#"><i class="ri-pause-circle-line"></i><span>On hold</span></a>
<a class="nav-link" href="#"><i class="ri-arrow-go-back-line"></i><span>Returns</span></a>
</div>
<div class="nav-section">
<span class="nav-section-label">Stock</span>
<a class="nav-link" href="#"><i class="ri-price-tag-3-line"></i><span>Items</span></a>
<a class="nav-link" href="#"><i class="ri-map-pin-line"></i><span>Locations</span></a>
<a class="nav-link" href="#"><i class="ri-arrow-left-right-line"></i><span>Transfers</span></a>
</div>
<div class="nav-section">
<span class="nav-section-label">Administration</span>
<a class="nav-link" href="#"><i class="ri-team-line"></i><span>Users</span></a>
<a class="nav-link" href="#"><i class="ri-file-list-3-line"></i><span>Audit log</span></a>
</div>
</div>
</nav>
</div>
</dialog>
</div>Actions
On a record the bar holds what can be done to it rather than where to go: buttons, a
role="toolbar" and no current item. Keep it to the actions used most, and put
the rest behind the --end cell.
<div class="content" style="flex:none; width:100%; max-width:360px; height:600px; border:1px solid var(--border); border-radius:var(--radius-surface); overflow:hidden">
<header class="topbar">
<a class="topbar-btn topbar-btn--start" href="#" aria-label="Back to orders"><i class="ri-arrow-left-line"></i></a>
<div class="topbar-spacer"></div>
</header>
<main class="page">
<h1>Order 10250</h1>
<div class="alert alert-danger"><i class="ri-error-warning-line"></i><span>The carrier rejected the delivery address.</span></div>
<div class="card">
<div class="card-body">
<div class="kv"><span class="k">Customer</span><span class="v">Northwind Retail</span></div>
<div class="kv"><span class="k">Items</span><span class="v">3</span></div>
<div class="kv"><span class="k">Assigned</span><span class="v">Nobody yet</span></div>
</div>
</div>
</main>
<div class="bottombar" role="toolbar" aria-label="Order actions">
<div class="bottombar-items">
<button class="bottombar-item" type="button">
<span class="bottombar-icon"><i class="ri-user-add-line"></i></span>
<span class="bottombar-label">Assign to me</span>
</button>
<button class="bottombar-item" type="button">
<span class="bottombar-icon"><i class="ri-map-pin-line"></i></span>
<span class="bottombar-label">Change address</span>
</button>
<button class="bottombar-item" type="button">
<span class="bottombar-icon"><i class="ri-printer-line"></i></span>
<span class="bottombar-label">Print label</span>
</button>
<button class="bottombar-item bottombar-item--end" type="button">
<span class="bottombar-icon"><i class="ri-more-2-fill"></i></span>
<span class="bottombar-label">More actions</span>
</button>
</div>
</div>
</div>On a phone only
.layout--bottombar on .layout shows the bottom bar below 560px and
hides the sidebar there, and does the reverse above it. Without it the bar shows at every
width, which is what an app built only for phones wants. The bar already holds itself clear
of a home indicator; Safe area is for a bar of your own.
<div class="layout layout--bottombar">
<aside class="sidebar">…the sidebar, hidden below 560px…</aside>
<div class="content">
<header class="topbar">…</header>
<main class="page">…</main>
<!-- Shown below 560px only. data-hide-on-scroll steps the items away while the
reader scrolls down, and brings them back on the way up. -->
<nav class="bottombar" aria-label="Main" data-hide-on-scroll>
<div class="bottombar-items">
<a class="bottombar-item active" href="/orders" aria-current="page">
<span class="bottombar-icon"><i class="ri-inbox-line"></i><span class="bottombar-count">3</span></span>
<span class="bottombar-label">Orders</span>
</a>
<a class="bottombar-item" href="/pick">
<span class="bottombar-icon"><i class="ri-barcode-box-line"></i></span>
<span class="bottombar-label">Pick</span>
</a>
<a class="bottombar-item" href="/stock">
<span class="bottombar-icon"><i class="ri-archive-stack-line"></i></span>
<span class="bottombar-label">Stock</span>
</a>
</div>
</nav>
</div>
</div>