Component Blueprints

Builder Header

  • HTML/CSS:Dev Ready
  • Layout:Desktop Only

Sections

information

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

Every builder needs a builder header, which contains basic navigation elements. It also shows the builder type and content name.
Back
App Name

Page Type

Settings
Help

About Builder Header#

To learn more about the Builder pattern in general, check out our guidelines, which includes a section about how to use the Builder Header.

Base#

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

With open dropdown menu#

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

With tooltip#

Use hover text to show where the builder has launched from. If the builder launches from only one location, hover text should read "Back."

Accessibility Note

The back action's aria-describedby attribute must share the same value as the tooltip's ID.

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" aria-describedby="example-unique-id-10" title="Back">

Variations#

With a Truncated Name#

Back
App Name

Page Type with a very very long name that will truncate when the container is not wide enough to contain this content completely

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

With a Toolbar#

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

With Status text#

Use status text and alerts with action buttons to reinforce status notifications, warnings, and errors.

A status text can include:

  • A file (version) state, such as active, inactive, draft (e.g. "Inactive - Modified a few seconds ago")
  • Action, plus Last Modified Time, represented with relativeDateTime. (e.g. "Saved 1 day ago")

When the user hovers or focuses status text, use a tooltip to communicate additional details (e.g., Version 2 saved by Johnny Appleseed Today 9:00 AM).

Accessibility Note

The status text's aria-describedby attribute must share the same value as the tooltip's ID.

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

With Alert#

If the canvas or a canvas element generates a warning or error, an alert icon appears in the toolbar. Clicking or accessing by keyboard a popover's trigger element opens the popover.

Accessibility Note

When a popover is invoked, keyboard focus is moved into the popover and remains trapped until it is closed by the close button or escape key. After the popover is closed, focus is returned to the original triggering element.

Warning#

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

Error#

When a user attempts to perform an action (e.g. save) and errors are present, an error popover is invoked and actions are disabled.

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

Warning and Error#

Back
App Name

Page Type

Settings
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <a href="#" class="slds-builder-header__item-action" title="Back">

Overview of CSS Classes#

Selector.slds-builder-header_container
Summary

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

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-builder-header
Summary

Creates builder specific global header

Restrict.slds-builder-header_container header
Selector.slds-builder-header__item
Summary

Direct child descendant item of the builder header

Restrict.slds-builder-header div, .slds-builder-header nav
Selector.slds-builder-header__item-label
Summary

Label inside of a header item

Restrict.slds-builder-header__item span, .slds-builder-header__item div, .slds-builder-header__item h1
Selector.slds-builder-header__item-action
Summary

Action or label inside of a header item

Restrict.slds-builder-header__item a, .slds-builder-header__item button
Selector.slds-builder-header__nav
Summary

Container around builder header's nav region

Restrict.slds-builder-header nav
Selector.slds-builder-header__nav-list
Summary

List containing navigation items of a builder header

Restrict.slds-builder-header__nav ul
Selector.slds-builder-header__nav-item
Summary

Items of the builder headers nav

Restrict.slds-builder-header__nav li
Selector.slds-builder-header__utilities
Summary

Container around builder header's utiltity region containing the back and help links

Restrict.slds-builder-header div
Selector.slds-builder-toolbar
Summary

Builder header toolbar

Supportdev-ready
Restrict.slds-builder-header_container div
VariantTrue
Selector.slds-builder-toolbar__actions
Summary

Region of Builder header toolbar that contains the document actions

Restrict.slds-builder-toolbar div
Selector.slds-builder-toolbar__item-group
Summary

Region containing button icon groups of Builder header toolbar

Restrict.slds-builder-toolbar div

Builder Header Release Notes

2.15.0

Changed

  • Updates to top bar:
    • Changed the color of the border separators to $color-background-inverse.
    • On :hover and :focus for .slds-builder-header__item-action:
      • Changed background-color to $color-background-inverse
      • Changed color to $color-gray-1
    • "Back" action moved to the left-hand side and visible text was removed
    • "Link" renamed to "Settings" and moved to the right-hand side next to "Help"

Added

  • Additions to toolbar:
    • Icons for canvas settings and toggling a panel
    • Status text and alerts that convey status, warnings, and errors
    • Popovers for alerts
    • Tooltip for the "Back" action
  • New examples for "Back" action tooltip, status text, and alerts.
  • Added aria-expanded to dropdown item

2.14.0

Fixed

  • Fixed issue with non-link text color in Builder Header menu dropdowns by adding default text color
    • Added an example with an open menu to demonstrate this pattern

2.9.0

Fixed

  • Fixed issue where page type content was not being truncated
    • Added slds-has-flexi-truncate to slds-builder-header__item element
    • Added <span class="slds-truncate" title="..."> inside of <h1 class="slds-builder-header__item-label">

2.7.0

Added

  • Updated design guidelines and design notes.