Sidenav

A sidebar navigation component for application dashboards and admin panels. Supports collapsible accordion groups, an icon-strip mode with hover-expand and CSS tooltip fallback for collapsed labels, a mobile slide-in drawer with blurred backdrop, optional localStorage persistence of the collapsed and group state, and a full programmatic API. The same toggle button works on both desktop (collapse/expand) and mobile (open/close drawer).

Real-World Example

The demo below shows a complete admin shell. Click the sidebar toggle button to collapse to icon-strip mode — hover over it to expand temporarily. On mobile the sidebar slides in as a full-screen overlay.

<aside class="wf-sidenav" data-wf-sidenav>

  <!-- Header -->
  <div class="wf-sidenav-header">
    <a class="wf-sidenav-brand" href="/">
      <div class="wf-sidenav-logo-wrap">
        <i class="icon bolt" aria-hidden="true"></i>
      </div>
      <span class="wf-sidenav-brand-name">Acme Inc</span>
    </a>
    <button class="wf-sidenav-collapse-btn" data-wf-sidenav-toggle aria-label="Toggle sidebar">
      <i class="icon chevrons left" aria-hidden="true"></i>
    </button>
  </div>

  <!-- User block -->
  <div class="wf-sidenav-user">
    <div class="wf-sidenav-avatar">AK</div>
    <div class="wf-sidenav-user-info">
      <span class="wf-sidenav-user-name">Alex Kumar</span>
      <span class="wf-sidenav-user-role">Administrator</span>
    </div>
  </div>

  <!-- Body -->
  <div class="wf-sidenav-body">
    <span class="wf-sidenav-label">Main</span>

    <a class="wf-sidenav-item wf-active" href="/dashboard" title="Dashboard" aria-current="page">
      <i class="icon home wf-sidenav-icon" aria-hidden="true"></i>
      <span class="wf-sidenav-text">Dashboard</span>
    </a>

    <a class="wf-sidenav-item" href="/analytics" title="Analytics">
      <i class="icon chart bar wf-sidenav-icon" aria-hidden="true"></i>
      <span class="wf-sidenav-text">Analytics</span>
    </a>

    <hr class="wf-sidenav-divider">
    <span class="wf-sidenav-label">Manage</span>

    <!-- Collapsible group -->
    <div class="wf-sidenav-group" data-wf-sidenav-group>
      <button class="wf-sidenav-item wf-sidenav-item--parent" aria-expanded="false" title="Users">
        <i class="icon user multiple wf-sidenav-icon" aria-hidden="true"></i>
        <span class="wf-sidenav-text">Users</span>
        <i class="icon chevron down wf-sidenav-chevron" aria-hidden="true"></i>
      </button>
      <div class="wf-sidenav-sub">
        <div>
          <a class="wf-sidenav-sub-item" href="/users">All Users</a>
          <a class="wf-sidenav-sub-item" href="/users/roles">Roles</a>
        </div>
      </div>
    </div>

    <!-- Item with badge -->
    <a class="wf-sidenav-item" href="/inbox" title="Inbox">
      <i class="icon mail wf-sidenav-icon" aria-hidden="true"></i>
      <span class="wf-sidenav-text">Inbox</span>
      <span class="wf-sidenav-badge">3</span>
    </a>
  </div>

  <!-- Footer -->
  <div class="wf-sidenav-footer">
    <a class="wf-sidenav-item" href="/settings" title="Settings">
      <i class="icon settings wf-sidenav-icon" aria-hidden="true"></i>
      <span class="wf-sidenav-text">Settings</span>
    </a>
  </div>

</aside>

Anatomy

A sidenav is built from four vertical sections. The wf-sidenav-header holds the brand and the collapse toggle button. The optional wf-sidenav-user block sits immediately below it. The scrollable wf-sidenav-body contains all navigation items, labels, groups, and dividers. The wf-sidenav-footer is pinned to the bottom and is used for utility links like Settings and Help. All sections except the header and body are optional.

