Headings & breadcrumbs

The top of every screen: page headings with meta and actions, section headings that divide long pages, and the breadcrumb trail that anchors both. Composable — a heading takes breadcrumbs, meta, avatars, or filters without new CSS.

Breadcrumbs

With chevrons

With slashes

Full-width bar

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <a href="…" class="breadcrumb">Servers</a>
  <span class="breadcrumb-sep"><!-- chevron icon or / --></span>
  <span class="breadcrumb" aria-current="page">app-01</span>
</nav>

Page headings

With actions

Backup jobs

With meta and actions

Acme Pty Ltd — site refresh

Managed services Sydney, NSW $12,400 / month Renews 1 March 2027

With breadcrumbs, meta, and actions

Deploy #4821

in progress Started 4 minutes ago

With avatar and actions

AR

Alex Rivera

Administrator Joined August 2023

With filters and action

Audit log

<div class="page-heading">
  <div>
    <h1 class="page-heading-title">Acme Pty Ltd</h1>
    <div class="page-heading-meta">
      <span class="meta-item"><!-- icon --> Sydney, NSW</span>
    </div>
  </div>
  <div class="page-heading-actions">
    <button class="btn btn-primary">Approve</button>
  </div>
</div>

Section headings

Simple

Notification settings

With description

Connected devices

Printers and controllers currently paired with this site.

With actions

API tokens

Tokens grant full access — rotate them regularly.

With label

Billing history

last 12 months

With action

Maintenance windows

With input group

Sites

With badge and dropdown

Print queues

3 online

With tabs

Deployments

With actions and tabs

Service health

With inline tabs

Audit log

Today This week All time 
<div class="section-heading">
  <div>
    <h3 class="section-heading-title">API tokens</h3>
    <p class="section-heading-description">Tokens grant full access.</p>
  </div>
  <button class="btn btn-secondary btn-sm">New token</button>
</div>