builder-header

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

Page Type

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

<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">

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

<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">

With a Toolbar

App Name

Page Type

<div class="slds-builder-header_container">
  <header class="slds-builder-header">
    <div class="slds-builder-header__item">