Prototype Library

Sidebar Nav

Collapsible side navigation with grouped sections, accordion children, badges, and a collapse-to-rail toggle. A Lit web component, because the collapse and accordion states are real runtime behavior.

Inherited wc import '@esa/ecology/esa-sidebar-nav';

Preview

Use the chevrons button at the top to collapse to an icon rail; click Reports to expand its children.

<esa-sidebar-nav id="demo"></esa-sidebar-nav>

<script>
  const el = document.getElementById('demo');
  el.items = [
    { label: 'Dashboard', href: '/dashboard', active: true, group: 'Main' },
    { label: 'Projects', href: '/projects', badge: 12, group: 'Main' },
    { label: 'Reports', group: 'Main', children: [
      { label: 'Monthly', href: '/reports/monthly' },
      { label: 'Quarterly', href: '/reports/quarterly' },
    ] },
    { label: 'Team', href: '/team', group: 'Admin' },
    { label: 'Billing', href: '/billing', group: 'Admin', disabled: true },
    { label: 'Settings', href: '/settings', group: 'Admin' },
  ];
</script>

States

Non-collapsible — set collapsible="false" to hide the toggle and lock the sidebar at full width.

<esa-sidebar-nav id="demo2" collapsible="false"></esa-sidebar-nav>

API

PropTypeDefaultDescription
items EsaSidebarNavItem[] [] Nav items (property, set via JS). Each is { label; href?; icon?; badge?; children?; disabled?; group?; active? }. Consecutive items sharing a group render under a group heading.
collapsed boolean false Collapses to an icon rail. Reflected as an attribute.
collapsible boolean true Shows the collapse toggle. Set false to lock the sidebar open.

Events

EventTypeDefaultDescription
collapsedchange CustomEvent — Fired when the collapse toggle is clicked. detail: { collapsed: boolean }. Bubbles and composed.

items is an array property — set it in JS, not as an attribute. Each EsaSidebarNavItem.icon is a raw inline SVG string.

Slots

PropTypeDefaultDescription
header slot — Logo / brand area pinned above the nav list.

Accessibility

  • Renders a <nav aria-label="Sidebar navigation"> over a semantic list.
  • Active leaf links carry aria-current="page"; parent accordions expose aria-expanded.
  • The collapse toggle's aria-label flips between Collapse sidebar / Expand sidebar.
  • Disabled items are removed from the tab order (tabindex="-1", pointer-events: none).