global-header

About Global Header

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>

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>

Base

<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>

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>

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

<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>

Focused and expanded

<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>

Active and typing

<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>

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.

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">

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">

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">

Favorites popover

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.

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

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">

Task menu

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">

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">

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">

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.

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">

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">

Notification Popover

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.

<section aria-describedby="dialog-body-id-89" aria-labelledby="dialog-heading-id-92" 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">

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.