Toolbar

Toolbars provide access to functions related to a single screen or container within a screen. They may appear in Tables, Panels, and other content containers where complex functionality is needed to manipulate data and content.

Icon Example

Toolbar Title

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.


When to Use

  • Use when a set of actions are needed within the context of a page, panel, table, tab set
  • Use icons when their meaning is understood by users and space is at a premium.

When Not to Use

  • Do not use for navigation or links; the toolbar is reserved for actions.

Variations

Usage

Text vs Icon Controls

  • Use text labels or icons (but not both) in the context of the visible toolbar controls.
  • Text may be combined with icons in the “more actions” menu. When present, the “more actions” menu appears on the far right.
  • When text and icons are combined in the “more actions” menu, the icons are right-aligned within the popover.

Display and Behavior

  • Display a maximum of 4-6 actions within the visible portion of the toolbar (on large/xl screens). This will scale down on smaller resolutions and controls will shift into the “more actions” menu as available horizontal space decreases.
  • By default, the toolbar will prioritize the visibility of controls starting from the left. You may also override this behavior by using the [data-priority] property to ensure high-priority element are collapsed last, regardless of their order in the toolbar items. You can override the default ordering of items by applying a [data-order] integer value.
  • The above order is maintained unless an item is too large to fit in the remaining space, then it will skip to the next item to fit as many items as possible.
  • The toolbar dynamically fits as many controls as possible into the visible container until the small breakpoint is reached, where all items will be placed into the “more actions” menu.
  • In examples it is shown alongside a title with vertical-centering but can used completely stand-alone.

Level of Actions

  • A control may prompt an action to occur immediately OR it may display a series of additional actions in a Popover menu or Modal.
  • When expanded, the “view more” menu displays a single level of actions. Each action within this menu may expand to display a second level of sub-actions. Additional levels beyond two should be handled via a modal window accessed from the toolbar.

Variations

Limited Horizontal Space Icon Example

Toolbar Title


Text Button Toolbar

This toolbar use only text buttons in the visible portion. Icons may be included alongside the text in the “more actions” menu.

Toolbar Title


When to Use

  • When your descriptive labels are more important than conserving space, and horizontal space is plentiful.
  • Use if toolbar actions require a descriptive label to understand what the action does

When Not to Use

  • Do not use if horizontal space is limited

Limited Horizontal Space Text Example

Toolbar Title


Developer Notes

  • You can switch to the Icon Toolbar by adding the class spark-toolbar--icon to the .spark-toolbar element.
  • You can selectively give toolbar items a Tooltip, the tooltip will not be displayed for items inside the show-more dropdown.
  • You can set the contents of a dropdown to close the dropdown (and the show-more menu) by giving whichever element should close the dropdown the class spark-toolbar__item--close-on-click.
  • Toolbar items that do not have .spark-toolbar__item--content will cause the show-more menu to close when they are selected.
  • Any content can be placed inside the .spark-toolbar__item--content, but the width for these dropdowns are fixed at 24rem, with a default 2rem 1rem padding applied when using a ul.spark-toolbar__list or .spark-toolbar__item--content__container. The recommended default dropdown would be a div.spark-toolbar__item--content.spark-toolbar__item--content__container.
  • A styled checkbox list is also available when using a ul.spark-toolbar__list.spark-toolbar__list--checkboxes inside, or as, the .spark-toolbar__item--content.
  • Calling the change() function on the Toolbar instance will cause a recalculation of the toolbar, you should call this function after programmatically adding, removing, or modifying the toolbar’s items or styling.
  • You can optionally specify a [data-priority] integer property on .spark-toolbar__items that will determine the order in which toolbar items should be collapsed into the show-more menu. Higher priority values will be collapsed last.
  • You can optionally specify an [data-order] integer property on .spark-toolbar__items that will determine the order in which toolbar items are ordered. When initialized the original order in the document is set as the default ordering. When adding .spark-toolbar__items programmatically, then using the change() function to recalculate appearance, the new items will default to the front of the list, unless specified using .spark-toolbar__item[data-order] property.

Panel Example

