RRenDSv0.14.1
GitHubGet started

Pattern

Sidebar Requires JS

Left navigation column for app shells. Collapsible sections, active-route indicator, footer for account / sign-out. The post-login surface that runs every workspace app.

About

Overview

Sidebars present persistent navigation in admin / dashboard apps. They give users a stable mental map of "what's in this app". Stay narrow (240–280 px), collapsible to icons-only on tight screens, scroll independently from the main content.

Live

Demo

Acme
Settings

Main content. Above 48rem, the ☰ button collapses the sidebar to icons and back, and the choice is written to localStorage. Below 48rem the sidebar leaves the flow and waits off-canvas as a drawer, which is why only this column shows on a narrow screen.

<div class="ren-sidebar-layout">
  <ren-sidebar class="ren-sidebar" aria-label="Workspace">
    <div class="ren-sidebar-header">
      <a class="ren-sidebar-item" href="/">
        <span class="ren-sidebar-item-icon" aria-hidden="true">◆</span>
        <span class="ren-sidebar-item-text">Acme</span>
      </a>
      <button class="ren-sidebar-toggle" type="button" aria-label="Toggle sidebar">
        <span aria-hidden="true">☰</span>
      </button>
    </div>

    <nav class="ren-sidebar-nav" aria-label="Workspace sections">
      <a class="ren-sidebar-item active" href="/dashboard" aria-current="page" data-tooltip="Dashboard">
        <span class="ren-sidebar-item-icon" aria-hidden="true">▤</span>
        <span class="ren-sidebar-item-text">Dashboard</span>
      </a>
      <a class="ren-sidebar-item" href="/projects">…</a>
    </nav>
  </ren-sidebar>

  <main class="ren-sidebar-main">…</main>
</div>

The preview above is the same markup with one deviation: its content column is a <div class="ren-sidebar-main"> rather than a <main>, because this documentation page already owns the only main landmark on the page. In an app shell, use <main>.

Reference

API

ClassEffect
.ren-sidebar-layoutThe app shell. Flex row holding the sidebar and the content column.
.ren-sidebarOn the <ren-sidebar> host. Fixed width, own scroll, collapses to icons.
.ren-sidebar-headerTop row: brand link plus the collapse toggle.
.ren-sidebar-navThe <nav> landmark wrapping the items.
.ren-sidebar-itemOne link. Holds .ren-sidebar-item-icon and .ren-sidebar-item-text; the text fades out when collapsed.
.ren-sidebar-sectionOne group of links. Optional .ren-sidebar-section-label as its caption.
.ren-sidebar-footerBottom-pinned slot for account menu, version info.
.ren-sidebar-toggleCollapse button. Needs an aria-label; hidden under 48rem.
.ren-sidebar-mainThe content column beside the sidebar.
[data-collapsed]State attribute on the host for icon-only mode. Set by the toggle, persisted in localStorage.
[data-open]State attribute on the host for the mobile drawer, paired with .ren-sidebar-overlay.

Inclusive by default

Accessibility

  • The landmark is the inner <nav class="ren-sidebar-nav"> — label it whenever the page carries more than one navigation.
  • Mark active route with aria-current="page"; the .active class only exists for styling parity.
  • Collapsed items keep their link text in the accessibility tree, so their names survive icon-only mode.
  • Under 48rem the sidebar becomes an off-canvas drawer: [data-open] on the host, dismissed with Escape or a click on .ren-sidebar-overlay.