Toolbar

wu-toolbar lays out a row of controls that wraps when it runs out of room.

A toolbar holds controls of one height (buttons, button groups, inputs, selects, segmented), so it lines up by itself. Status displays such as tags, badges and progress bars go outside the toolbar row.

role="toolbar" promises arrow-key focus between the controls. Add it only together with a script that provides it; otherwise keep the toolbar a plain <div>.

Class	Effect
wu-toolbar	Root. Wrapping row with a small gap
wu-toolbar-group	Part. Controls that stay together
wu-toolbar-separator	Part. Vertical line between groups
wu-toolbar-end	Part. Pushes itself and what follows to the end
boxed	Border, padding and the alternate background
sm	Smaller gap

Groups and end

Bold Italic

Link Image

Publish

<div class="wu-toolbar">
  <div class="wu-toolbar-group">
    <button class="wu-btn sm" type="button">Bold</button>
    <button class="wu-btn sm" type="button">Italic</button>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <div class="wu-toolbar-group">
    <button class="wu-btn sm" type="button">Link</button>
    <button class="wu-btn sm" type="button">Image</button>
  </div>
  <div class="wu-toolbar-end">
    <button class="wu-btn brand sm" type="button">Publish</button>
  </div>
</div>

Boxed

3 selected Archive Move

Clear

<div class="wu-toolbar boxed">
  <span class="wu-text sm">3 selected</span>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <button class="wu-btn sm" type="button">Archive</button>
  <button class="wu-btn sm" type="button">Move</button>
  <div class="wu-toolbar-end">
    <button class="wu-btn sm" type="button">Clear</button>
  </div>
</div>

Small gap

One Two Three

<div class="wu-toolbar sm">
  <button class="wu-btn sm" type="button">One</button>
  <button class="wu-btn sm" type="button">Two</button>
  <button class="wu-btn sm" type="button">Three</button>
</div>

Formatting ribbon

Several joined button groups in one toolbar, split by separators. Toggles use aria-pressed, alignment is a radio group, and every icon button has an aria-label. The groups are named with role="group" because the toolbar role needs a script for arrow keys.

12 14 18 24

More

Undo Redo Bulleted list Numbered list Insert table Clear formatting

<div class="wu-toolbar" role="group" aria-label="Text formatting">
  <div class="wu-btn-group" role="group" aria-label="Character style">
    <button class="wu-btn icon" type="button" aria-pressed="true" aria-label="Bold"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h4a2.2 2.2 0 0 1 0 4.5H5z"/><path d="M5 7.5h4.5a2.4 2.4 0 0 1 0 5H5z"/></svg></button>
    <button class="wu-btn icon" type="button" aria-pressed="false" aria-label="Italic"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3h5M4 13h5M9.5 3 6.5 13"/></svg></button>
    <button class="wu-btn icon" type="button" aria-pressed="false" aria-label="Underline"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 3v5a3.5 3.5 0 0 0 7 0V3M3.5 14h9"/></svg></button>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <div class="wu-btn-group" role="radiogroup" aria-label="Alignment">
    <label class="wu-btn icon" aria-label="Align left"><input type="radio" name="tb-rib-align" value="left" class="sr-only" checked><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="Align center"><input type="radio" name="tb-rib-align" value="center" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M4 6.5h8M2 9.5h12M4 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="Align right"><input type="radio" name="tb-rib-align" value="right" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M6 6.5h8M2 9.5h12M6 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="Justify"><input type="radio" name="tb-rib-align" value="justify" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h12M2 9.5h12M2 12.5h12"/></svg></label>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <select class="wu-select w-24" aria-label="Font size">
    <option>12</option>
    <option selected>14</option>
    <option>18</option>
    <option>24</option>
  </select>
  <div class="wu-toolbar-end">
    <button class="wu-btn caret" type="button" popovertarget="tb-rib-more">More</button>
    <div class="wu-dropdown inline-end" id="tb-rib-more" popover>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Undo</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Redo</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Bulleted list</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Numbered list</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Insert table</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-rib-more" popovertargetaction="hide">Clear formatting</button>
    </div>
  </div>
