Global Header - Lightning Design System

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party).

Skip to Navigation Skip to Main Content

Structure#

The global header is made up of 3 distinct sections, the logo, the global search, and the global actions. Each section is wrapped in a <div> with the class name slds-global-header__item. The search region gets the modifier class slds-global-header__item_search. This class provides particular styling to handle the search box.

<header class="slds-global-header_container">
  <div class="slds-global-header">
    <div class="slds-global-header__item">...</div>
    <div class="slds-global-header__item slds-global-header__item_search">...</div>

In most scenarios, you will want to fix the global header to the top of the viewport. To achieve this, wrap the global header component in a <div> with the class name slds-global-header_container.

<header class="slds-global-header_container">
  <div class="slds-global-header">...</div>
</header>

Accessibility#

For screen reading users, we need to provide a way to navigate over the global header and directly to content regions. For this scenario, we need to provide two links above the global header that provides navigation to landmarks within the app. These links are visually hidden by default but become visible when focused.

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header">...</div>

Base#

Skip to Navigation Skip to Main Content

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid_align-spread">

Logo#

The logo region is simply a <div> with the class name slds-global-header__logo. The logo is applied as a background image with CSS. This allows us to constrain the dimensions of the logo by a max-height of 40px and a max-width of 200px.

<div class="slds-global-header__item">
  <div class="slds-global-header__logo"></div>
</div>

Global Search#

The global search component is used for application wide search. The form element is implemented as a Combobox, please refer to the accessibility guidelines on the Combobox component page for implementation guidance.

Default#

Skip to Navigation Skip to Main Content

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid_align-spread">

Focused and expanded#

Skip to Navigation Skip to Main Content

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid_align-spread">

Active and typing#

Skip to Navigation Skip to Main Content

<header class="slds-global-header_container">
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Navigation</a>
  <a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text_focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid_align-spread">

Global Actions Bar#

The global actions bar holds application wide task actions that will persist with the user through their experience.

The global actions bar is located in the right region of the global header.

Skip to Navigation Skip to Main Content

Favorites#

The favorites action is used to "favorite" a commonly used page within a user's experience. When a user "favorites" a page by pressing the favorites action, the button icon changes color with a small animation to confirm your selection.

Not pressed#

<li class="slds-global-actions__item">
  <div class="slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click">
    <div class="slds-button-group">
      <button class="slds-button slds-button_icon slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small" aria-pressed="false" title="Toggle Favorites">

Pressed#

When pressed, apply the class slds-is-selected to the slds-global-actions__favorites-action button element.

Accessibility Requirement
When the favorites action is pressed, we need to toggle the aria-pressed attribute to true. This will inform a screen reader that the button has been pressed.

<li class="slds-global-actions__item">
  <div class="slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click">
    <div class="slds-button-group">
      <button class="slds-button slds-button_icon slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small slds-is-selected" aria-pressed="true" title="Toggle Favorites">

Disabled#

If the favorites action needs to become disabled, apply the disabled attribute and the class slds-is-disabled to the button with class="slds-global-actions_favorites-action".

<li class="slds-global-actions__item">
  <div class="slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click">
    <div class="slds-button-group">
      <button class="slds-button slds-button_icon slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small slds-is-disabled" disabled="" aria-pressed="false" title="Toggle Favorites">

The favorites popover is invoked when a user clicks on the dropdown arrow action icon inside of the favorites button group. The favorites popover is implemented as a Popover - Dynamic Menu Variant component, please refer to the accessibility guidelines on the Popover component page for implementation guidance.

My Favorites
AcmeAccount • San Francisco
Edge SLAAccount • San Francisco

<ul class="slds-global-actions">
  <li class="slds-global-actions__item">
    <div class="slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click">
      <div class="slds-button-group">

Task#

<li class="slds-global-actions__item">
  <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__task slds-global-actions__item-action" aria-haspopup="true" title="Global Actions">
      <svg class="slds-button__icon" aria-hidden="true">

When the global task action is invoked, a menu inside of a dropdown becomes visible. Please refer to the accessibility section of the Menus component for implementation guidelines.

<ul class="slds-global-actions">
  <li class="slds-global-actions__item">
    <div class="slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click">
      <div class="slds-button-group">

Help#

<li class="slds-global-actions__item">
  <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action" aria-haspopup="true" title="Help and Training">
      <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">

Setup#

<li class="slds-global-actions__item">
  <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action" aria-haspopup="true" title="Setup">
      <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">

Notifications#

Notifications are a way to notify a user about a global change within the application. This is commonly used to communicate a Chatter mention/reply or a status update on an opportunity pipeline.

Skip to Navigation Skip to Main Content

No notifications#

<li class="slds-global-actions__item">
  <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action" title="no new notifications" aria-live="assertive" aria-atomic="true">
      <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">

New notifications#

When a notification is coming through, we want to apply the slds-incoming-notification class to both the slds-global-actions__notifications button, as well as the slds-notification-badge. This will initiate the animation that there is a new incoming notification. A notification badge will also need to receive the slds-show-notification class, this ensures the badge becomes visible for the incoming animation to work. The slds-show-notification class should also be applied if a user has unread notifications upon their return to their application.

Accessibility Note
The notification badge is hidden from screen readers by add the attribute aria-hidden="true" so the badge doesn't have to be inside the button itself. Since the badge count is hidden, we need to add the count number to the button text via some hidden assistive text. The assistive text string should be updated with number of new notifications, such as "3 new notification". If there are no notifications, the assistive text should read "No notifications". The button element also requires aria-live="assertive" to announce any count updates.

<li class="slds-global-actions__item">
  <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
    <button class="slds-button slds-button_icon slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action slds-incoming-notification" title="1 new notifications" aria-live="assertive"
      aria-atomic="true">

