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.

About Docked Utility Bar

Fixed bar at the bottom of viewport, that contains items.

Base

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">

States

Panel open

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">

Item has notification

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">

Item has popout

If the utility bar item is active and its panel is popped open in a new window, use .slds-utility-bar__item_pop-out on the .slds-utility-bar__item. This will add a visual indicator to communicate that the panel is opened in a new window.

<footer class="slds-utility-bar_container" aria-label="Utility Bar">
  <h2 class="slds-assistive-text">Utility Bar</h2>
  <ul class="slds-utility-bar">