Toolbar Title

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<style>
  /* example styles */

  .spark-toolbar-example {
    background: #fff;
  }

  .spark-toolbar-example h4 {
    margin: 0;
  }

  .spark-toolbar-example .spark-toolbar {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
  }
  .spark-toolbar-example-hr {
    margin: 1rem;
  }
</style>
<div class="container">
  <div class="spark-toolbar-example row">
    <div class="spark-panel spark-panel--card col-xs-12">
      <div class="spark-panel__content row">
        <div class="col-xs-10 col-md-6">
          <h4>Toolbar Title</h4>
        </div>
        <div class="col-xs-2 col-md-6">
          <div class="spark-toolbar spark-toolbar--icon" role="menubar" tabindex="0">
            <div class="spark-toolbar__container--visible">
              <div class="spark-toolbar__item" label="Filter Results" aria-label="Filter Results" role="menubaritem" tabindex="-1">
                <div class="spark-toolbar__item--content spark-toolbar__item--content__container ">
                  <h6>Number of Tickets</h6>
                  <div class="spark-slider--integrated">
                    <input type="number" min="1" max="30" value="4">
                    <div class="spark-slider__controls">
                      <button class="spark-slider__handle"></button>
                      <span class="spark-slider__track">
          <span class="spark-slider__track-fill"></span>
                      </span>
                    </div>
                  </div>
                  <h6>Price Per Ticket</h6>
                  <div class="spark-range-slider">
                    <input type="number" min="1" max="5000" value="100" title="Start">
                    <span class="spark-range-slider__input-divider"></span>
                    <input type="number" min="1" max="5000" value="3000" title="End">
                    <div class="spark-slider__controls">
                      <button class="spark-slider__handle" title="Start"></button>
                      <button class="spark-slider__handle" title="End"></button>
                      <span class="spark-slider__track">
                        <span class="spark-slider__track-fill"></span>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" label="View Map" aria-label="View Map" role="menubaritem" tabindex="-1">
                <div class="spark-icon-map spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" label="Share Your Journey" aria-label="Share Your Journey" role="menubaritem" tabindex="-1">
                <div class="spark-icon-share spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" label="Settings" aria-label="Settings" data-priority="3" data-order="1" role="menubaritem" tabindex="-1">
                <div class="spark-toolbar__item--content">
                  <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                    <li tabindex="0">Save Results</li>
                    <li tabindex="0">Export to Excel</li>
                    <li tabindex="0">Create an Alert</li>
                  </ul>
                  <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                    <li>Modify Search</li>
                    <li>Advanced Search</li>
                  </ul>
                  <ul class="spark-toolbar__list spark-toolbar__list--checkboxes" role="menu">
                    <li role="menuitem">
                      <label>
                        <input type="checkbox" />
                        <span class="spark-toolbar__list--checkboxes--helper"></span>
                        <span class="spark-toolbar__list--checkboxes--content">Airline</span>
                      </label>
                    </li>
                    <li role="menuitem">
                      <label>
                        <input type="checkbox" checked="checked" />
                        <span class="spark-toolbar__list--checkboxes--helper"></span>
                        <span class="spark-toolbar__list--checkboxes--content">Departure Time</span>
                      </label>
                    </li>
                    <li role="menuitem">
                      <label>
                        <input type="checkbox" />
                        <span class="spark-toolbar__list--checkboxes--helper"></span>
                        <span class="spark-toolbar__list--checkboxes--content">Arrival Time</span>
                      </label>
                    </li>
                    <li role="menuitem">
                      <label>
                        <input type="checkbox" />
                        <span class="spark-toolbar__list--checkboxes--helper"></span>
                        <span class="spark-toolbar__list--checkboxes--content">Price</span>
                      </label>
                    </li>
                  </ul>
                </div>
                <div class="spark-icon-cog spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Hotel" aria-label="Find a Hotel" role="menubaritem" tabindex="-1">
                <div class="spark-icon-hotel-bed spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Rental Car" aria-label="Find a Rental Car" role="menubaritem" tabindex="-1">
                <div class="spark-icon-car-rental spark-toolbar__item-helper"></div>
              </div>
              <div class="spark-toolbar__item" label="Print Journey Summary" aria-label="Print Journey Summary" role="menubaritem" tabindex="-1">
                <div class="spark-icon-print spark-toolbar__item-helper"></div>
              </div>
            </div>
            <div class="spark-toolbar__show-more" tabindex="-1">
              <i class="spark-icon-menu-ellipsis-vertical"></i>
            </div>
            <!-- All items should be placed in .spark-toolbar__container-shown -->
            <div class="spark-toolbar__container--hidden">
            </div>
          </div>
        </div>
        <hr class="col-xs-12 spark-toolbar-example-hr" />
        <p class="col-xs-12">
          Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
        </p>
      </div>
    </div>
  </div>