The notification popover is invoked when a user clicks on the notification action icon. The notification popover is implemented as a Popover component, please refer to the accessibility guidelines on the Popover component page for implementation guidance.

3
Notifications

<section aria-describedby="dialog-body-id-6" aria-labelledby="dialog-heading-id-6" class="slds-popover slds-popover_large slds-nubbin_top-right" role="dialog" style="position:absolute;top:calc(100% + 12px);right:-12px">
  <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close" title="Close dialog">
    <svg class="slds-button__icon" aria-hidden="true">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>

Unread notifications#

When a notification item is unread, add the class slds-global-header__notification_unread to the slds-global-header__notification list item. This will provide the unread styles. In addition to adding the class name, please add a dot indicator, <abbr class="slds-text-link slds-m-horizontal_xxx-small" title="unread">●</abbr>, to provide visual affordance that the item is unread.

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-global-header_container`
Summary	Container that fixes the global header to the top of the viewport, contains global header element
Support	dev-ready
Restrict	`header`
Variant	True

Selector	`.slds-global-header`
Summary
Restrict	`.slds-global-header_container div`

Selector	`.slds-global-header__item`
Summary	A region within the global header
Restrict	`.slds-global-header div, .slds-global-header ul`

Selector	`.slds-global-header__button_icon`Deprecated
Summary	Button icons on the global header
Restrict	`.slds-global-header__item button`

Selector	`.slds-global-header__button_icon-actions`Deprecated
Summary	Button icon specifically for global actions
Restrict	`.slds-global-header__item button`

Selector	`.slds-global-header__button_icon-favorites`Deprecated
Summary	Button icon specifically for global actions
Restrict	`.slds-global-header__item button`

Selector	`.slds-is-selected`Deprecated
Summary	Selected state for favorites button
Restrict	`.slds-global-header__button_icon-favorites`

Selector	`.slds-is-disabled`Deprecated
Summary	Disabled state for favorites button
Restrict	`.slds-global-header__button_icon-favorites`

Selector	`.global-header__icon`Deprecated
Summary	Deal with sizing for global header icons
Restrict	`.slds-global-header__item svg`

Selector	`.slds-global-header__logo`
Summary	Container of the global header logo
Restrict	`.slds-global-header__item div`

Selector	`.slds-global-header__item_search`
Summary	Region that contains the search input, handles sizing
Restrict	`.slds-global-header__item:nth-child(2)`

Selector	`.slds-global-search__form-element div`
Summary	Primary combobox that contains the search input, handles sizing
Restrict	`.slds-global-header__item_search`

Selector	`.slds-listbox_selection-group`
Summary	The container of pill selections found inside of a combobox group
Restrict	`.slds-combobox-group ~ div, .slds-combobox_container ~ div`

Selector	`.slds-is-expanded`
Summary	Expanded state of a selection group
Restrict	`.slds-listbox_selection-group`

Selector	`.slds-listbox-toggle`
Summary	Toggle button to show all of the pill selections
Restrict	`.slds-listbox_selection-group > span`

Selector	`.slds-backdrop`
Summary	Creates the shaded backdrop used behind the modal.
Restrict	`.slds-modal ~ div`

Selector	`.slds-backdrop_open`
Summary	Allows the backdrop to be visible.
Restrict	`.slds-backdrop`
Modifier	True

Selector	`.slds-global-actions`
Summary	Global actions component wrapper
Restrict	`.slds-global-header ul`

Selector	`.slds-global-actions__item`
Summary	List item for each global action
Restrict	`.slds-global-actions li`

Selector	`.slds-global-actions__item-action`
Summary	The actionable button inside of a global actions list item
Restrict	`.slds-global-actions__item button`

Selector	`.slds-global-actions__avatar`
Summary	User profile action icon
Restrict	`.slds-global-actions__item-action`

Selector	`.slds-global-actions__task`
Summary	Task action icon
Restrict	`.slds-global-actions__item-action`

Selector	`.slds-global-actions__notifications`
Summary	Notification action icon
Restrict	`.slds-global-actions__item-action`

Selector	`.slds-global-actions__favorites`
Summary	Favorites action button group
Restrict	`.slds-global-actions__item div`

Selector	`.slds-global-actions__favorites-action`
Summary	Star icon inside of favorites button group
Restrict	`.slds-global-actions__favorites button`

Selector	`.slds-is-selected`
Summary	Selected/clicked state on favorites button
Restrict	`.slds-global-actions__favorites-action`

Selector	`.slds-is-disabled`
Summary	Disabled state on favorites button
Restrict	`.slds-global-actions__favorites-action`

Selector	`.slds-global-actions__favorites-more`
Summary	More dropdown icon inside of favorites button group
Restrict	`.slds-global-actions__favorites button`

Selector	`.slds-notification-badge`
Summary	Notification counter badge
Restrict	`.slds-global-actions__item span`

Sections

Suggested for you

Recent Items

About Global Header#

Structure#

Accessibility#

Base#

Suggested for you

Recent Items

Logo#

Global Search#

Default#

Suggested for you

Recent Items

Focused and expanded#

Suggested for you

Recent Items

Active and typing#

Suggested for you

Global Actions Bar#

Favorites#

Not pressed#

Pressed#

Accessibility Requirement

Disabled#

Favorites popover#

Task#

Task menu#

Help#

Setup#

Notifications#

No notifications#

New notifications#

Accessibility Note

Notification Popover#

Unread notifications#

Overview of CSS Classes#

What are these categories?

Global Header Release Notes

2.8.0

Removed

2.7.0

Changed

Cookie Consent Manager

General Information

General Information

Required Cookies

Required Cookies

First Party Cookies

Functional Cookies

Functional Cookies

First Party Cookies

Advertising Cookies

Advertising Cookies

33Across

33Across

33Across