Patterns

Navigation

The WS Connect navigation system — left sidebar, top bar, icon rail, and global search — working together to orient users across the product.

Stable

Left Navigation

The primary wayfinding panel for WS Connect. It sits on the left edge of the viewport, shows the full site hierarchy, and supports expandable sub-groups.

Default
WS
Connect Woodruff Sawyer
Workspace
Dashboard
Acme Manufacturing Bright Horizons LLC Cascade Insurance
Policies Documents
Settings
Account settings
JD
Jane Doe Account Manager
Collapsed sub-group
WS
Connect Woodruff Sawyer
Workspace
Dashboard Policies Documents
RK
Rob Kim Broker 
<div class="ws-leftnav">
  <div class="ws-leftnav__header">
    <div class="ws-leftnav__logo-mark">WS</div>
    <div>
      <span class="ws-leftnav__brand">Connect</span>
      <span class="ws-leftnav__brand-sub">Woodruff Sawyer</span>
    </div>
  </div>

  <div class="ws-leftnav__menu">
    <div class="ws-leftnav__group">
      <div class="ws-leftnav__group-label">Workspace</div>

      <!-- Active leaf item -->
      <a href="/dashboard" class="ws-leftnav__item is-active">
        <svg>…</svg>
        Dashboard
      </a>

      <!-- Expandable group (aria-expanded toggles chevron + children) -->
      <button class="ws-leftnav__item" aria-expanded="true"
              data-leftnav-toggle="clients-sub">
        <svg>…</svg> Clients
        <svg class="ws-leftnav__chevron">…</svg>
      </button>
      <div class="ws-leftnav__children" id="clients-sub">
        <a href="#" class="ws-leftnav__child is-active">Acme Manufacturing</a>
        <a href="#" class="ws-leftnav__child">Bright Horizons LLC</a>
      </div>
    </div>
  </div>

  <div class="ws-leftnav__footer">
    <div class="ws-avatar ws-avatar--sm">JD</div>
    <div class="ws-leftnav__footer-text">
      <strong>Jane Doe</strong> Account Manager
    </div>
  </div>
</div>

Anatomy

1
Logo container

WS mark + "Connect" wordmark + product sub-label. Always links back to home.

2
Group label

Uppercase, muted — groups related items (Workspace, Settings, etc.).

3
Nav item (leaf)

16px icon + label. Active state: green-tinted background with a 2px green right-edge border.

4
Expandable group

A <button> with a trailing chevron. aria-expanded and data-leftnav-toggle drive the open/close behavior.

5
Sub-items

Indented children rendered inside .ws-leftnav__children. Add .is-collapsed to hide them.

6
Footer / user identity

Avatar + name + role. Pinned to bottom with a subtle top border.

Behavior notes

Clicking an expandable toggle sets aria-expanded and removes .is-collapsed from its children container. Only one group can be expanded at a time on mobile viewports.

Top Navigation Bar

A dark navy strip fixed to the top of each product page. Houses the brand logo, page breadcrumb, contextual tab strip, quick-action icons, and the user avatar.

With tab strip

JD
<div class="ws-topnav">
  <div class="ws-topnav__logo">
    <div class="ws-topnav__logo-mark">WS</div>
    <span class="ws-topnav__logo-name">Connect</span>
  </div>

  <!-- Tab strip (add .is-active to current tab) -->
  <div class="ws-topnav__tabs">
    <button class="ws-topnav__tab is-active">Overview</button>
    <button class="ws-topnav__tab">Coverage</button>
    <button class="ws-topnav__tab">Documents</button>
  </div>

  <div class="ws-topnav__actions">
    <button class="ws-topnav__btn" aria-label="Search"><svg>…</svg></button>
    <button class="ws-topnav__btn" aria-label="Notifications"><svg>…</svg></button>
    <div class="ws-topnav__sep"></div>
    <div class="ws-avatar ws-avatar--sm">JD</div>
  </div>
</div>

With breadcrumb trail

JD
<div class="ws-topnav">
  <div class="ws-topnav__logo">…</div>

  <!-- Breadcrumb variant (replaces tab strip) -->
  <nav class="ws-topnav__breadcrumb" aria-label="Breadcrumb">
    <a href="/clients">Clients</a>
    <span class="sep">/</span>
    <a href="/clients/acme">Acme Manufacturing Co.</a>
    <span class="sep">/</span>
    <span class="current">Policy WS-2026-004471</span>
  </nav>

  <div class="ws-topnav__actions">
    <button class="ws-topnav__btn" aria-label="Save"><svg>…</svg></button>
    <div class="ws-topnav__sep"></div>
    <div class="ws-avatar ws-avatar--sm">JD</div>
  </div>
</div>

Anatomy

1
Logo zone

WS mark + "Connect" label, separated from the center zone by a faint vertical rule.

2
Center zone — tab strip or breadcrumb

Use .ws-topnav__tabs for entity-level pages (policy detail, client profile). Switch to .ws-topnav__breadcrumb for deep-link context pages.

3
Action buttons

Icon-only 34×34 px targets. Use sparingly — max 4 icons before the avatar separator.

4
User avatar

Initials avatar that opens a profile/logout dropdown. Always rightmost.

