PF Next

Toolbar

Toolbar Basic Example - layout will respond naturally, no additional fitting is applied

Preview

Item 1
Item 2
Item 3
Item 4
<div class="pf-l-toolbar">
  <div class="pf-l-toolbar__group">
    <div class="pf-l-toolbar__item">
      Item 1
    </div>
  </div>
  <div class="pf-l-toolbar__group">
    <div class="pf-l-toolbar__item">
      Item 2
    </div>
    <div class="pf-l-toolbar__item">
      Item 3
    </div>
  </div>
  <div class="pf-l-toolbar__group">
    <div class="pf-l-toolbar__item">
      Item 4
    </div>
  </div>
</div>

Toolbar Section Example

Preview

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
<div class="pf-l-toolbar">
  <section class="pf-l-toolbar__section" aria-label="First section">
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item">
        Item 1
      </div>
    </div>
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item">
        Item 2
      </div>
      <div class="pf-l-toolbar__item">
        Item 3
      </div>
    </div>
  </section>
  <section class="pf-l-toolbar__section" aria-label="Second section">
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item">
        Item 4
      </div>
      <div class="pf-l-toolbar__item">
        Item 5
      </div>
      <div class="pf-l-toolbar__item">
        Item 6
      </div>
    </div>
    <div class="pf-l-toolbar__group">
      <div class="pf-l-toolbar__item">
        Item 7
      </div>
    </div>
  </section>
</div>

Documentation

Overview

The toolbar layout assumes that all direct children of .pf-l-toolbar appear on a single line, until container width forces them to wrap. Toolbar groups can be nested.

Accessibility

Attribute Applied To Outcome
aria-label="[section label text]" .pf-l-toolbar__section Provides an accessible name for toolbar section.

Usage

Class Applied To Outcome
.pf-l-toolbar <div>, <section>, <header>, <footer> Initializes a toolbar layout. Required.
.pf-l-toolbar__group <div> Initiates a toolbar group. Required.
.pf-l-toolbar__item <div> Initiates a toolbar item. Required.
.pf-l-toolbar__section <section> Initiates a toolbar section. Use this when vertically stacking toolbar sections.