Docked Utility Bar
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.
BaseDesktop OnlyRequires ui:scrollerWrapper
Preview
About Base
Fixed bar at the bottom of viewport, contains items
Overview of CSS Classes
| Selector | .slds-utility-bar_container |
|---|---|
| Summary | Fixed bar at the bottom of viewport, contains items |
| Support | dev-ready |
| Restrict | footer |
| Variant | True |
| Selector | .slds-utility-bar |
|---|---|
| Summary | Fixed bar at the bottom of viewport, contains items |
| Restrict | .slds-utility-bar_container ul |
| Selector | .slds-indicator_unread |
|---|---|
| Summary | Notification indicator |
| Restrict | .slds-utility-bar abbr |
| Selector | .slds-utility-bar__item |
|---|---|
| Summary | Items that invoke specific utility bar panel |
| Restrict | .slds-utility-bar li |
| Selector | .slds-has-notification |
|---|---|
| Summary | Creates styles for a utility bar item when it has a notification within its panel |
| Restrict | .slds-utility-bar__item |
| Selector | .slds-indicator_unread |
|---|---|
| Summary | Unread notification icon |
| Restrict | .slds-has-notification span |
| Selector | .slds-utility-bar__action |
|---|---|
| Summary | Button that invokes utility panel |
| Restrict | .slds-utility-bar button |
| Selector | .slds-is-active |
|---|---|
| Summary | |
| Restrict | .slds-utility-bar__action |
| Modifier | True |
| Selector | .slds-utility-bar__text |
|---|---|
| Summary | Container for utility bar item text, allows for multi-line text output |
| Restrict | .slds-utility-bar__action > span |
| Selector | .slds-utility-panel |
|---|---|
| Summary | Container of the utility panel |
| Restrict | .slds-utility-bar_container div |
| Selector | .slds-is-open |
|---|---|
| Summary | |
| Restrict | .slds-utility-panel |
| Modifier | True |