135Toolbar

The row above every list screen: search, filter selects, the mono result count, and the view toggle on the trailing edge. Wraps on narrow screens — never becomes a second navbar.

Use it for

Above tables and record lists in the admin

Not for

Global navigation or actions that belong in the page head

Search + filters + toggle

markup

<div class="ns-toolbar" style="inline-size:100%">
  <span class="ns-input-wrap ns-toolbar__search">
    <i class="ph ph-magnifying-glass ns-input-wrap__icon" aria-hidden="true"></i>
    <input class="ns-input ns-input--has-icon" type="search" placeholder="Search courses…">
  </span>
  <select class="ns-select" aria-label="Status"><option>All statuses</option><option>Published</option><option>Draft</option></select>
  <select class="ns-select" aria-label="Level"><option>All levels</option><option>Beginner</option></select>
  <span class="ns-toolbar__count">12 results</span>
  <span class="ns-toolbar__spacer"></span>
  <div class="ns-btn-group">
    <button class="ns-btn ns-btn--outline ns-btn--sm" aria-pressed="true">List</button>
    <button class="ns-btn ns-btn--outline ns-btn--sm">Cards</button>
  </div>
</div>