Components

Docked Utility Bar

Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels.

Utility BarUtility Bar › DockedUtility Bar › Item ActiveUtility Bardev readydesktop

Preview

Code

<footer class="slds-utility-bar_container" role="footer" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#call"></use>
        </svg>Call</button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clock"></use>
        </svg>History</button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#note"></use>
        </svg>Notes</button>
    </li>
  </ul>
</footer>

Utility PanelUtility Panel › OpenUtility Panel › ClosedUtility Paneldev readydesktop

Preview

Code

<footer class="slds-utility-bar_container" role="footer" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action slds-is-active">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#call"></use>
        </svg>Call</button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#clock"></use>
        </svg>History</button>
    </li>
    <li class="slds-utility-bar__item">
      <button class="slds-button slds-utility-bar__action">
        <svg class="slds-button__icon slds-button__icon--left" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#note"></use>
        </svg>Notes</button>
    </li>
  </ul>
  <div class="slds-utility-panel slds-grid slds-grid--vertical slds-is-open" role="dialog" aria-labelledby="panel-heading-01">
    <div class="slds-utility-panel__header slds-grid slds-shrink-none">
      <div class="slds-media slds-media--center">
        <div class="slds-media__figure slds-m-right--x-small">
          <span class="slds-icon_container">
            <svg class="slds-icon slds-icon--small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 id="panel-heading-01">Call</h2>
        </div>
      </div>
      <div class="slds-col--bump-left">
        <button class="slds-button slds-button--icon" title="settings">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Minimize Panel</span>
        </button>
      </div>
    </div>
    <div class="slds-utility-panel__body">
      <div class="slds-align--absolute-center">Utility Panel Body</div>
    </div>
  </div>
</footer>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-utility-bar_container
Applied to:

<div>

Outcome:

Container that is fixed to the bottom of the viewport, contains one utility panel at a time

Required:

Required

Comments:

--

.slds-utility-bar
Applied to:

<div>

Outcome:

Fixed bar at the bottom of viewport, contains items

Required:

Required

Comments:

--

.slds-utility-bar__item
Applied to:

<button>

Outcome:

Items that invoke specific utility bar panel

Required:

Required

Comments:

--

.slds-utility-panel
Applied to:

<div>

Outcome:

Container of the utility panel

Required:

Required

Comments:

--

.slds-utility-panel__header
Applied to:

<div>

Outcome:

Header that contains an icon, title and panel actions such as minimizing the panel

Required:

Required

Comments:

--

.slds-utility-panel__body
Applied to:

<div>

Outcome:

Area that contains the utility panel feature

Required:

Required

Comments:

--