Global Navigation
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
About Navigation Bar#
The navigation bar is composed of a wrapper and 2 required regions:
- Primary, which contains the App Launcher and App Name
- Secondary, which contains the App Items, for navigating within the current app
The markup should follow the order listed above for proper keyboard interaction set by the 508 compliance standards. Each included region inside the wrapper of .slds-context-bar needs the appropriate ordering class name, e.g. .slds-context-bar__primary.
<div class="slds-context-bar">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Items on the Navigation Bar#
Every item that sits on the horizontal axis of the navigation bar should receive the class .slds-context-bar__item.
<li class="slds-context-bar__item">
<a href="#" class="slds-context-bar__label-action" title="Menu Item">
<span class="slds-truncate" title="Menu Item">Menu Item</span>
</a>This class is used to notify the navigation bar that it has a new item. The styles applied allow the children of the navigation bar to vertically aligned, without knowing the height of the navigation bar. The styles will also allow for the actionable items .slds-context-bar__label-action and .slds-context-bar__icon-action to stretch 100% of the height of the navigation bar, optimizing the hit area of those actions.
Since the items are leveraging flexbox, the elements inside can easily be re-ordered easily by using an order class helper on the element, such as .slds-order--[#].
Building the Navigation Bar Item#
The navigation bar item is built to accommodate 2 specific layout needs.
- Individual text hyperlink to invokes link destination
- Individual text hyperlink to invokes link destination + button icon to indicate menu dropdown is available
These layouts are built upon 2 reusable classes. The text hyperlink action area would get the class .slds-context-bar__label-action and the icon based action area would get the class .slds-context-bar__icon-action.
The .slds-context-bar__icon-action class handles the alignment and coloring of the icons based on interactions such as :hover, :focus and :active. This is a required if you have an actionable icon area adjacent to an actionable text area.
The markup structure should have the button icon(s) preceding the text label. The icons can be visually reordered by using the ordering utility classes such as .slds-order--[#].
Icons#
The icons in the navigation bar either serve as a visual affordance that indicates an item has a menu with additional actions or the icon itself is actionable.
<li class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click">
<a href="#" class="slds-context-bar__label-action" title="Menu Item">
<span class="slds-truncate" title="Menu Item">Menu Item</span>
</a>The class used to indicate a button icon will sit adjacent to another actionable item is .slds-context-bar__icon-action. If you two icons in an item, each icon should be contained in it’s own .slds-context-bar__icon-action element.
The look and feel of the button icon is dependant on the modifiers used from Button Icon Variant Component page.
The .slds-context-bar__icon-action styles apply a default left and right padding of 0.75rem. That padding can be removed or modified by using our spacing utilities. In example #1, the left padding has been removed by using the class .slds-p-left--none.
If a navigation bar item has an icon then we want to provide visual indication that its active when a user hovers into its region. To make this happen, apply the class .slds-hint-parent to the hover region, most cases would be .slds-context-bar__icon-action element.
Menu trigger area#
When a navigation bar items requires a menu with additional sub options or actions, the classes that need to be added to the target hit area are the following:
<li class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click">
<a href="#" class="slds-context-bar__label-action" title="Menu Item">
<span class="slds-truncate" title="Menu Item">Menu Item</span>
</a>.slds-context-bar__dropdown-trigger— Add a hoverable zone below the action so that the dropdown doesn’t disappear when the mouse is between the action and the dropdown — this is specific to the navigation bar.slds-dropdown-trigger— Globally used utility that notifies the element there is a dropdown menu.slds-dropdown-trigger_click— Specifies that an item requires a click to open interaction.
If the navigation item has one hyperlink with a menu containing additional sub actions, then the hover area that invokes the dropdown menu is both the .slds-context-bar__label-action and .slds-context-bar__icon-action. If the navigation item is demonstrated as a tab format, one hyperlink plus two additional actions, then the hover area that invokes the dropdown menu is only on the .slds-context-bar__icon-action.
Specifics of the Navigation Bar#
App Launcher#
The app launcher is the one element on the navigation bar that requires a mouse click or keyboard enter to invoke the app launcher dropdown. Please use JavaScript to accommodate this requirement.
App Name#
The application name needs to receive the .slds-context-bar__app-name class. This class will handle such things as its unique font sizing and truncation widths.
Dividers#
Due to the platform-esc nature of the navigation bar, there is an available element utility to apply a divider between sections where needed. The .slds-context-bar__vertical-divider class should be applied to an empty <div> and placed within the markup of your navigation bar for a visual divider.
Alternatively, two classes are available to add border using css. Adding the class .slds-context-bar__item--divider-left will add a left border to a navigation bar item while .slds-context-bar__item--divider-right will add a right border.
States#
Active item#
<div class="slds-context-bar">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Menu Open#
<div class="slds-context-bar">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">About Navigation Tab Bar#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Accessibility#
Communicating Status to Screen Readers:
When communicating tab status updates to the user, unread, warning, error and success notifications should all employ the same technique to communicate that update to users of assistive technology, who would be otherwise unaware of that status change.
You should use a single hidden ARIA live region for the entire subtabs block, the contents of which gets updated each time a subtab changes its status. The contents should contain a description of the status level and the name of the tab the status change event occurred in. The markup would look something like:
<div className="slds-assistive-text" aria-live="polite">...</div>
Upon clearing the status on a given tab, you should clear the message from the live region.
Unread status:
In order to inform screen readers of new activity in a tab, 2 things should occur.
The
titleattribute andaria-labelon the element that displays the red dot should read "New Activity". This will update the text content of the tab to include the "New Activity" text: "New Activity Chat - Customer".The hidden live region as described above, should have its content updated to "New Activity in Tab: [Tab Name Here]" to alert the user of new activity in that particular subtab.
<span aria-label="New Activity" className="slds-indicator_unread" title="New Activity"></span>
<div className="slds-assistive-text" aria-live="polite">New activity in Tab: Chat - Customer</div>
Warning, Error and Success Tabs:
When you wish to draw attention to a particular tab because something has occurred in that tab that corresponds to an alert level, you can use the slds-has-warning, slds-has-error or slds-has-success class to change the background color and introduce a short pulsing animation to draw attention from the user.
The icon is updated to match the corresponding alert level, to give an extra way to communicate the level of the status without relying on the use of color alone.
In this example we show that something inside the tab is about to break a service level agreement in 30 seconds, and we wish to draw the users attention to it to take action.
Update the hidden live region with a message that informs the user of the status level, the message and the offending subtab [level]: [message] in tab: [tab_name].
<div className="slds-assistive-text" aria-live="polite">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</div>
States#
Active#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Focus#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Unsaved#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Unread#
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Overflow#
<div class="demo-only" style="height:12rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread/Unsaved#
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Tab Feedback States#
Success#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Active#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Focus#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unsaved#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread/Unsaved#
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Warning#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Active#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Focus#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unsaved#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread/Unsaved#
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Error#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Active#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Focus#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unsaved#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread/Unsaved#
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Pinned#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Pinned States#
Active#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Focus#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Unsaved#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Unread#
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Overflowed Tabs#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Opened#
<div class="demo-only" style="height:8rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unsaved#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Opened#
<div class="demo-only" style="height:8rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Unread#
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Opened#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Unread/Unsaved#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">No Icon#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">New activity in Tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Feedback states for overflow menu#
Success#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Unsaved/Unread#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Success: SLA agreement warning cleared in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Warning#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Unsaved/Unread#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Warning: SLA agreement in 30 seconds in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Error#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Unsaved/Unread#
<div class="demo-only" style="height:8rem">
<span aria-live="polite" class="slds-assistive-text">Violation: SLA agreement in tab: Chat - Customer</span>
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">Object Switcher#
Active#
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">
<div class="slds-context-bar__icon-action">Menu open#
<div class="demo-only" style="height:11rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Add a tab dialog#
<div class="demo-only" style="height:8rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Active tab with Subtabs#
<div class="demo-only" style="height:8rem">
<div class="slds-context-bar slds-context-bar_tabs">
<div class="slds-context-bar__primary">
<div class="slds-context-bar__item slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-no-hover">Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-context-bar |
|---|---|
| Summary | Navigation bar wrapper |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-context-bar__primary |
|---|---|
| Summary | Primary zone |
| Restrict | .slds-context-bar div |
| Selector | .slds-context-bar__secondary |
|---|---|
| Summary | Secondary zone |
| Restrict | .slds-context-bar nav, .slds-context-bar div |
| Selector | .slds-context-bar__vertical-divider |
|---|---|
| Summary | Manually add a vertical divider between elements |
| Restrict | .slds-context-bar div |
| Selector | .slds-context-bar__item |
|---|---|
| Summary | Any item on the horizontal axis of the context nav bar Interactions such as hovers + active are defaults, bottom of the file deals with light / dark theme thresholds |
| Restrict | .slds-context-bar div, .slds-context-bar li |
| Selector | .slds-has-focus |
|---|---|
| Summary | Toggled focused class applied via JavaScript |
| Restrict | .slds-context-bar__item |
| Modifier | True |
| Selector | .slds-has-success |
|---|---|
| Summary | Success notification on a tab |
| Restrict | .slds-context-bar__item |
| Selector | .slds-has-error |
|---|---|
| Summary | Error notification on a tab |
| Restrict | .slds-context-bar__item |
| Selector | .slds-has-warning |
|---|---|
| Summary | Warning notification on a tab |
| Restrict | .slds-context-bar__item |
| Selector | .slds-context-bar__label-action |
|---|---|
| Summary | Actionable Text Links |
| Restrict | .slds-context-bar__item a, .slds-context-bar__item span, .slds-context-bar__item button |
| Selector | .slds-context-bar__app-name |
|---|---|
| Summary | Styles for application name region |
| Restrict | .slds-context-bar__label-action |
| Selector | .slds-is-unsaved |
|---|---|
| Summary | Dirty state for a nav item |
| Restrict | .slds-context-bar__item, .slds-dropdown__item |
| Selector | .slds-has-notification |
|---|---|
| Summary | Notifications style - Styling a tab or overflow item to indicate the tab has unread activity |
| Restrict | .slds-context-bar__item, .slds-context-bar__item .slds-dropdown__item |
| Selector | .slds-indicator_unread |
|---|---|
| Summary | Unread notification icon |
| Restrict | .slds-has-notification span |
| Selector | .slds-indicator_unsaved |
|---|---|
| Summary | Unsaved indicator - This can probably be used in other locations as well |
| Restrict | .slds-context-bar__item span, abbr |
| Selector | .slds-context-bar__object-switcher |
|---|---|
| Summary | Styles for object switcher region |
| Restrict | .slds-context-bar__item |
| Selector | .slds-indicator-container |
|---|---|
| Summary | Used to reserve spacing for tab indicators |
| Restrict | .slds-context-bar__item span, .slds-sub-tabs__item span |
| Selector | .slds-is-active |
|---|---|
| Summary | Active state of an item |
| Restrict | .slds-context-bar__item:not(.slds-no-hover) |
| Modifier | True |
| Selector | .slds-context-bar__item_divider-left |
|---|---|
| Summary | Add a left border to a context bar item |
| Restrict | .slds-context-bar div, .slds-context-bar li |
| Selector | .slds-context-bar__item_divider-right |
|---|---|
| Summary | Add a right border to a context bar item |
| Restrict | .slds-context-bar div, .slds-context-bar li |
| Selector | .slds-context-bar__icon-action |
|---|---|
| Summary | Actionable Icons |
| Restrict | .slds-context-bar div |
| Selector | .slds-context-bar_tabs |
|---|---|
| Summary | Tab modifier when using a tabset |
| Support | dev-ready |
| Restrict | .slds-context-bar |
| Variant | True |
| Selector | .slds-context-bar__item_tab |
|---|---|
| Summary | Context bar tab items |
| Restrict | .slds-context-bar_tabs .slds-context-bar__item |
| Selector | .slds-is-pinned |
|---|---|
| Summary | Pinned state - toggles visibility of elements inside of tab |
| Restrict | .slds-context-bar__item_tab |
| Modifier | True |
| Selector | .slds-has-sub-tabs |
|---|---|
| Summary | Modifier that notifies a parent component that it has subtabs inside of it |
| Restrict | .slds-context-bar__item_tab |
Global Navigation Release Notes
2.13.0
Changed
- Adjusted color of unsaved tab indicator asterisk to comply with accessibility color contrast rules
2.8.3
Fixed
- Fixed issue where a navigation item would lose its background color when active and/or hovered.
2.8.0
Added
- Tabbed Navigation Bar can now show 3 different statuses to alert users - error, success, and warning
Removed
- Removed
slds-text-title_capsfrom menu headers.
2.7.1
Fixed
- Remove
font-weight: 300from app title to increase legibility
2.7.0
Changed
- Overflow menu on navigation item no longer opens on hover.
- Added the
slds-indicator-containerclass to be used whenever tabs and menu items have unread or unsaved indicators.- The
slds-indicator_unsavedabbreviation and/or theslds-indicator_unsavedspan should always be contained within a<span>with classslds-indicator-container. - This class preserves spacing between the indicators and the tab/menu text when no icon is present by adding a margin-right.
- If the indicator container is empty, no margin-right is added.
- The
Fixed
- HTML validation error on tabbed navigation indicators, swapped a
divfor aspan