Navigation

Sidebar

App navigation with a user, search, active item with a counter and a team footer.

data-u="nav"

Example

<article class="u-card u-wall" data-wall="sidebar">
  <nav class="u-side" data-u="nav" aria-label="Main navigation">
    <div class="u-side__user"><span class="u-avatar u-avatar--sm">A</span><b>Ana Ribeiro <svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 15 5 5 5-5M7 9l5-5 5 5"/></svg></b><button type="button" class="u-btn u-btn--ghost u-btn--icon u-btn--sm" aria-label="Collapse menu"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/></svg></button></div>
    <label class="u-search"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><input type="search" placeholder="Quick search" aria-label="Quick search"><kbd class="u-kbd">⌘L</kbd></label>
    <div class="u-side__nav">
      <button type="button" class="u-side__item" aria-current="page"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Main<span class="u-side__count">152</span></button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18"/></svg>Projects</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="m3 11 18-5v12L3 14z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></svg>Deploys</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>Calendar</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2 3 7v2h18V7z"/></svg>Billing</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M6 8l12 8M18 8 6 16"/></svg>Reports</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a9 9 0 1 1-4-7.5"/><path d="M19 3v4M17 5h4"/></svg>Assistant</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg>Automations</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>Profile</button>
    </div>
    <div class="u-side__spacer"></div>
    <div class="u-side__nav">
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 14v-2a9 9 0 0 1 18 0v2"/><path d="M21 15a2 2 0 0 1-2 2h-1v-6h1a2 2 0 0 1 2 2zM3 15a2 2 0 0 0 2 2h1v-6H5a2 2 0 0 0-2 2z"/></svg>Support</button>
      <button type="button" class="u-side__item"><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h10M18 6h2M4 12h2M10 12h10M4 18h8M16 18h4"/><circle cx="16" cy="6" r="2"/><circle cx="8" cy="12" r="2"/><circle cx="14" cy="18" r="2"/></svg>Settings</button>
    </div>
    <div class="u-side__team"><span class="u-avatar u-avatar--sm" data-c="1">L</span><div><b>leal labs</b><span>[email protected]</span></div><svg class="u-i" viewBox="0 0 24 24" aria-hidden="true" style="color:var(--fg-3)"><path d="m6 9 6 6 6-6"/></svg></div>
  </nav>
</article>

Installation

Sidebar ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses sidebar:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-sidebar

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

No props. The nav registration moves aria-current to the clicked item.

Classes and variants

Class	What it does
`u-side`	The sidebar's nav.
`u-side__user`	User row.
`u-side__nav`	Item list.
`u-side__item`	Item: button or a. The active one has `aria-current="page"`.
`u-side__spacer`	Pushes the footer down.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
nav	`aria-label`	Name the navigation.
active item	`aria-current="page"`	The JS switches it on click. A link with `href="#"` doesn't navigate.

Keyboard

Key	Does
Tab	moves through the items
Enter	activates the item