<aside class="wf-sidenav" data-wf-sidenav>

  <!-- ① Header — brand + collapse button -->
  <div class="wf-sidenav-header">
    <a class="wf-sidenav-brand" href="/">
      <div class="wf-sidenav-logo-wrap"><i class="icon bolt"></i></div>
      <span class="wf-sidenav-brand-name">Brand</span>
    </a>
    <button class="wf-sidenav-collapse-btn" data-wf-sidenav-toggle aria-label="Toggle sidebar">
      <i class="icon chevrons left"></i>
    </button>
  </div>

  <!-- ② User block (optional) -->
  <div class="wf-sidenav-user">
    <div class="wf-sidenav-avatar">JD</div>
    <div class="wf-sidenav-user-info">
      <span class="wf-sidenav-user-name">Jane Doe</span>
      <span class="wf-sidenav-user-role">Editor</span>
    </div>
  </div>

  <!-- ③ Body — scrollable nav items -->
  <div class="wf-sidenav-body">
    <span class="wf-sidenav-label">Section</span>

    <a class="wf-sidenav-item" href="/page" title="Page">
      <i class="icon home wf-sidenav-icon"></i>
      <span class="wf-sidenav-text">Page</span>
    </a>

    <!-- add groups, badges, dividers here -->
  </div>

  <!-- ④ Footer (optional) — pinned to bottom -->
  <div class="wf-sidenav-footer">
    <a class="wf-sidenav-item" href="/settings" title="Settings">
      <i class="icon settings wf-sidenav-icon"></i>
      <span class="wf-sidenav-text">Settings</span>
    </a>
  </div>

</aside>

Collapsible Groups

Wrap a parent trigger button and a div.wf-sidenav-sub in a div.wf-sidenav-group[data-wf-sidenav-group] . The trigger button must carry the wf-sidenav-item--parent modifier class. The script toggles the data-wf-open attribute on the group element and uses a max-height transition to reveal the sub-list. By default, groups behave as an accordion — opening one closes the others. See Multi-Open to change this.

Add data-wf-open to a group in the HTML to start it open. A group whose sub-list contains an item with wf-active or aria-current="page" is also automatically opened by the script on init, and the parent trigger gains wf-active to highlight the active section.

<!-- Start open with data-wf-open -->
<div class="wf-sidenav-group" data-wf-sidenav-group data-wf-open>

  <!-- Trigger -->
  <button class="wf-sidenav-item wf-sidenav-item--parent" aria-expanded="false" title="Users">
    <i class="icon users wf-sidenav-icon" aria-hidden="true"></i>
    <span class="wf-sidenav-text">Users</span>
    <i class="icon chevron down wf-sidenav-chevron" aria-hidden="true"></i>
  </button>

  <!-- Sub-list -->
  <div class="wf-sidenav-sub">
    <div>
      <a class="wf-sidenav-sub-item wf-active" href="/users">All Users</a>
      <a class="wf-sidenav-sub-item" href="/users/roles">Roles</a>
      <a class="wf-sidenav-sub-item" href="/users/permissions">Permissions</a>
    </div>
  </div>

</div>

Badges & Dividers

Add a span.wf-sidenav-badge inside any item to show a notification count. The badge is positioned after wf-sidenav-text via margin-inline-start: auto and hidden automatically in collapsed icon-strip mode. Use hr.wf-sidenav-divider between sections of the body or footer to add a subtle horizontal rule.

<!-- Item with badge -->
<a class="wf-sidenav-item" href="/inbox" title="Inbox">
  <i class="icon mail wf-sidenav-icon" aria-hidden="true"></i>
  <span class="wf-sidenav-text">Inbox</span>
  <span class="wf-sidenav-badge">3</span>
</a>

<!-- Divider between nav sections -->
<hr class="wf-sidenav-divider">

Collapsed Strip

On desktop, clicking the collapse toggle shrinks the sidebar to a 64 px icon-strip by adding data-wf-collapsed to the root element. All text labels, chevrons, and badges are hidden; only icons remain. Hovering the strip temporarily expands it back to full width so the user can read labels and interact with groups — the expansion uses pure CSS ( :hover + @starting-style for a smooth opacity fade-in).