</div>

Formatting ribbon, small

Small buttons and a small select line up at one height.

12 14 18 24

More

Undo Redo Bulleted list Numbered list Insert table Clear formatting

<div class="wu-toolbar sm" role="group" aria-label="Text formatting">
  <div class="wu-btn-group" role="group" aria-label="Character style">
    <button class="wu-btn icon sm" type="button" aria-pressed="true" aria-label="Bold"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h4a2.2 2.2 0 0 1 0 4.5H5z"/><path d="M5 7.5h4.5a2.4 2.4 0 0 1 0 5H5z"/></svg></button>
    <button class="wu-btn icon sm" type="button" aria-pressed="false" aria-label="Italic"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3h5M4 13h5M9.5 3 6.5 13"/></svg></button>
    <button class="wu-btn icon sm" type="button" aria-pressed="false" aria-label="Underline"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 3v5a3.5 3.5 0 0 0 7 0V3M3.5 14h9"/></svg></button>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <div class="wu-btn-group" role="radiogroup" aria-label="Alignment">
    <label class="wu-btn icon sm" aria-label="Align left"><input type="radio" name="tb-ribsm-align" value="left" class="sr-only" checked><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h8"/></svg></label>
    <label class="wu-btn icon sm" aria-label="Align center"><input type="radio" name="tb-ribsm-align" value="center" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M4 6.5h8M2 9.5h12M4 12.5h8"/></svg></label>
    <label class="wu-btn icon sm" aria-label="Align right"><input type="radio" name="tb-ribsm-align" value="right" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M6 6.5h8M2 9.5h12M6 12.5h8"/></svg></label>
    <label class="wu-btn icon sm" aria-label="Justify"><input type="radio" name="tb-ribsm-align" value="justify" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h12M2 9.5h12M2 12.5h12"/></svg></label>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <select class="wu-select sm w-24" aria-label="Font size">
    <option>12</option>
    <option selected>14</option>
    <option>18</option>
    <option>24</option>
  </select>
  <div class="wu-toolbar-end">
    <button class="wu-btn sm caret" type="button" popovertarget="tb-ribsm-more">More</button>
    <div class="wu-dropdown inline-end" id="tb-ribsm-more" popover>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Undo</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Redo</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Bulleted list</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Numbered list</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Insert table</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribsm-more" popovertargetaction="hide">Clear formatting</button>
    </div>
  </div>
</div>

Formatting ribbon, right to left

The group order mirrors. Alignment icons stay physical, so the left icon still points left.

12 14 18 24

עוד

ביטול שחזור רשימת תבליטים רשימה ממוספרת הוספת טבלה ניקוי עיצוב

<div class="wu-toolbar" role="group" aria-label="עיצוב טקסט">
  <div class="wu-btn-group" role="group" aria-label="סגנון תו">
    <button class="wu-btn icon" type="button" aria-pressed="true" aria-label="מודגש"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h4a2.2 2.2 0 0 1 0 4.5H5z"/><path d="M5 7.5h4.5a2.4 2.4 0 0 1 0 5H5z"/></svg></button>
    <button class="wu-btn icon" type="button" aria-pressed="false" aria-label="נטוי"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 3h5M4 13h5M9.5 3 6.5 13"/></svg></button>
    <button class="wu-btn icon" type="button" aria-pressed="false" aria-label="קו תחתון"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 3v5a3.5 3.5 0 0 0 7 0V3M3.5 14h9"/></svg></button>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <div class="wu-btn-group" role="radiogroup" aria-label="יישור">
    <label class="wu-btn icon" aria-label="יישור לשמאל"><input type="radio" name="tb-ribrtl-align" value="left" class="sr-only" checked><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="יישור למרכז"><input type="radio" name="tb-ribrtl-align" value="center" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M4 6.5h8M2 9.5h12M4 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="יישור לימין"><input type="radio" name="tb-ribrtl-align" value="right" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M6 6.5h8M2 9.5h12M6 12.5h8"/></svg></label>
    <label class="wu-btn icon" aria-label="יישור דו-צדדי"><input type="radio" name="tb-ribrtl-align" value="justify" class="sr-only"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3.5h12M2 6.5h12M2 9.5h12M2 12.5h12"/></svg></label>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <select class="wu-select w-24" aria-label="גודל גופן">
    <option>12</option>
    <option selected>14</option>
    <option>18</option>
    <option>24</option>
  </select>
  <div class="wu-toolbar-end">
    <button class="wu-btn caret" type="button" popovertarget="tb-ribrtl-more">עוד</button>
    <div class="wu-dropdown inline-end" id="tb-ribrtl-more" popover>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">ביטול</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">שחזור</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">רשימת תבליטים</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">רשימה ממוספרת</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">הוספת טבלה</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-ribrtl-more" popovertargetaction="hide">ניקוי עיצוב</button>
    </div>
  </div>
