Patterns

Navigation

Side navigation and in-page anchor patterns. Left-bar active indicators, compact uppercase labels, and scroll-linked highlighting.

Source file: styles/components/side-nav.css

Side Navigation — .wm-side-nav

Sticky sidebar nav with left-bar active indicator. Use .active or aria-current to mark the current item.

The active link gets a 2 px left border in --wm-color-text and a muted surface background. Hover reveals the same background without the border. 

<ul class="wm-side-nav">
  <li><a href="#summary" class="active">Summary</a></li>
  <li><a href="#experience">Experience</a></li>
  <li><a href="#skills">Skills</a></li>
  <li><a href="#projects">Projects</a></li>
</ul>

<!-- Or use aria-current for screen reader support -->
<li><a href="#summary" aria-current="true">Summary</a></li>

Docs Sidebar (this page)

The sidebar you see on the left uses the same left-bar pattern, implemented via .docs-nav-link in showcase.css. Token references are identical to .wm-side-nav.

Tab Bar — .tab-bar / .tab-btn

Segmented control for switching between views or sub-sections. Add .tab-btn-active to the current tab. Use .tab-count to show a numeric badge inside the tab button.

Source: styles/components/tab-bar.css 

<div class="tab-bar" role="tablist">
  <button class="tab-btn tab-btn-active" role="tab" aria-selected="true">
    Active <span class="tab-count">12</span>
  </button>
  <button class="tab-btn" role="tab" aria-selected="false">Pending</button>
  <button class="tab-btn" role="tab" aria-selected="false">Archived</button>
</div>

Viewport-Fixed Controls Nav — .floating-nav

CV-style utility nav cluster pinned to the viewport corner. Use for theme/view/print controls that should remain visible while scrolling.

This pattern mirrors the resume's fixed control cluster (.controls). In this embedded demo we override to position:absolute inside a container so it is visible without covering the whole docs page.

Scroll content below; this control cluster remains pinned when used with position:fixed. 

<div class="floating-nav">
  <button class="btn-pill" type="button">Light</button>
  <button class="btn-pill" type="button">Summary</button>
  <button class="btn-pill" type="button">Print</button>
</div>

<!-- Left-pinned variant -->
<div class="floating-nav floating-nav-left">...</div>

Status Toggle — .status-toggle / .status-toggle-btn

Pill-shaped filter bar for multi-state status filtering. Each button carries a semantic color modifier. The .status-toggle-btn-active class fills with a tonal background matching the status color. Inactive buttons show a colored border hint so users know what color the filter will become when selected.

Source: styles/components/tab-bar.css 

<div class="status-toggle" role="group">
  <button class="status-toggle-btn status-toggle-btn-active" type="button">
    All <span class="tab-count">18</span>
  </button>
  <button class="status-toggle-btn status-toggle-btn-success" type="button">
    Confirmed <span class="tab-count">6</span>
  </button>
  <button class="status-toggle-btn status-toggle-btn-warning" type="button">
    Pending <span class="tab-count">3</span>
  </button>
  <button class="status-toggle-btn status-toggle-btn-muted" type="button">
    Cancelled <span class="tab-count">9</span>
  </button>
</div>

Checkbox Filter — .checkbox-filter-group

Vertical list of labeled checkbox rows used inside sidebar filter panels. Each row is a full-width <label> that wraps the checkbox so the entire row is tappable. An optional count badge sits at the far right.

Source: styles/components/checkbox-filter.css 

<div class="checkbox-filter-group">
  <label class="checkbox-filter-label">
    <input type="checkbox" checked />
    <span class="checkbox-filter-name">Monthly</span>
    <span class="checkbox-filter-count">14</span>
  </label>
  <label class="checkbox-filter-label">
    <input type="checkbox" />
    <span class="checkbox-filter-name">Annual</span>
    <span class="checkbox-filter-count">3</span>
  </label>
</div>