Add a title attribute to every wf-sidenav-item to enable the built-in CSS tooltip that appears next to the icon when the strip is collapsed and not hovered. Start the sidebar already collapsed by adding data-wf-collapsed directly in the HTML.

<!-- Start in collapsed state -->
<aside class="wf-sidenav" data-wf-sidenav data-wf-collapsed>
  ...

  <!-- title enables the CSS tooltip in stripped mode -->
  <a class="wf-sidenav-item" href="/analytics" title="Analytics">
    <i class="icon chart bar wf-sidenav-icon"></i>
    <span class="wf-sidenav-text">Analytics</span>
  </a>

  ...
</aside>

Mobile Drawer

Below the breakpoint (default 768 px) the sidebar switches to position: fixed and is hidden off-screen. Any element carrying data-wf-sidenav-toggle — whether inside or outside the sidebar — will open or close it. Use an external toggle in your topbar to provide a hamburger button that is visible when the sidebar is hidden. The script appends a wf-sidenav-backdrop to <body> ; clicking it closes the drawer.

<!-- External toggle (e.g. inside a topbar) -->
<button data-wf-sidenav-toggle aria-label="Open menu">
  <i class="icon menu" aria-hidden="true"></i>
</button>

<!-- Sidebar -->
<aside class="wf-sidenav" data-wf-sidenav>
  <div class="wf-sidenav-header">
    <a class="wf-sidenav-brand" href="/">...</a>
    <!-- Internal close button inside the sidebar header -->
    <button class="wf-sidenav-collapse-btn" data-wf-sidenav-toggle aria-label="Close sidebar">
      <i class="icon chevrons left"></i>
    </button>
  </div>
  ...
</aside>

<!-- Backdrop is injected by the script; no markup needed -->

Multi-Open

By default, the sidenav is in accordion mode — opening a group closes all others. Add data-wf-multi-open to the root element to allow any number of groups to be open at the same time.

<aside class="wf-sidenav" data-wf-sidenav data-wf-multi-open>
  ...
</aside>

Persistence

Add data-wf-persist-collapsed to remember the collapsed/expanded state in localStorage across page loads. Add data-wf-persist-groups to remember which groups the user has opened. Group state is stored by index position inside the sidebar so it is best suited to a sidebar whose item order does not change between pages.

<!-- Persist collapsed state only -->
<aside class="wf-sidenav" data-wf-sidenav data-wf-persist-collapsed>...</aside>

<!-- Persist both collapsed state and open groups -->
<aside class="wf-sidenav" data-wf-sidenav data-wf-persist-collapsed data-wf-persist-groups>...</aside>

Data Attributes

CSS Properties

All tokens are scoped to .wf-sidenav so multiple sidebars on the same page can have independent themes.

Programmatic API

Each initialized sidebar exposes an instance on el._wfSidenav .

// Auto-init instance
const sidebar = document.querySelector('[data-wf-sidenav]')._wfSidenav

sidebar.collapse()
sidebar.expand()
sidebar.toggle()
sidebar.openMobile()
sidebar.closeMobile()
sidebar.destroy()

// Manual init with options
import { WojoSidenav } from '/assets/js/wf-production.min.js'

const instance = new WojoSidenav(el, {
    multiOpen:        false,
    collapsed:        false,
    breakpoint:       1024,
    persistCollapsed: true,
    persistGroups:    true,
}).init()

Events

All events are dispatched on the sidebar root element and bubble normally.

const sidebar = document.querySelector('[data-wf-sidenav]')

sidebar.addEventListener('wf:sidenav-collapse', e => {
  console.log('Collapsed:', e.detail.collapsed)
  document.querySelector('.main-content').classList.toggle('sidebar-collapsed', e.detail.collapsed)
})

sidebar.addEventListener('wf:sidenav-mobile-open', () => {
  document.body.classList.add('no-scroll')
})

sidebar.addEventListener('wf:sidenav-mobile-close', () => {
  document.body.classList.remove('no-scroll')
})

Class Reference

All modifier classes available on .wf-sidenav