</div>

Table toolbar

Search with a prefix and a clear button, joined filter toggle buttons, a page size select and a split Export button on the end.

Open Shipped Refunded

10 rows 25 rows 50 rows

Export

Export as CSV Export as PDF

<div class="wu-toolbar" role="group" aria-label="Orders table">
  <div class="wu-input-affix w-48 max-w-full">
    <span class="wu-input-prefix"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg></span>
    <input class="wu-input" type="search" aria-label="Search orders" placeholder="Search orders">
    <button class="wu-input-clear" type="button" aria-label="Clear search" hidden></button>
  </div>
  <div class="wu-btn-group" role="group" aria-label="Status filter">
    <button class="wu-btn" type="button" aria-pressed="true">Open</button>
    <button class="wu-btn" type="button" aria-pressed="false">Shipped</button>
    <button class="wu-btn" type="button" aria-pressed="false">Refunded</button>
  </div>
  <select class="wu-select w-32" aria-label="Rows per page">
    <option>10 rows</option>
    <option>25 rows</option>
    <option>50 rows</option>
  </select>
  <div class="wu-toolbar-end">
    <div class="wu-btn-group">
      <button class="wu-btn" type="button">Export</button>
      <button class="wu-btn caret" type="button" popovertarget="tb-tbl-export" aria-label="More export options"></button>
      <div class="wu-dropdown inline-end" id="tb-tbl-export" popover>
        <button class="wu-dropdown-item" type="button" popovertarget="tb-tbl-export" popovertargetaction="hide">Export as CSV</button>
        <button class="wu-dropdown-item" type="button" popovertarget="tb-tbl-export" popovertargetaction="hide">Export as PDF</button>
      </div>
    </div>
  </div>
</div>

Table toolbar, small

A wu-field-group sm sizes the input, select and buttons together.

Orders table controls

Open Shipped Refunded

10 rows 25 rows 50 rows

Export

Export as CSV Export as PDF

<fieldset class="wu-field-group sm">
<legend class="sr-only">Orders table controls</legend>
<div class="wu-toolbar" role="group" aria-label="Orders table">
  <div class="wu-input-affix w-48 max-w-full">
    <span class="wu-input-prefix"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg></span>
    <input class="wu-input" type="search" aria-label="Search orders" placeholder="Search orders">
    <button class="wu-input-clear" type="button" aria-label="Clear search" hidden></button>
  </div>
  <div class="wu-btn-group" role="group" aria-label="Status filter">
    <button class="wu-btn" type="button" aria-pressed="true">Open</button>
    <button class="wu-btn" type="button" aria-pressed="false">Shipped</button>
    <button class="wu-btn" type="button" aria-pressed="false">Refunded</button>
  </div>
  <select class="wu-select w-32" aria-label="Rows per page">
    <option>10 rows</option>
    <option>25 rows</option>
    <option>50 rows</option>
  </select>
  <div class="wu-toolbar-end">
    <div class="wu-btn-group">
      <button class="wu-btn" type="button">Export</button>
      <button class="wu-btn caret" type="button" popovertarget="tb-tblsm-export" aria-label="More export options"></button>
      <div class="wu-dropdown inline-end" id="tb-tblsm-export" popover>
        <button class="wu-dropdown-item" type="button" popovertarget="tb-tblsm-export" popovertargetaction="hide">Export as CSV</button>
        <button class="wu-dropdown-item" type="button" popovertarget="tb-tblsm-export" popovertargetaction="hide">Export as PDF</button>
      </div>
    </div>
  </div>