A compact 56 px icon-only rail used when the full left nav is collapsed. It gives persistent access to primary sections while preserving maximum workspace width.

Default
JD
Item hover (tooltip)
Clients
<div class="ws-nav-rail">
  <div class="ws-nav-rail__logo">WS</div>

  <!-- Primary nav items — add is-active to current section -->
  <button class="ws-nav-rail__item is-active" title="Dashboard"><svg>…</svg></button>
  <button class="ws-nav-rail__item" title="Clients"><svg>…</svg></button>
  <button class="ws-nav-rail__item" title="Policies"><svg>…</svg></button>

  <div class="ws-nav-rail__divider"></div>

  <div class="ws-nav-rail__footer">
    <button class="ws-nav-rail__item" title="Settings"><svg>…</svg></button>
    <div class="ws-avatar ws-avatar--xs">JD</div>
  </div>
</div>

Anatomy

1
Logo container

36 × 36 px WS mark. Tapping it collapses or expands the full left nav.

2
Primary navigation items

40 × 40 px icon buttons. Active state: translucent green fill. The title attribute renders as a browser tooltip on hover — add a custom tooltip component for richer labels.

3
Secondary bar

Faint horizontal rule followed by settings and the user avatar. Always pushed to the bottom via margin-top: auto on .ws-nav-rail__footer.

Behaviors

  • Hover state — icon buttons gain a subtle white-tint background and the native title tooltip appears.
  • Active state — translucent green fill (.is-active) indicates the currently selected primary section.
  • Expand to full nav — clicking the logo or a dedicated expand button slides in the full .ws-leftnav panel; the rail hides or collapses behind it.
  • Sub-menu flyout — on hover, items with children can show a secondary panel flyout to the right of the rail (pattern handled at the app layout level).

Global search accessible from the top nav bar. Surfaces clients, policies, documents, and contacts with categorized, type-ahead results.

Trigger in top bar

JD
<button class="ws-nav-search__trigger" id="searchTrigger">
  <svg>…search icon…</svg>
  <span class="ws-nav-search__trigger-text">Search clients, policies, docs…</span>
  <kbd class="ws-nav-search__kbd">⌘K</kbd>
</button>

Search panel with results

Clients
AM
Acme Manufacturing Co.
Client · 14 active policies
AG
Acme Global Solutions
Client · 3 active policies
Policies
POL
WS-2026-004471 · General Liability
Acme Manufacturing Co. · Expires Mar 2027
Documents
PDF
Acme_Renewal_Binder_2026.pdf
Uploaded 14 Jan 2026 · 1.2 MB
<div class="ws-nav-search">
  <div class="ws-nav-search__panel">
    <!-- Input row -->
    <div class="ws-nav-search__input-row">
      <svg>…</svg>
      <input type="text" placeholder="Search clients, policies, documents…" />
    </div>

    <!-- Category filter chips -->
    <div class="ws-nav-search__cats">
      <button class="ws-nav-search__cat is-active">All</button>
      <button class="ws-nav-search__cat">Clients</button>
      <button class="ws-nav-search__cat">Policies</button>
      <button class="ws-nav-search__cat">Documents</button>
    </div>

    <!-- Results list -->
    <div class="ws-nav-search__results">
      <div class="ws-nav-search__section-label">Clients</div>

      <div class="ws-nav-search__result">
        <div class="ws-nav-search__result-icon ws-nav-search__result-icon--client">AM</div>
        <div class="ws-nav-search__result-body">
          <div class="ws-nav-search__result-name">Acme Manufacturing Co.</div>
          <div class="ws-nav-search__result-meta">Client · 14 active policies</div>
        </div>
      </div>

      <!-- More results… -->
    </div>
  </div>
</div>

Anatomy

1
Search trigger

Ghost button styled to look like an input. Shows placeholder text and the keyboard shortcut badge (⌘K / Ctrl+K). Clicking opens the search panel as a floating overlay or modal.

2
Input row

Full-width text input with leading search icon. Focus is auto-set when the panel opens.

3
Category filters

Pill buttons: All / Clients / Policies / Documents. Active pill is green-tinted. Filtering narrows the results list without a network round-trip where possible.

4
Results list

Grouped by entity type with a muted uppercase section label. Each result row: 30 × 30 px type icon, primary name, secondary metadata line. Keyboard-navigable with arrow keys.

Keyboard behavior

⌘K / Ctrl+K opens the panel. ↑ ↓ navigate results. Enter selects. Esc closes. Tab cycles through category filters.

Inline breadcrumbs appear both inside .ws-topnav__breadcrumb and on content pages to show hierarchy position.

<nav class="ws-breadcrumb" aria-label="Breadcrumb">
  <a href="/clients">Clients</a><span class="sep">/</span>
  <a href="/clients/acme">Acme Manufacturing Co.</a><span class="sep">/</span>
  <span class="current">Policy WS-2026-004471</span>
</nav>

Pagination

Used on table and list views to navigate between pages of results.

… 
<div class="ws-pagination">
  <button aria-label="Previous page" disabled>‹</button>
  <button class="is-active">1</button>
  <button>2</button>
  <button>3</button>
  <span>…</span>
  <button>12</button>
  <button aria-label="Next page">›</button>
</div>