Components

Global Header

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

BaseBase › DefaultBase › Favorites selectedBase › Favorites disabledBase › Global actions activeBase › Setup activeBasedev ready

Preview

Code

<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">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item--search">
      <div class="slds-form-element slds-lookup">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control lookup__search-control slds-input-has-icon slds-input-has-icon--left">
          <svg class="slds-input__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input type="search" id="global-search-01" class="slds-input slds-lookup__search-input" placeholder="Search Salesforce" />
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid--vertical-align-center">
      <li class="slds-grid">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon-favorites" title="Toggle Favorite">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>
          </svg>
          <span class="slds-assistive-text">Toggle Favorite</span>
        </button>
        <span class="slds-dropdown-trigger slds-dropdown-trigger--click">
          <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon slds-m-left--none" aria-haspopup="true" title="View Favorites">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">View Favorites</span>
          </button>
        </span>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-p-horizontal--xxx-small">
        <button class="slds-button slds-button--icon slds-button--icon-small slds-button--icon-container slds-button--icon-x-small slds-global-header__button--icon-actions slds-m-horizontal--xx-small" aria-haspopup="true" title="Global Actions">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>
          <span class="slds-assistive-text">Global Actions</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Help and Training">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#question"></use>
          </svg>
          <span class="slds-assistive-text">Help and Training</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Setup">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#setup"></use>
          </svg>
          <span class="slds-assistive-text">Setup</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Notifications">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#notification"></use>
          </svg>
          <span class="slds-assistive-text">Notifications</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="person name" />
          </span>
        </button>
      </li>
    </ul>
  </div>
</header>

SearchSearch › ActiveSearch › TypeaheadSearchdev ready

Preview

Code

<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">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item--search">
      <div class="slds-form-element slds-lookup slds-is-open">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--left">
          <svg class="slds-input__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input type="search" id="global-search-01" class="slds-input slds-lookup__search-input" placeholder="Search Salesforce" aria-owns="global-search-list-01" role="combobox" aria-activedescendant="" aria-expanded="true" aria-autocomplete="list"
          />
        </div>
        <div class="slds-lookup__menu" id="global-search-list-01">
          <div class="slds-lookup__item--label slds-text-body--small">Recent Items</div>
          <ul class="slds-lookup__list" role="listbox">
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-01" role="option">
                <svg class="slds-icon slds-icon-standard-opportunity slds-icon--small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Salesforce - 1,000 Licenses</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Opportunity • Prospecting</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-02" role="option">
                <svg class="slds-icon slds-icon-standard-contact slds-icon--small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Art Vandelay</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Contact • avandelay@vandelay.com</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-03" role="option">
                <svg class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Vandelary Industries</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-04" role="option">
                <svg class="slds-icon slds-icon-custom-8 slds-icon--small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/custom-sprite/svg/symbols.svg#custom8"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Salesforce UK 2016 Events</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">General Ledger • $20,000</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media" id="option-05" role="option">
                <svg class="slds-icon slds-icon-standard-lead slds-icon--small slds-media__figure" aria-hidden="true">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">H.E. Pennypacker</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Lead • Nursing</span>
                </div>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid--vertical-align-center">
      <li class="slds-grid">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon-favorites" title="Toggle Favorite">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>
          </svg>
          <span class="slds-assistive-text">Toggle Favorite</span>
        </button>
        <span class="slds-dropdown-trigger slds-dropdown-trigger--click">
          <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon slds-m-left--none" aria-haspopup="true" title="View Favorites">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">View Favorites</span>
          </button>
        </span>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-p-horizontal--xxx-small">
        <button class="slds-button slds-button--icon slds-button--icon-small slds-button--icon-container slds-button--icon-x-small slds-global-header__button--icon-actions slds-m-horizontal--xx-small" aria-haspopup="true" title="Global Actions">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>
          <span class="slds-assistive-text">Global Actions</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Help and Training">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#question"></use>
          </svg>
          <span class="slds-assistive-text">Help and Training</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Setup">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#setup"></use>
          </svg>
          <span class="slds-assistive-text">Setup</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Notifications">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#notification"></use>
          </svg>
          <span class="slds-assistive-text">Notifications</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="person name" />
          </span>
        </button>
      </li>
    </ul>
  </div>
</header>

NotificationsNotificationsdev ready

Preview

Code