</div>
</fieldset>

Bulk actions

A boxed toolbar for selected rows.

3 נבחרו הקצאה העברה לארכיון מחיקה

ניקוי בחירה

<div class="wu-toolbar boxed" role="group" aria-label="פעולות מרובות">
  <span class="wu-text sm">3 נבחרו</span>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <button class="wu-btn quiet sm" type="button">הקצאה</button>
  <button class="wu-btn quiet sm" type="button">העברה לארכיון</button>
  <button class="wu-btn danger subtle sm" type="button">מחיקה</button>
  <div class="wu-toolbar-end">
    <button class="wu-btn link sm" type="button">ניקוי בחירה</button>
  </div>
</div>

View toolbar

A segmented view switch, a date range and a brand button pushed to the end.

View

List Board

Last 7 days Last 30 days This quarter

New project

<div class="wu-toolbar" role="group" aria-label="Projects view">
  <fieldset class="wu-segmented">
    <legend class="sr-only">View</legend>
    <label class="wu-segmented-item"><input type="radio" name="tb-view" class="wu-segmented-input" checked> List</label>
    <label class="wu-segmented-item"><input type="radio" name="tb-view" class="wu-segmented-input"> Board</label>
  </fieldset>
  <select class="wu-select w-40" aria-label="Date range">
    <option>Last 7 days</option>
    <option>Last 30 days</option>
    <option>This quarter</option>
  </select>
  <div class="wu-toolbar-end">
    <button class="wu-btn brand" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v10M3 8h10"/></svg>New project</button>
  </div>
</div>

Overflow

Below md the secondary actions collapse into a More menu. Widen the preview to see them inline.

Share

Duplicate Move Archive

More

Duplicate Move Archive

<div class="wu-toolbar boxed" role="group" aria-label="Document actions">
  <button class="wu-btn brand sm" type="button">Share</button>
  <div class="wu-toolbar-group hide flex@md">
    <button class="wu-btn sm" type="button">Duplicate</button>
    <button class="wu-btn sm" type="button">Move</button>
    <button class="wu-btn sm" type="button">Archive</button>
  </div>
  <div class="wu-toolbar-end hide@md">
    <button class="wu-btn sm caret" type="button" popovertarget="tb-overflow">More</button>
    <div class="wu-dropdown inline-end" id="tb-overflow" popover>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-overflow" popovertargetaction="hide">Duplicate</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-overflow" popovertargetaction="hide">Move</button>
      <button class="wu-dropdown-item" type="button" popovertarget="tb-overflow" popovertargetaction="hide">Archive</button>
    </div>
  </div>
</div>

Right to left

Groups start at the right, and the end group moves to the left.

מודגש נטוי

קישור

פרסום

<div class="wu-toolbar">
  <div class="wu-toolbar-group">
    <button class="wu-btn sm" type="button">מודגש</button>
    <button class="wu-btn sm" type="button">נטוי</button>
  </div>
  <span class="wu-toolbar-separator" aria-hidden="true"></span>
  <button class="wu-btn sm" type="button">קישור</button>
  <div class="wu-toolbar-end">
    <button class="wu-btn brand sm" type="button">פרסום</button>
  </div>
</div>

Load only the toolbar

@use "@wovenui/components/toolbar";

The toolbar needs no other component. The examples above also use the button, button group, text, input, select, segmented control and dropdown.

Related components

More in navigation and layout:

• Breadcrumb
• Page header
• Pagination
• Sidebar
• Top bar