App Header

<sl-app-header> | SlAppHeader
Since 1.0 stable

The app’s header container

<sl-app-header></sl-app-header>

Examples

Setting background color

Use the `–app-header-bg-color’ variable to set the background color

<sl-app-header style="--app-header-bg-color: blue"></sl-app-header>

Automatic text colour

The default text colour for the header changes automatically based on whether the background colour is considered light or dark 

<sl-app-header style="--app-header-bg-color: #ddd"  logo-url="/assets/images/hub24.svg"></sl-app-header>

By default, the app logo is clickable, and emits a logo-click event when clicked. To suppress this, use the no-logo-click attribute. 

<sl-app-header no-logo-click style="--app-header-bg-color: #ddd"  logo-url="/assets/images/hub24.svg"></sl-app-header>

App name

The app name can be provided either via the app-name attribute, or using the app-name slot.

Using the app-name attribute:

<sl-app-header app-name="My test app!"></sl-app-header>

Via a slot:

My app name in a slot with HTML 
<sl-app-header>
  <div slot="app-name">
    <em>My app name in a slot with HTML</em>
  </div>
</sl-app-header>

Tabs can be set using the tabs attribute or property. This should be provided as an array, with each element having type { label: string, active: boolean } 

<sl-app-header id="app-header-with-tabs">
</sl-app-header>
<script>
  const tabs = [
    { label: 'My first tab', active: false },
    { label: 'My second tab', active: true },
  ];

  document.querySelector('#app-header-with-tabs').tabs = tabs;
</script>

App Switcher

The app switcher allows for switching between different selector icons, via a slot app-switcher-group attribute: 

<sl-app-header>
  <div slot="app-switcher-group">
    <sl-icon-button disabled name="fas-grid-round"></sl-icon-button>
  </div>
</sl-app-header>

Slots

Name Description
(default) The default slot.
nav-items The nav items slot.
app-name The app name slot.
app-switcher-group The app switcher group slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
appName
app-name 		The app name. Can also use the app-name slot string 'App name!'
logoUrl
logo-url 		The path to the logo. string '/assets/images/hub24-inverse.png'
tabs Tabs { label: string; active: boolean }[] [ { label: 'Nav tab 1', active: true }, { label: 'Nav tab 2', active: false } ]
noLogoClick
no-logo-click 		Whether the logo is not clickable. boolean false
dark Whether to render in dark mode boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
logo-click Emitted when the logo is clicked. CustomEvent

Learn more about events.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.