Sidebar navigation component — web, retro style

Sidebar navigation UI component for websites and web apps, shown in Wardline, a fictional developer product. Shows a vertical app sidebar with a current page, a count badge, a collapsible Reports group, a locked item and a collapse-to-icons button, plus every link state (default, hover, focus-visible, current, disabled). Retro style: warm cream, soft Fraunces headings with DM Sans, outlined cards and offset colour shadows. Comes with copyable HTML, CSS and a few lines of plain JavaScript (keyboard support and ARIA per the WAI-ARIA Authoring Practices), a live demo, and a DESIGN.md with light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md

Pattern: Sidebar navigation
Device: Web
Style: Retro
Product (fictional): Wardline
Category: Developer

Spec

Colours (light): background #fff8ee · surface #ffffff · text #291c07 · muted #716048 · primary #a22d38 · accent #508e48
Colours (dark): background #170d01 · surface #261906 · text #f8efe3 · muted #bfaf97 · primary #ec7d7f · accent #85c57d
Fonts: Fraunces (headings), DM Sans (body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark: Both included; follows the system setting
ARIA pattern: Disclosure (navigation menu) (WAI-ARIA Authoring Practices)
Keyboard: Tab through links; Enter or Space opens a group
States: default, hover, focus-visible, selected, disabled

sidebar-navwebdeveloperbadgenavigation

Code

Paste the HTML where the component goes, the CSS into your stylesheet and the script before </body>. The tokens block holds the light and dark colours; swap in your own.

HTML

<div class="mgd-side-demo">
<nav class="mgd-side" id="side" aria-label="Main">
  <div class="mgd-side__top"><span class="mgd-side__brand"><b class="mgd-side__mark" aria-hidden="true"></b><span>Wardline</span></span>
    <button class="mgd-side__collapse" type="button" aria-expanded="true" aria-controls="side" aria-label="Collapse sidebar"><svg class="i" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button></div>
  <ul>
    <li><a class="mgd-side__link" href="#overview" aria-current="page"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="mgd-side__label">Overview</span></a></li>
    <li><a class="mgd-side__link" href="#alerts"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 20.5a2 2 0 0 0 4 0"/></svg><span class="mgd-side__label">Alerts</span><span class="mgd-side__count"><span class="mgd-sr">, </span>3<span class="mgd-sr"> new</span></span></a></li>
    <li><a class="mgd-side__link" href="#assets"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z"/></svg><span class="mgd-side__label">Assets</span></a></li>
    <li><button class="mgd-side__link" type="button" aria-expanded="true" aria-controls="side-reports"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg><span class="mgd-side__label">Reports</span><span class="mgd-side__chev"><svg class="i" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 9l7 7 7-7"/></svg></span></button>
      <ul class="mgd-side__sub" id="side-reports">
        <li><a class="mgd-side__link" href="#weekly"><span class="mgd-side__label">Weekly summary</span></a></li>
        <li><a class="mgd-side__link" href="#compliance"><span class="mgd-side__label">Compliance</span></a></li>
        <li><a class="mgd-side__link" href="#exports"><span class="mgd-side__label">Exports</span></a></li>
      </ul></li>
    <li><a class="mgd-side__link" role="link" aria-disabled="true"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg><span class="mgd-side__label">Audit log (Enterprise)</span></a></li>
  </ul>
  <ul class="mgd-side__foot"><li><a class="mgd-side__link" href="#settings"><svg class="i" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1"/></svg><span class="mgd-side__label">Settings</span></a></li></ul>
</nav>
<div class="mgd-side-main"><h3>Overview</h3><p>4 open findings across 128 cloud assets. Last scan 6 minutes ago.</p></div>
</div>

CSS

/* Tokens (light + dark) */
:root{--bg:#fff8ee;--surface:#ffffff;--border:#e6d6bd;--text:#291c07;--muted:#716048;--primary:#a22d38;--on-primary:#ffffff;--accent:#508e48;--font-h:"Fraunces",Georgia,serif;--font-b:"DM Sans",system-ui,sans-serif;--hw:700;
--c-bw:2px;--c-line:var(--text);--c-r:10px;--c-pill:10px;--c-sh:3px 3px 0 var(--primary);--c-pop:5px 5px 0 var(--text);--c-tt:none;--c-ls:0;--c-fw:700;--c-fs:14px;--c-ring:3px solid var(--accent);--c-ind:3px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#170d01;--surface:#261906;--border:#3c2f1b;--text:#f8efe3;--muted:#bfaf97;--primary:#ec7d7f;--on-primary:#111111;--accent:#85c57d;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#170d01;--surface:#261906;--border:#3c2f1b;--text:#f8efe3;--muted:#bfaf97;--primary:#ec7d7f;--on-primary:#111111;--accent:#85c57d;color-scheme:dark}

/* Component */
.mgd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mgd-side-demo{display:grid;grid-template-columns:auto 1fr;min-height:540px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg)}
.mgd-side{width:248px;display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:var(--surface);border-right:var(--c-bw) solid var(--text);transition:width .16s}
.mgd-side__top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 14px}
.mgd-side__brand{display:flex;align-items:center;gap:10px;font:700 16px var(--font-h);white-space:nowrap;overflow:hidden}
.mgd-side__mark{flex:none;width:26px;height:26px;border-radius:var(--c-r);background:var(--primary)}
.mgd-side__collapse{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--text);border-radius:var(--c-pill);background:var(--bg);color:var(--text);cursor:pointer}
.mgd-side__collapse:hover{background:color-mix(in oklab,var(--primary) 10%,var(--bg))}
.mgd-side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mgd-side__link{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--c-r);background:none;color:var(--muted);font:500 14px/1 var(--font-b);text-transform:var(--c-tt);letter-spacing:var(--c-ls);text-decoration:none;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .12s,color .12s}
.mgd-side__link:hover,.mgd-side__link.is-hover{background:color-mix(in oklab,var(--primary) 9%,transparent);color:var(--text)}
.mgd-side__link:focus-visible,.mgd-side__link.is-focus,.mgd-side__collapse:focus-visible{outline:var(--c-ring);outline-offset:-2px}
.mgd-side__link[aria-current="page"],.mgd-side__link.is-on{color:var(--text);font-weight:600;background:color-mix(in oklab,var(--primary) 15%,transparent);box-shadow:inset 3px 0 0 var(--primary)}
.mgd-side__link[aria-disabled="true"],.mgd-side__link.is-off{opacity:.45;cursor:not-allowed;background:none}
.mgd-side__count{margin-left:auto;min-width:22px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:999px;background:var(--text);color:var(--bg);font:700 11px/1 var(--font-b);letter-spacing:0}
.mgd-side__chev{margin-left:auto;transition:transform .14s}
.mgd-side__link[aria-expanded="true"] .mgd-side__chev{transform:rotate(180deg)}
.mgd-side__sub{padding-left:28px!important}
.mgd-side__sub[hidden]{display:none!important}
.mgd-side__sub .mgd-side__link{min-height:34px;font-size:13px}
.mgd-side__label{overflow:hidden;text-overflow:ellipsis}
.mgd-side__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.mgd-side.is-collapsed{width:68px}
.mgd-side.is-collapsed .mgd-side__top{flex-direction:column}
.mgd-side.is-collapsed .mgd-side__label,.mgd-side.is-collapsed .mgd-side__brand span,.mgd-side.is-collapsed .mgd-side__chev,.mgd-side.is-collapsed .mgd-side__sub{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mgd-side.is-collapsed .mgd-side__count{position:absolute;margin:-18px 0 0 14px;min-width:16px;height:16px;font-size:10px}
.mgd-side.is-collapsed .mgd-side__link{justify-content:center;padding:0}
.mgd-side-main{padding:28px}
.mgd-side-main h3{margin:0 0 6px;font:var(--hw) 22px/1.2 var(--font-h)}
.mgd-side-main p{margin:0;color:var(--muted)}
@media (max-width:640px){.mgd-side-demo{grid-template-columns:1fr}
.mgd-side{width:auto;border-right:0;border-bottom:var(--c-bw) solid var(--border)}
.mgd-side.is-collapsed{width:auto}
.mgd-side-main{padding:18px}}
@media (prefers-reduced-motion:reduce){.mgd-side,.mgd-side *{transition:none!important;animation-duration:2.4s!important}}

JavaScript

document.querySelectorAll(".mgd-side").forEach(function (nav) {
  nav.addEventListener("click", function (e) {
    var b = e.target.closest("button[aria-expanded]"); if (!b) return;
    var open = b.getAttribute("aria-expanded") !== "true";
    b.setAttribute("aria-expanded", open);
    if (b.classList.contains("mgd-side__collapse")) { nav.classList.toggle("is-collapsed", !open); b.setAttribute("aria-label", open ? "Collapse sidebar" : "Expand sidebar"); }
    else document.getElementById(b.getAttribute("aria-controls")).hidden = !open;
  });
});

DESIGN.md

Component section (states, ARIA, keyboard)

## Component: Sidebar navigation

A vertical app navigation with a current page, a collapsible group and a collapse-to-icons button.

- **Pattern:** WAI-ARIA Authoring Practices, Disclosure (navigation menu) (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/)
- **Roles and attributes:** <nav aria-label="Main"> with a list of links; the current page has aria-current="page"; a group header is a button with aria-expanded and aria-controls (disclosure pattern); the collapse button has aria-expanded and aria-controls, and icon-only links keep their text for screen readers.
- **States drawn:** default, hover, focus-visible, selected, disabled
- **Focus:** a visible `:focus-visible` outline (3px solid accent), never removed
- **Style knobs (retro):** border 2px, corners 10px, shadow `3px 3px 0 var(--primary)`, labels sentence case
- **Motion:** transitions are short (≤160ms) and switched off under `prefers-reduced-motion: reduce`
- **Code:** HTML + CSS + a few lines of plain JavaScript (no libraries); colours come only from the tokens above, so light and dark both work

### Keyboard
- **Tab:** move between links and buttons
- **Enter / Space:** open or close a group, or collapse the sidebar

### Licence
Original Made Good Designs code: free to use and adapt in any project, including commercial ones, with no credit needed. Fonts are Google Fonts under their own licences.

Build this with your AI

Fonts: Fraunces + DM Sans (Google Fonts)

Ask your AIClaude ChatGPT Gemini

More ▾

Writing about this component?

More sidebar navigation components

web · minimal

web · editorial

web · brutalist

web · luxury

web · playful

web · corporate

web · monochrome

mobile · retro

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.