RRenDSv0.13.0
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

<ren-sidebar aria-label="Workspace">
  <a class="ren-sidebar-brand" href="/">Acme</a>
  <ul class="ren-sidebar-section">
    <li><a aria-current="page">Dashboard</a></li>
    <li><a>Projects</a></li>
  </ul>
</ren-sidebar>

Reference

API

ClassEffect
.ren-sidebarThe aside container. Use with aria-label.
.ren-sidebar-brandTop brand / logo link.
.ren-sidebar-sectionOne group of links. Optional .ren-sidebar-section-title as a heading.
.ren-sidebar-footerBottom-pinned slot for account menu, version info.
.ren-sidebar-collapsedState class for icon-only mode.

Inclusive by default

Accessibility

  • Always <aside> with descriptive aria-label.
  • Mark active route with aria-current="page".
  • On mobile (sub-720 px), the sidebar becomes a Sheet triggered from the Nav.