<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">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item--search">
      <div class="slds-form-element slds-lookup">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control lookup__search-control slds-input-has-icon slds-input-has-icon--left">
          <svg class="slds-input__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input type="search" id="global-search-01" class="slds-input slds-lookup__search-input" placeholder="Search Salesforce" />
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid--vertical-align-center">
      <li class="slds-grid">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon-favorites" title="Toggle Favorite">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#favorite"></use>
          </svg>
          <span class="slds-assistive-text">Toggle Favorite</span>
        </button>
        <span class="slds-dropdown-trigger slds-dropdown-trigger--click">
          <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon slds-m-left--none" aria-haspopup="true" title="View Favorites">
            <svg class="slds-button__icon" aria-hidden="true">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"></use>
            </svg>
            <span class="slds-assistive-text">View Favorites</span>
          </button>
        </span>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-p-horizontal--xxx-small">
        <button class="slds-button slds-button--icon slds-button--icon-small slds-button--icon-container slds-button--icon-x-small slds-global-header__button--icon-actions slds-m-horizontal--xx-small" aria-haspopup="true" title="Global Actions">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
          </svg>
          <span class="slds-assistive-text">Global Actions</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Help and Training">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#question"></use>
          </svg>
          <span class="slds-assistive-text">Help and Training</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Setup">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#setup"></use>
          </svg>
          <span class="slds-assistive-text">Setup</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click">
        <button class="slds-button slds-button--icon slds-button--icon-container slds-button--icon-small slds-global-header__button--icon" aria-haspopup="true" title="Notifications">
          <svg class="slds-button__icon slds-global-header__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#notification"></use>
          </svg>
          <span class="slds-assistive-text">Notifications</span>
        </button>
      </li>
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="person name" />
          </span>
        </button>
      </li>
    </ul>
  </div>
  <div class="slds-popover slds-popover--large slds-nubbin--top-right" role="dialog" style="position:absolute;right:3.125rem;">
    <div class="slds-popover__body slds-p-around--none">
      <ul>
        <li class="slds-global-header__notification slds-p-around--xx-small slds-global-header__notification--unread">
          <div class="slds-media slds-has-flexi-truncate slds-p-around--x-small">
            <div class="slds-media__figure">
              <img src="/assets/images/avatar3.jpg" class="slds-avatar--small slds-avatar--circle" alt="Placeholder" />
            </div>
            <div class="slds-media__body">
              <div class="slds-grid slds-grid--align-spread">
                <a href="javascript:void(0);" class="slds-text-link--reset slds-has-flexi-truncate">
                  <h3 class="slds-truncate">
                    <strong>Kelly Chan mentioned you in a comment:</strong>
                  </h3>
                  <p class="slds-truncate">I need you to review this for me @Paulina</p>
                  <p class="slds-m-top--x-small slds-text-color--weak">10m ago</p>
                </a>
                <div class="slds-no-flex slds-grid slds-grid--vertical">
                  <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="settings">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                      </svg>
                      <span class="slds-assistive-text">Show More</span>
                    </button>
                  </div>
                  <div class="slds-align-middle">
                    <abbr class="slds-required slds-text-link" title="unread"></abbr>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="slds-global-header__notification slds-p-around--xx-small">
          <div class="slds-media slds-has-flexi-truncate slds-p-around--x-small">
            <div class="slds-media__figure">
              <img src="/assets/images/avatar3.jpg" class="slds-avatar--small slds-avatar--circle" alt="Placeholder" />
            </div>
            <div class="slds-media__body">
              <div class="slds-grid slds-grid--align-spread">
                <a href="javascript:void(0);" class="slds-text-link--reset slds-has-flexi-truncate">
                  <h3 class="slds-truncate">
                    <strong>Kelly Chan mentioned you in a comment:</strong>
                  </h3>
                  <p class="slds-truncate">I need you to review this for me @Paulina</p>
                  <p class="slds-m-top--x-small slds-text-color--weak">10m ago</p>
                </a>
                <div class="slds-no-flex slds-grid slds-grid--vertical">
                  <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="settings">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                      </svg>
                      <span class="slds-assistive-text">Show More</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="slds-global-header__notification slds-p-around--xx-small">
          <div class="slds-media slds-has-flexi-truncate slds-p-around--x-small">
            <div class="slds-media__figure">
              <img src="/assets/images/avatar3.jpg" class="slds-avatar--small slds-avatar--circle" alt="Placeholder" />
            </div>
            <div class="slds-media__body">
              <div class="slds-grid slds-grid--align-spread">
                <a href="javascript:void(0);" class="slds-text-link--reset slds-has-flexi-truncate">
                  <h3 class="slds-truncate">
                    <strong>Kelly Chan mentioned you in a comment:</strong>
                  </h3>
                  <p class="slds-truncate">I need you to review this for me @Paulina</p>
                  <p class="slds-m-top--x-small slds-text-color--weak">10m ago</p>
                </a>
                <div class="slds-no-flex slds-grid slds-grid--vertical">
                  <div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open">
                    <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="settings">
                      <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                      </svg>
                      <span class="slds-assistive-text">Show More</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</header>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different tabset looks.
Class NameUsage
.slds-global-header_container
Applied to:

<div>

Outcome:

Container that fixes the global header to the top of the viewport, contains global header element

Required:

Required

Comments:

--

.slds-global-header
Applied to:

<div>

Outcome:

White bar that contains the regions of the global header

Required:

Required

Comments:

--

.slds-global-header__item
Applied to:

<div>

Outcome:

A region within the global header

Required:

Required

Comments:

--

.slds-global-header__item--search
Applied to:

.slds-global-header__item

Outcome:

Region that contains the search input, handles sizing

Required:

Required

Comments:

--

.slds-global-header__logo
Applied to:

<div>

Outcome:

Container of the global header logo

Required:

Required

Comments:

--

.slds-global-header__button--icon
Applied to:

<button>

Outcome:

Button icons on the global header

Required:

Required

Comments:

--

.slds-global-header__button--icon-actions
Applied to:

<button>

Outcome:

Button icon specifically for global actions

Required:

Required

Comments:

This class adds styles to differentiate itself from the other icons

.slds-global-header__icon
Applied to:

<svg>

Outcome:

Deal with sizing for global header icons

Required:

Required

Comments:

--

.slds-global-header__icon-actions
Applied to:

<svg>

Outcome:

Deal with sizing for "global actions" icon on global header

Required:

Required

Comments:

--

.slds-global-header__notification
Applied to:

<div>

Outcome:

Handles styling for notification item interactions

Required:

Required

Comments:

--