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>

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
hide-subheader Hide the subheader 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.

Dependencies

This component automatically imports the following dependencies.

  • <sl-divider>
  • <sl-icon>
  • <sl-icon-button>