App Header Hds

<sl-app-header-hds> | SlAppHeaderHds
Since 1.1.14 experimental

The app’s header container

Usage

app logo App Name
Dropdown Item 1 Item 2 Item 3
Item 1 label name Item 2 label name Item 3 label name Item 4 label name
Subheader right
 

<sl-app-header-hds>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <span slot="app-name">App Name</span>
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button
    slot="action"
    id="feedback-form-trigger-button"
    name="message-lines"
  ></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
  <div slot="header-right">
    <sl-dropdown>
      <sl-button slot="trigger" variant="on-dark" caret>Dropdown</sl-button>
      <sl-menu>
        <sl-menu-item>Item 1</sl-menu-item>
        <sl-menu-item>Item 2</sl-menu-item>
        <sl-menu-item>Item 3</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left" style="display: flex; gap: 2px;">
    <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 4 label name</sl-button>
  </div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

<sl-feedback-form id="feedback-form-app-header" user-first-name="Linda" user-last-name="Cole" team-name="Guardian Investments" product-name="myhub"></sl-feedback-form>

<script>
const triggerButton = document.getElementById('feedback-form-trigger-button');
const form = document.getElementById('feedback-form-app-header');

triggerButton.addEventListener('click', () => {
  form.show()});
form.addEventListener('sl-feedback-submit', e => {
  console.log('sl-feedback-submit fired, detail =', e.detail);
  setTimeout(() => form.succeed(), 1500);
});
</script>

Examples

Using all slots

A full example using all available slots:

app logo
Dropdown Item 1 Item 2 Item 3
Subheader left
Subheader right
 

<sl-app-header-hds>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
  <div slot="header-right">
    <sl-dropdown>
      <sl-button slot="trigger" variant="on-dark" caret>Dropdown</sl-button>
      <sl-menu>
        <sl-menu-item>Item 1</sl-menu-item>
        <sl-menu-item>Item 2</sl-menu-item>
        <sl-menu-item>Item 3</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Below are examples for each slot available in the component:

App logo slot

app logo
Subheader left
Subheader right
 

<sl-app-header-hds style="--header-bg-color: #f5f5f5; --subheader-bg-color: #e3e8ee;">
  <img slot="app-logo" src="/dist/images/hub24_logo_primary.svg" alt="app logo" />
  <sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

App logo custom height

You can override the app-logo height yourself by setting style of app-logo slot.

app logo
Subheader left
Subheader right
 



<sl-app-header-hds class="resizable" style="--header-bg-color: #f5f5f5; --subheader-bg-color: #e3e8ee;">
  <img slot="app-logo" style="height: 36px;" src="/dist/images/hub24_logo_primary.svg" alt="app logo" />
  <sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

App name slot

app logo Custom App Name
Subheader left
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <span slot="app-name">Custom App Name</span>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Header middle slot

app logo
Subheader left
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Header middle slot - always show

Use the show-header-middle-on-small attribute to always show the header middle section, even on smaller screens.

app logo
Subheader left
Subheader right
 

<sl-app-header-hds show-header-middle-on-small>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Action slot

app logo
Subheader left
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Header right slot

app logo
Dropdown Item 1 Item 2 Item 3
Subheader left
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-right">
    <sl-dropdown>
      <sl-button slot="trigger" variant="on-dark" caret>Dropdown</sl-button>
      <sl-menu>
        <sl-menu-item>Item 1</sl-menu-item>
        <sl-menu-item>Item 2</sl-menu-item>
        <sl-menu-item>Item 3</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Avatar slot

app logo
Subheader left
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Subheader left slot

app logo
Subheader left content
Subheader right
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left content</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Subheader right slot

app logo
Subheader left
Subheader right content
 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right content</div>
</sl-app-header-hds>

Layout guidelines

Single‑level vs second‑level headers

Avoid cramming too many elements into a single‑level app header. Consider both the minimum and maximum widths of your breakpoints when placing components in slots; items will wrap or overflow at narrow sizes.

app logo 

