App Switcher

<sl-app-switcher> | SlAppSwitcher
Since 1.1.16 experimental

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"
  mobile-trigger-icon="bars"
></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 “Discover” heading or divider. 

<sl-app-switcher id="switcher-apps-only" mobile-trigger-icon="bars"></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 Discover / integrations section. 

<sl-app-switcher id="switcher-ints-only" mobile-trigger-icon="bars"></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 Desktop Trigger

Use the desktop-trigger-icon-url attribute to replace the default desktop trigger icon with any image URL. 

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

Custom Mobile Trigger

Use the mobile-trigger-icon attribute to change the icon displayed on the mobile trigger button. Accepts any icon name registered in the icon library. 

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

Mobile Header Image

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"
  mobile-trigger-icon="bars"
></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.

<sl-app-switcher id="switcher-scroll" mobile-trigger-icon="bars"></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>

In the App Header

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

<sl-app-header app-name="My App">
  <sl-app-switcher
    slot="app-switcher-group"
    dark
    id="switcher-header"
    mobile-header-img-url="/assets/images/hub24.svg"
    mobile-trigger-icon="bars"
  ></sl-app-switcher>
</sl-app-header>
<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 mobile-trigger-icon="bars"></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 mobile-trigger-icon="bars"></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" mobile-trigger-icon="bars"></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>

Properties

Name Description Reflects 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
desktopTriggerIconUrl
desktop-trigger-icon-url 		Icon name or URL used for both trigger buttons when one isn’t provided by the user. string '/assets/images/app-switcher.svg'
mobileTriggerIcon
mobile-trigger-icon 		Icon name used for the mobile trigger when one isn’t provided by the user. string 'bars'
mobileHeaderImgUrl
mobile-header-img-url 		Optional content 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 “Discover” section. Each item requires label, iconSrc and href; AppSwitcherItem[] []
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.
backdrop The overlay backdrop (tablet & mobile only).
drawer The slide-in / full-screen drawer panel (tablet & mobile only).
close-button The drawer close button (tablet & mobile only).
section-label A section heading label, used for the “Discover” heading above integrations.

Learn more about customizing CSS parts.