Global Navigation

global-navigation

.slds-context-bar — Global Navigation is the list of navigation links your users find in the Header on every page in Salesforce. Your Global Navigation includes a Navigation Bar where your users find the App Launcher, App Name, and Pages that each App includes.

navigation-bar

.slds-context-bar — Navigation bar wrapper

.slds-context-bar__primary

.slds-context-bar__primary — Primary zone

.slds-context-bar__secondary

.slds-context-bar__secondary — Secondary zone

.slds-context-bar__vertical-divider

.slds-context-bar__vertical-divider — Manually add a vertical divider between elements

.slds-context-bar__item

.slds-context-bar__item — 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

.slds-is-unsaved

.slds-is-unsaved — Dirty state for a nav item

.slds-has-notification

.slds-has-notification — Notifications style - Styling a tab or overflow item to indicate the tab has unread activity

.slds-indicator_unread

.slds-indicator_unread — Unread notification icon

.slds-has-focus

.slds-has-focus — Toggled focused class applied via JavaScript

.slds-has-success

.slds-has-success — Success notification on a tab

.slds-has-error

.slds-has-error — Error notification on a tab

.slds-has-warning

.slds-has-warning — Warning notification on a tab

.slds-context-bar__label-action

.slds-context-bar__label-action — Actionable Text Links

.slds-context-bar__app-name

.slds-context-bar__app-name — Styles for application name region

.slds-indicator_unsaved

.slds-indicator_unsaved — Unsaved indicator - This can probably be used in other locations as well

.slds-context-bar__object-switcher

.slds-context-bar__object-switcher — Styles for object switcher region

.slds-indicator-container

.slds-indicator-container — Used to reserve spacing for tab indicators

.slds-is-active

.slds-is-active — Active state of an item

.slds-context-bar__item_divider-left

.slds-context-bar__item_divider-left — Add a left border to a context bar item

.slds-context-bar__item_divider-right

.slds-context-bar__item_divider-right — Add a right border to a context bar item

.slds-context-bar__icon-action

.slds-context-bar__icon-action — Actionable Icons

navigation-tab-bar

.slds-context-bar_tabs — Tab modifier when using a tabset

.slds-context-bar__item_tab

.slds-context-bar__item_tab — Context bar tab items

.slds-is-pinned

.slds-is-pinned — Pinned state - toggles visibility of elements inside of tab

.slds-has-sub-tabs

.slds-has-sub-tabs — Modifier that notifies a parent component that it has subtabs inside of it