sidebar

Modern app sidebar. Header, content, footer, collapsible, mobile slide-in.

status: stable js: none support: baseline

Preview

Markup

<aside class="sidebar"><div class="sidebar-header"><a class="sidebar-brand"><span class="sidebar-brand-logo">…</span><span class="sidebar-brand-text">Brand</span></a></div><nav class="sidebar-content"><div class="sidebar-group"><div class="sidebar-group-label">Group</div><ul class="sidebar-menu"><li class="sidebar-menu-item"><a class="sidebar-menu-button" aria-current="page"><svg>…</svg><span>Item</span></a></li></ul></div></nav><div class="sidebar-footer">…</div></aside>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/sidebar.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add sidebar

Accessibility

nav landmark; mobile reveal via a CSS-only checkbox toggle

Classes

.sidebar .sidebar-header .sidebar-brand .sidebar-brand-logo .sidebar-brand-text .sidebar-content .sidebar-group .sidebar-group-label .sidebar-menu .sidebar-menu-item .sidebar-menu-button .sidebar-menu-badge .sidebar-menu-sub .sidebar-menu-sub-button .sidebar-footer .sidebar-menu-action .sidebar-separator

Dependencies

base/tokens