<sl-app-header-hds hide-subheader>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
</sl-app-header-hds>

When an app header contains a central component in the top bar (such as a search input), it is recommended to use the second level if additional components do not fit appropriately in the top bar.

app logo
Item 1 label name Item 2 label name Item 3 label name Item 4 label name
app logo
Dropdown Item 1 Item 2 Item 3
Item 1 label name Item 2 label name Item 3 label name Item 4 label name 

<sl-app-header-hds>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left" style="display: flex; gap: 2px;">
    <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 4 label name</sl-button>
  </div>
</sl-app-header-hds>

<sl-app-header-hds style="margin-top: 24px;">
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<div slot="header-middle">
    <sl-input type="search" placeholder="Search…" clearable enterkeyhint="search"></sl-input>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
  <div slot="header-right">
  <sl-dropdown>
    <sl-button slot="trigger" variant="on-dark" caret>Dropdown</sl-button>
    <sl-menu>
      <sl-menu-item>Item 1</sl-menu-item>
      <sl-menu-item>Item 2</sl-menu-item>
      <sl-menu-item>Item 3</sl-menu-item>
    </sl-menu>
  </sl-dropdown>
</div>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left" style="display: flex; gap: 2px;">
    <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 4 label name</sl-button>
  </div>
</sl-app-header-hds>

If slotting in a group of navigational items or similar, consider the width of the component with other surrounding elements (such as logos, icon-buttons etc) especially at the minimum of a breakpoint.

Rule of thumb is maximum 3 items if single level app header.

app logo
Item 1 label name Item 2 label name Item 3 label name 

<sl-app-header-hds hide-subheader>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
  <div slot="header-middle" style="display: flex; gap: 2px;">
   <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
  </div>
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
</sl-app-header-hds>

Use second level (subheader bar) when 4 items or more.

app logo
Item 1 label name Item 2 label name Item 3 label name Item 4 label name 

<sl-app-header-hds>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
    <sl-icon-button slot="action" name="bell"></sl-icon-button>
    <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
    <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left" style="display: flex; gap: 2px;">
    <sl-button size="small" variant="on-dark">Item 1 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 2 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 3 label name</sl-button>
    <sl-button size="small" variant="on-dark">Item 4 label name</sl-button>
  </div>
</sl-app-header-hds>

Background color

Use --header-bg-color and --subheader-bg-color to set background colors. Text and icon colors are detected automatically from the background.

Light background:

app logo
Subheader left
Subheader right
 

<sl-app-header-hds style="--header-bg-color: #f5f5f5; --subheader-bg-color: #e3e8ee;">
 <img slot="app-logo" src="/dist/images/hub24_logo_primary.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <sl-icon-button slot="action" name="bell"></sl-icon-button>
  <sl-icon-button slot="action" name="message-lines"></sl-icon-button>
  <sl-icon-button slot="action" name="circle-question"></sl-icon-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Dark background:

app logo
Subheader left
Subheader right
 

<sl-app-header-hds style="--header-bg-color: #1a1f2b; --subheader-bg-color: #2c3344;">
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
  <div slot="subheader-left">Subheader left</div>
  <div slot="subheader-right">Subheader right</div>
</sl-app-header-hds>

Optional Subheader

You can hide the subheader section by using the hide-subheader attribute:

app logo 

<sl-app-header-hds hide-subheader>
<img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo" />
<sl-avatar-button slot="avatar" name="First Last"></sl-avatar-button>
</sl-app-header-hds>

Slots

Name Description
app-switcher The app switcher slot.
app-logo The app logo slot.
app-name The app name slot.
header-middle The header middle slot.
action The action slot.
header-right The header right slot.
avatar The avatar slot.
subheader-left The subheader left slot.
subheader-right The subheader right slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
hideSubheader
hide-subheader 		Hide the subheader section boolean false
showHeaderMiddleOnSmall
show-header-middle-on-small 		Always show the header middle section boolean false
hide-subheader Hide the subheader section. - -
show-header-middle-on-small Always show the header middle section. - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.