Component Blueprints

Builder Header

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

Sections

information

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

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

Page Type

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

App Name

Page Type

Back
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <div class="slds-builder-header__item-label slds-media slds-media_center">

With open dropdown menu#

App Name

Page Type

Back
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <div class="slds-builder-header__item-label slds-media slds-media_center">

Variations#

With a Truncated Name#

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

Back
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <div class="slds-builder-header__item-label slds-media slds-media_center">

With a Toolbar#

App Name

Page Type

Back
Help
<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">
      <div class="slds-builder-header__item-label slds-media slds-media_center">

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