</div>
// Vanilla JS
// Vanilla JS
var el = document.querySelector('.spark-toolbar');
var toolbarInstance = new Spark.Toolbar(el);

// jQuery
$('.spark-toolbar').sparkToolbar();

Icon Example

Toolbar Title

<style>
  /* example styles */

  .spark-toolbar-example {
    background: #fff;
  }

  .spark-toolbar-example h4 {
    margin: 0;
    line-height: 60px;
  }

  .spark-toolbar-example .spark-toolbar {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
  }
</style>
<div class="container">
  <div class="spark-toolbar-example row">
    <div class="col-xs-10 col-md-5">
      <h4>Toolbar Title</h4>
    </div>
    <div class="col-xs-2 col-md-7">
      <div class="spark-toolbar spark-toolbar--icon" role="menubar" tabindex="0">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item" label="Filter Results" aria-label="Filter Results" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content spark-toolbar__item--content__container ">
              <h6>Number of Tickets</h6>
              <div class="spark-slider--integrated">
                <input type="number" min="1" max="30" value="4">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle"></button>
                  <span class="spark-slider__track">
      <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
              <h6>Price Per Ticket</h6>
              <div class="spark-range-slider">
                <input type="number" min="1" max="5000" value="100" title="Start">
                <span class="spark-range-slider__input-divider"></span>
                <input type="number" min="1" max="5000" value="3000" title="End">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle" title="Start"></button>
                  <button class="spark-slider__handle" title="End"></button>
                  <span class="spark-slider__track">
                    <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="View Map" aria-label="View Map" role="menubaritem" tabindex="-1">
            <div class="spark-icon-map spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Share Your Journey" aria-label="Share Your Journey" role="menubaritem" tabindex="-1">
            <div class="spark-icon-share spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" aria-label="Settings" data-priority="3" data-order="1" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li tabindex="0">Save Results</li>
                <li tabindex="0">Export to Excel</li>
                <li tabindex="0">Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__list--checkboxes" role="menu">
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Airline</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" checked="checked" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Departure Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Arrival Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Price</span>
                  </label>
                </li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Hotel" aria-label="Find a Hotel" role="menubaritem" tabindex="-1">
            <div class="spark-icon-hotel-bed spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Rental Car" aria-label="Find a Rental Car" role="menubaritem" tabindex="-1">
            <div class="spark-icon-car-rental spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Print Journey Summary" aria-label="Print Journey Summary" role="menubaritem" tabindex="-1">
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more" tabindex="-1">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>

    </div>
  </div>
</div>
// Vanilla JS
// Vanilla JS
var el = document.querySelector('.spark-toolbar');
var toolbarInstance = new Spark.Toolbar(el);

// jQuery
$('.spark-toolbar').sparkToolbar();

Limited Horizontal Space Icon Example

Toolbar Title

<style>
  /* example styles */

  .spark-toolbar-example {
    background: #fff;
  }

  .spark-toolbar-example h4 {
    margin: 0;
    line-height: 60px;
  }

  .spark-toolbar-example .spark-toolbar {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
  }
