Navigation

Bootstrap

Sidebar, tabs, breadcrumb, scope bar. Patterns below; usage → Rules.

Choose a control

Pick by what changes, not by look. Segmented and tabs can both look like a pill row.

What changes	Use this	Not that
Presentation only — same records, different chrome (table ↔ cards)	Segmented (sq-segmented)	Tabs, pill radio
Page content or a property filter — another slice of the page (All / Mine / Active), or a different panel	Pill tabs in the filter row; underline tabs on a section edge	Segmented
Form field — two to four exclusive options the user saves with the form	Pill radio (sq-pill-radio)	Segmented, nav-pills

App chrome (rail, scope, breadcrumb) is not interchangeable with these — see sections below.

Sidenav

Sqrl custom

Rail anatomy (see Layout): Scope switch → divider → nav list → footer (search, user). Nav lives in sq-sidenav (tag below).

• sq-sidenav → Bootstrap list-group list-group-flush → list-group-item-action + filled bi-*-fill icons (Iconography).
• Labels in order: Home, Accounts, Contacts, Tasks, Activities, Flows.
• Optional count: span.font-monospace. Active: active + aria-current="page" (paper chip — not primary green).

Home Accounts 128 Contacts 412 Tasks 16 Activities Flows

<nav class="sq-sidenav" aria-label="Main">
  <div class="list-group list-group-flush">
    <a class="list-group-item list-group-item-action" href="#">
      <i class="bi bi-house-fill" aria-hidden="true"></i>
      Home
    </a>
    <a class="list-group-item list-group-item-action" href="#">
      <i class="bi bi-buildings-fill" aria-hidden="true"></i>
      Accounts
      <span class="font-monospace">128</span>
    </a>
    <a
      class="list-group-item list-group-item-action active"
      href="#"
      aria-current="page"
    >
      <i class="bi bi-people-fill" aria-hidden="true"></i>
      Contacts
      <span class="font-monospace">412</span>
    </a>
    <a class="list-group-item list-group-item-action" href="#">
      <i class="bi bi-check-square-fill" aria-hidden="true"></i>
      Tasks
      <span class="font-monospace">16</span>
    </a>
    <a class="list-group-item list-group-item-action" href="#">
      <i class="bi bi-clock-fill" aria-hidden="true"></i>
      Activities
    </a>
    <a class="list-group-item list-group-item-action" href="#">
      <i class="bi bi-diagram-3-fill" aria-hidden="true"></i>
      Flows
    </a>
  </div>
</nav>

Pill tabs

• ul.nav.nav-pills → nav-link; optional font-monospace count on the link.
• Different page content or a property filter (All / Mine / Active) in the filter row — not presentation (table ↔ cards). Choose a control.

• All 412
• My contacts

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#" aria-current="page"
      >All <span class="font-monospace">412</span></a
    >
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">My contacts</a>
  </li>
</ul>

Underline tabs

ul.nav.nav-tabs on a content edge for another panel of content (not table ↔ cards). Same optional count pattern as pills.

• Overview
• Contacts 12
• Activity

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#" aria-current="page">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"
      >Contacts <span class="font-monospace">12</span></a
    >
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Activity</a>
  </li>
</ul>

Scope bar

Sqrl custom

sq-panel → sq-scope-bar (role="region") at top: icon + sq-scope-bar__title + optional sq-scope-bar__meta; exit btn btn-sm btn-outline-light rounded-pill sq-scope-bar__exit.

Van den Berg Logistics30 contacts

<div class="sq-scope-bar" role="region" aria-label="Account scope">
  <div class="sq-scope-bar__main">
    <i class="bi bi-funnel-fill sq-scope-bar__icon" aria-hidden="true"></i>
    <span class="sq-scope-bar__title">Van den Berg Logistics</span>
    <span class="sq-scope-bar__meta">30 contacts</span>
  </div>
  <button
    type="button"
    class="btn btn-sm btn-outline-light rounded-pill sq-scope-bar__exit"
  >
    <i class="bi bi-x-lg" aria-hidden="true"></i>
    Leave account
  </button>
</div>

Breadcrumb

nav → ol.breadcrumb → breadcrumb-item; current page active + aria-current="page".

1. Accounts
2. Van den Berg Logistics
3. Contacts

<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="#">Accounts</a></li>
    <li class="breadcrumb-item"><a href="#">Van den Berg Logistics</a></li>
    <li class="breadcrumb-item active" aria-current="page">Contacts</li>
  </ol>
</nav>

Rules

App shell

• Primary nav is a sidebar (248px, flush on surface-app), not a topbar — Layout.
• Top-level labels: Home, Accounts, Contacts, Tasks, Activities, Flows.
• Rail footer: search + user block pinned with margin-top: auto on the nav column.

Account context

Inside an account: first item = that account’s overview; Accounts drops out, Quotes appears.

Tabs and filters

• nav-pills vs sq-segmented: Choose a control — tabs change content or a property filter; segmented changes presentation of the same data.
• nav-pills: filter row. nav-tabs: underline on a content edge for another panel. Not btn-group.
• Optional mono counts on nav items.

Scope bar

• sq-scope-bar inside sq-panel: flat bar, pill exit with icon — not btn-primary.
• On record/detail views scoped to an account, place the scope bar above the page header (Layout).