Toolbar

The default arrangement: reporting widgets on the leading edge, controls pushed to the trailing edge, and the content as an independent sibling below

Start and end clusters

Reference	Entity	Status
1041	Ministry of Interior	Completed
1042	Ministry of Health	In Review
1043	Ministry of Education	Pending

Multi-Row Toolbar

Pick this when the bar carries more controls than one line can hold, or when you want counts and actions on a line of their own regardless of viewport width

Search a row, then watch the applied-filters row appear

Reference	Entity	Status
1041	Ministry of Interior	Completed
1042	Ministry of Health	In Review
1043	Ministry of Education	Pending


<div class="nds-toolbar">
  <!-- Row 1: counts lead, controls trail -->
  <div class="nds-bar-row">
    <div class="nds-bar-start">
      <span class="nds-bar-text" data-filter-target="toolbarRowsBody"><span data-filter-count>3</span> of 3 orders</span>
    </div>
    <div class="nds-bar-end">
      <div class="nds-export nds-btn-group">
        <button type="button" class="nds-btn nds-secondary-outline nds-md"
          data-export="csv" data-export-target="#toolbarRowsTable">
          <span class="nds-label">CSV</span>
        </button>
        <button type="button" class="nds-btn nds-secondary-outline nds-md"
          data-export="pdf" data-export-target="#toolbarRowsTable">
          <span class="nds-label">PDF</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Row 2: the search box grows to fill its line -->
  <div class="nds-bar-row">
    <div class="nds-form-container nds-search-box" data-filter-target="toolbarRowsBody">
      <div class="nds-search-content">
        <div class="nds-form-control">
          <i class="nds-icon nds-hgi-search-01" aria-hidden="true"></i>
          <input type="text" class="nds-search-input" placeholder="Search orders...">
          <div class="nds-form-action">
            <button class="nds-btn nds-subtle nds-clear" hidden aria-label="Clear search">
              <i class="nds-icon nds-hgi-cancel-01" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <button class="nds-btn nds-primary nds-search-btn" type="button">
          <i class="nds-icon nds-hgi-search-01" aria-hidden="true"></i>
          <span class="nds-label" data-hidden="sm sr">Search</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Row 3: collapses to nothing until a filter lands -->
  <div class="nds-bar-row">
    <div class="nds-bar-start">
      <div class="nds-filter-applied" data-filter-target="toolbarRowsBody" hidden>
        <span class="nds-label">Applied Filters:</span>
        <div class="nds-chips"></div>
      </div>
    </div>
  </div>
</div>
<table id="toolbarRowsTable" class="nds-table" data-export-name="orders">
  <thead>
    <tr>
      <th>Reference</th>
      <th>Entity</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="toolbarRowsBody" data-filter-items="tr">
    <tr>
      <td>1041</td>
      <td>Ministry of Interior</td>
      <td><span class="nds-tag nds-green nds-sm"><span class="nds-label">Completed</span></span></td>
    </tr>
    <tr>
      <td>1042</td>
      <td>Ministry of Health</td>
      <td><span class="nds-tag nds-blue nds-sm"><span class="nds-label">In Review</span></span></td>
    </tr>
    <tr>
      <td>1043</td>
      <td>Ministry of Education</td>
      <td><span class="nds-tag nds-yellow nds-sm"><span class="nds-label">Pending</span></span></td>
    </tr>
  </tbody>
</table>

Built-in Features

Leading and Trailing Clusters

Anything you place in nds-bar-start sits at the leading edge, and nds-bar-end is pushed to the trailing edge at any bar width.

Stackable Rows

Wrap items in nds-bar-row to pin them to their own line. A row lays out exactly like the bar, so clusters and search fields behave the same inside one.

Empty-Slot Collapse

A row whose widgets are all hidden takes no space at all, so an applied-filters row leaves no gap above the content until a filter lands.

Search Field Growth

A search box dropped into the bar stretches to fill the free space on its line instead of rendering as the centered panel it is by default.

Responsive Labels

Search and filter button labels collapse to icons on small screens, keeping the bar's controls on one line without truncating them.

Per-Instance Spacing

Set --toolbar-margin-block on any bar to change the space it clears above and below itself, without touching the component.

Usage Guidelines

Best Practices

Use a toolbar directly above the content it controls: a Table, a card grid, or any list. Keep the content and its Pagination as independent siblings below
The cluster names are positional, not semantic: put what leads in nds-bar-start and what trails in nds-bar-end, whatever those widgets do. A table bar usually reports from the start edge (a result count, applied-filter chips, a selection summary) and acts from the end edge (an Export group, a column menu, bulk actions); an editor bar leads with formatting controls and trails with a source toggle
A nds-bar-row earns its place when it has a sibling to break from — another row, or a widget sitting directly in the bar. A row that is its bar's only child pins no break: the bar has one line either way, so the wrapper reads as deliberate structure while doing nothing. Without any row the bar wraps on its own, which is the right behavior for two or three controls
Do not use a toolbar for page-level navigation or the page's primary action. Those belong in the section head, described on the Section page
Do not nest a toolbar inside another toolbar. Add a nds-bar-row instead, which is the same layout without the outer spacing
Every widget wires itself to its own content through a target attribute, so the bar imposes no structure on them. A custom layout built from Grid works too, but the toolbar keeps bars consistent across a product
Leave the hidden attribute on widgets that ship empty, such as the applied-filters row. The bar reads it to collapse the line, and removing it leaves a permanent gap
Keep the trailing cluster to one or two controls. Group related buttons with nds-btn-group so they read as a single control rather than a row of choices
Match button sizes inside a cluster. A default button is 40px tall and nds-md is 32px, so mixing them leaves the cluster visibly uneven

Modifier Classes

Class	Description
`nds-toolbar`	The bar itself. A wrapping flex row that spans its container and clears space below
`nds-bar-row`	Pins its children to a line of their own. Lays out identically to the bar, so clusters and search boxes work inside it
`nds-bar-start`	Leading widget cluster. Groups its widgets so they space tighter than the bar's own gap
`nds-bar-end`	Trailing widget cluster. Pushed to the end edge of whichever bar or row holds it
`nds-bar-text`	Text item: a record count, a selection summary, a "showing 1–6 of 48" window. Sits on the bar's bottom edge, and works standalone outside a bar. A `b` inside it reads as medium emphasis

CSS Custom Properties

Property	Default	Description
`--toolbar-margin-block`	`0 var(--spacing-4xl)`	The bar's block margins, written as `<start> <end>`. Set it on the bar or an ancestor to change either edge