</style>
<div class="container">
  <div class="spark-toolbar-example row">
    <div class="col-xs-10 col-md-10">
      <h4>Toolbar Title</h4>
    </div>
    <div class="col-xs-2 col-md-2">
      <div class="spark-toolbar spark-toolbar--icon" role="menubar" tabindex="0">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item" label="Filter Results" aria-label="Filter Results" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content spark-toolbar__item--content__container ">
              <h6>Number of Tickets</h6>
              <div class="spark-slider--integrated">
                <input type="number" min="1" max="30" value="4">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle"></button>
                  <span class="spark-slider__track">
      <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
              <h6>Price Per Ticket</h6>
              <div class="spark-range-slider">
                <input type="number" min="1" max="5000" value="100" title="Start">
                <span class="spark-range-slider__input-divider"></span>
                <input type="number" min="1" max="5000" value="3000" title="End">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle" title="Start"></button>
                  <button class="spark-slider__handle" title="End"></button>
                  <span class="spark-slider__track">
                    <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="View Map" aria-label="View Map" role="menubaritem" tabindex="-1">
            <div class="spark-icon-map spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Share Your Journey" aria-label="Share Your Journey" role="menubaritem" tabindex="-1">
            <div class="spark-icon-share spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" aria-label="Settings" data-priority="3" data-order="1" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li tabindex="0">Save Results</li>
                <li tabindex="0">Export to Excel</li>
                <li tabindex="0">Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__list--checkboxes" role="menu">
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Airline</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" checked="checked" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Departure Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Arrival Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Price</span>
                  </label>
                </li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Hotel" aria-label="Find a Hotel" role="menubaritem" tabindex="-1">
            <div class="spark-icon-hotel-bed spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Rental Car" aria-label="Find a Rental Car" role="menubaritem" tabindex="-1">
            <div class="spark-icon-car-rental spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Print Journey Summary" aria-label="Print Journey Summary" role="menubaritem" tabindex="-1">
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more" tabindex="-1">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </div>
  </div>
</div>
// Vanilla JS
// Vanilla JS
var el = document.querySelector('.spark-toolbar');
var toolbarInstance = new Spark.Toolbar(el);

// jQuery
$('.spark-toolbar').sparkToolbar();

Text Button Toolbar

Text Example

Toolbar Title

<style>
  /* example styles */

  .spark-toolbar-example {
    background: #fff;
  }

  .spark-toolbar-example h4 {
    margin: 0;
    line-height: 60px;
  }

  .spark-toolbar-example .spark-toolbar {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
  }
</style>
<div class="container">
  <div class="spark-toolbar-example row">
    <div class="col-xs-10 col-md-5">
      <h4>Toolbar Title</h4>
    </div>
    <div class="col-xs-2 col-md-7">
      <div class="spark-toolbar" role="menubar" tabindex="0">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item" label="Filter Results" aria-label="Filter Results" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content spark-toolbar__item--content__container ">
              <h6>Number of Tickets</h6>
              <div class="spark-slider--integrated">
                <input type="number" min="1" max="30" value="4">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle"></button>
                  <span class="spark-slider__track">
      <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
              <h6>Price Per Ticket</h6>
              <div class="spark-range-slider">
                <input type="number" min="1" max="5000" value="100" title="Start">
                <span class="spark-range-slider__input-divider"></span>
                <input type="number" min="1" max="5000" value="3000" title="End">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle" title="Start"></button>
                  <button class="spark-slider__handle" title="End"></button>
                  <span class="spark-slider__track">
                    <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" disabled label="View Map" aria-label="View Map" role="menubaritem" tabindex="-1">
            <div class="spark-icon-map spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Share Your Journey" aria-label="Share Your Journey" role="menubaritem" tabindex="-1">
            <div class="spark-icon-share spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" aria-label="Settings" data-priority="3" data-order="1" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li tabindex="0">Save Results</li>
                <li tabindex="0">Export to Excel</li>
                <li tabindex="0">Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__list--checkboxes" role="menu">
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Airline</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" checked="checked" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Departure Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Arrival Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Price</span>
                  </label>
                </li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Hotel" aria-label="Find a Hotel" role="menubaritem" tabindex="-1">
            <div class="spark-icon-hotel-bed spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Rental Car" aria-label="Find a Rental Car" role="menubaritem" tabindex="-1">
            <div class="spark-icon-car-rental spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Print Journey Summary" aria-label="Print Journey Summary" role="menubaritem" tabindex="-1">
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more" tabindex="-1">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </div>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-toolbar');
var toolbarInstance = new Spark.Toolbar(el);

