App Switcher
Examples
Applications Only
Integrations Only
Custom Integrations Label
Long Application Name
Mobile Header Image
Scrolling
Open in New Tab
In the App Header Hds
Dark Mode
Open by Default
Controlling Programmatically
Animation
Properties
Events
Parts
Dependencies

App Switcher

<sl-app-switcher> | SlAppSwitcher

Since 1.1.16

stable

App switcher provides a trigger button in the application header that opens a panel of links. On desktop the panel appears as a dropdown, while on tablet/mobile it slides in from the left inside an <sl-drawer>.

sl-app-switcher renders a complete switchable-app panel that includes its own trigger buttons. On desktop viewports (>989 px) it wraps the panel in an sl-dropdown; on tablet and mobile it uses a slide-in sl-drawer. The component closes automatically when the user resizes across the breakpoint.

Pass app data via the applications and integrations JavaScript properties. Each item requires label, href, and iconSrc.

<sl-app-switcher
  id="switcher-basic"
  mobile-header-img-url="/assets/images/hub24.svg"

></sl-app-switcher>
<script>
  const switcher = document.getElementById('switcher-basic');
  switcher.applications = [
    { label: 'Hub24',     href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama',  href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer',  href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'CRM',       href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Analytics', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
  switcher.integrations = [
    { label: 'Xero',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs', href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Examples

Applications Only

Omit integrations (or pass an empty array) to show only the Applications section without the “Integrations” heading or divider.

<sl-app-switcher id="switcher-apps-only"></sl-app-switcher>
<script>
  document.getElementById('switcher-apps-only').applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'CRM',      href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
</script>

Integrations Only

Omit applications (or pass an empty array) to show only the integrations section.

<sl-app-switcher id="switcher-ints-only"></sl-app-switcher>
<script>
  document.getElementById('switcher-ints-only').integrations = [
    { label: 'Xero',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs', href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Custom Integrations Label

Use the integrations-label attribute to change the heading above the integrations section.

<sl-app-switcher
  id="switcher-custom-label"
  integrations-label="Marketplace"
></sl-app-switcher>
<script>
  const s = document.getElementById('switcher-custom-label');
  s.applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
  s.integrations = [
    { label: 'Xero',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs', href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Long Application Name

When a application name exceeds the available width, it wraps and truncates to a maximum of two lines on desktop.

<sl-app-switcher id="switcher-long-labels"></sl-app-switcher>
<script>
  document.getElementById('switcher-long-labels').applications = [
    { label: 'Hub24', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama Investment Platform', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer Super Administration Portal', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'CRM', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Analytics & Reporting Dashboard', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
</script>

Use the mobile-header-img-url attribute to display a logo or branding image in the top-left corner of the mobile drawer header.

<sl-app-switcher
  id="switcher-mobile-header"
  mobile-header-img-url="/assets/images/hub24.svg"
></sl-app-switcher>
<script>
  document.getElementById('switcher-mobile-header').applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
</script>

Scrolling

When there are many items the panel scrolls internally. Max height is 800px and min height is 500px.

<sl-app-switcher id="switcher-scroll" ></sl-app-switcher>
<script>
  const s = document.getElementById('switcher-scroll');
  s.applications = [
    { label: 'App 1', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 2', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 3', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 4', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 5', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 6', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 7', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 8', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'App 9', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
  s.integrations = [
    { label: 'Xero',          href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',          href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs',      href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Class Super',   href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'BGL Simple',    href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Iress Xplan',   href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Midwinter',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Salesforce',    href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Microsoft 365', href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'DocuSign',      href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Netwealth',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'Morningstar',   href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Open in New Tab

Set target: '_blank' on any item to open it in a new browser tab. A rel="noopener noreferrer" is added automatically for security.

<sl-app-switcher id="switcher-target"></sl-app-switcher>
<script>
  document.getElementById('switcher-target').applications = [
    { label: 'Hub24',    href: 'https://hub24.com.au', iconSrc: '/assets/images/hub24-inverse.png', target: '_blank' },
    { label: 'Panorama', href: '#',                    iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#',                    iconSrc: '/assets/images/hub24-inverse.png' }
  ];
</script>

Place sl-app-switcher in the app-switcher slot of sl-app-header-hds. Use the dark attribute to match the header’s dark background.


<sl-app-header-hds>
  <img slot="app-logo" src="/dist/images/hub24_logo_primary_reverse.svg" alt="app logo"/>  <sl-app-switcher
    slot="app-switcher"
    dark
    id="switcher-header"
    mobile-header-img-url="/assets/images/hub24.svg"
  ></sl-app-switcher>
</sl-app-header-hds>
<script>
  const s = document.getElementById('switcher-header');
  s.applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
  s.integrations = [
    { label: 'Xero',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs', href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Dark Mode

Add the dark attribute for a dark-themed panel. This is typically used when the component is placed inside a dark navigation bar.

<div style="background-color: var(--hds-color-neutral-950, #16181d); padding: 20px; border-radius: 4px;">
  <sl-app-switcher id="switcher-dark" dark ></sl-app-switcher>
</div>
<script>
  const s = document.getElementById('switcher-dark');
  s.applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
  s.integrations = [
    { label: 'Xero',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'MYOB',     href: '#', iconSrc: '/assets/images/hub24.svg' },
    { label: 'FYI Docs', href: '#', iconSrc: '/assets/images/hub24.svg' }
  ];
</script>

Open by Default

Set the open attribute or property to open the panel on first render.

<sl-app-switcher id="switcher-open" open></sl-app-switcher>
<script>
  document.getElementById('switcher-open').applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];
</script>

Controlling Programmatically

Use the show() and hide() methods to open and close the panel from JavaScript. The example below binds Alt + A as a keyboard shortcut to toggle the switcher.

Press Alt + A to toggle the app switcher.

<sl-app-switcher id="switcher-kbd"></sl-app-switcher>
<p style="margin-top: 12px; font-size: 14px; color: var(--hds-color-fg-subtle);">
  Press <kbd>Alt</kbd> + <kbd>A</kbd> to toggle the app switcher.
</p>
<script>
  const switcher = document.getElementById('switcher-kbd');
  switcher.applications = [
    { label: 'Hub24',    href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Panorama', href: '#', iconSrc: '/assets/images/hub24-inverse.png' },
    { label: 'Employer', href: '#', iconSrc: '/assets/images/hub24-inverse.png' }
  ];

  document.addEventListener('keydown', e => {
    if (e.altKey && e.key === 'a') {
      e.preventDefault();
      switcher.open ? switcher.hide() : switcher.show();
    }
  });
</script>

Animation

Hovering over an app tile applies a background color transition using --sl-transition-fast. The same transition is applied to the trigger icon.

Desktop dropdown: uses a 100ms ease animation

Properties

Name	Description	Type	Default
`open`	When true, the desktop dropdown or mobile drawer is open.	`boolean`	`false`
`dark`	Applies a dark colour scheme to the panel.	`boolean`	`false`
`mobileHeaderImgUrl` `mobile-header-img-url`	Optional image URL rendered in the left side of the mobile/tablet drawer header.	`string \| undefined`	-
`applications`	App items for the “Applications” section. Each item requires `label`, `iconSrc` and `href`;	`AppSwitcherItem[]`	`[]`
`integrations`	Integration items for the “Integrations” section. Each item requires `label`, `iconSrc` and `href`;	`AppSwitcherItem[]`	`[]`
`integrationsLabel` `integrations-label`	Heading for the integrations section.	`string`	`'Integrations'`
`show`	Opens the desktop dropdown or mobile drawer.	-	-
`hide`	Closes the desktop dropdown or mobile drawer.	-	-
`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
`sl-show`		Emitted when the panel opens (either the desktop dropdown or mobile drawer).	-
`sl-hide`		Emitted when the panel closes.	-

Learn more about events.

Parts

Name	Description
`base`	The component’s base wrapper.
`drawer`	The slide-in / full-screen drawer panel (tablet & mobile only).
`close-button`	The drawer close button (tablet & mobile only).
`dropdown`	The dropdown panel (desktop only).
`grid`	The wrapper for the grid of app/integration items.
`item`	An individual app/integration item.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-divider>
<sl-drawer>
<sl-dropdown>
<sl-icon>
<sl-icon-button>
<sl-popup>