// jQuery
$('.spark-toolbar').sparkToolbar();

Limited Horizontal Space Text Example

Toolbar Title

<style>
  /* example styles */

  .spark-toolbar-example {
    background: #fff;
  }

  .spark-toolbar-example h4 {
    margin: 0;
    line-height: 60px;
  }

  .spark-toolbar-example .spark-toolbar {
    position: absolute;
    top: calc(50% - 1.5rem);
    right: 0;
  }
</style>
<div class="container">
  <div class="spark-toolbar-example row">
    <div class="col-xs-10 col-md-10">
      <h4>Toolbar Title</h4>
    </div>
    <div class="col-xs-2 col-md-2">
      <div class="spark-toolbar" role="menubar" tabindex="0">
        <div class="spark-toolbar__container--visible">
          <div class="spark-toolbar__item" label="Filter Results" aria-label="Filter Results" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content spark-toolbar__item--content__container ">
              <h6>Number of Tickets</h6>
              <div class="spark-slider--integrated">
                <input type="number" min="1" max="30" value="4">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle"></button>
                  <span class="spark-slider__track">
      <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
              <h6>Price Per Ticket</h6>
              <div class="spark-range-slider">
                <input type="number" min="1" max="5000" value="100" title="Start">
                <span class="spark-range-slider__input-divider"></span>
                <input type="number" min="1" max="5000" value="3000" title="End">
                <div class="spark-slider__controls">
                  <button class="spark-slider__handle" title="Start"></button>
                  <button class="spark-slider__handle" title="End"></button>
                  <span class="spark-slider__track">
                    <span class="spark-slider__track-fill"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="spark-icon-sliders spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="View Map" aria-label="View Map" role="menubaritem" tabindex="-1">
            <div class="spark-icon-map spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Share Your Journey" aria-label="Share Your Journey" role="menubaritem" tabindex="-1">
            <div class="spark-icon-share spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Settings" aria-label="Settings" data-priority="3" data-order="1" role="menubaritem" tabindex="-1">
            <div class="spark-toolbar__item--content">
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li tabindex="0">Save Results</li>
                <li tabindex="0">Export to Excel</li>
                <li tabindex="0">Create an Alert</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__item--close-on-click">
                <li>Modify Search</li>
                <li>Advanced Search</li>
              </ul>
              <ul class="spark-toolbar__list spark-toolbar__list--checkboxes" role="menu">
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Airline</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" checked="checked" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Departure Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Arrival Time</span>
                  </label>
                </li>
                <li role="menuitem">
                  <label>
                    <input type="checkbox" />
                    <span class="spark-toolbar__list--checkboxes--helper"></span>
                    <span class="spark-toolbar__list--checkboxes--content">Price</span>
                  </label>
                </li>
              </ul>
            </div>
            <div class="spark-icon-cog spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Hotel" aria-label="Find a Hotel" role="menubaritem" tabindex="-1">
            <div class="spark-icon-hotel-bed spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" data-modal="#simpleModal" label="Find a Rental Car" aria-label="Find a Rental Car" role="menubaritem" tabindex="-1">
            <div class="spark-icon-car-rental spark-toolbar__item-helper"></div>
          </div>
          <div class="spark-toolbar__item" label="Print Journey Summary" aria-label="Print Journey Summary" role="menubaritem" tabindex="-1">
            <div class="spark-icon-print spark-toolbar__item-helper"></div>
          </div>
        </div>
        <div class="spark-toolbar__show-more" tabindex="-1">
          <i class="spark-icon-menu-ellipsis-vertical"></i>
        </div>
        <!-- All items should be placed in .spark-toolbar__container-shown -->
        <div class="spark-toolbar__container--hidden">
        </div>
      </div>
    </div>
  </div>
</div>
// Vanilla JS
// Vanilla JS
var el = document.querySelector('.spark-toolbar');
var toolbarInstance = new Spark.Toolbar(el);

// jQuery
$('.spark-toolbar').sparkToolbar();

Modal Title

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.