App Launcher

The app launcher lets a user switch between related apps, browse every available app, and jump to custom links, from the app bar's end slot.

Overview

App launcher is a persistent navigation component for users to switch context. It is a personal local map to navigate a product ecosystem. It lives in the user information section of app bar and is represented by the apps icon.

Usage

forge-app-launcher opens a grid of relatedApps and allApps — each an object with label, uri, iconName, and an optional target — set as JS properties rather than HTML attributes, plus any number of custom forge-app-launcher-link entries in its default slot. It automatically switches between a popover on desktop and a dialog on mobile. Place it in the app bar’s end slot, alongside the other app bar action buttons. Use it when people regularly need to jump between related applications in a larger ecosystem; for in-app navigation, use a drawer or menu instead.

Rules

Populate relatedApps with only the handful of apps most relevant to the user's current context.

Reserve allApps for the complete catalog, surfaced through the launcher's own search and "view all" flow.

Give every app option a real iconName so entries are easy to scan visually.

Use app-launcher-link entries for a small number of fixed resources, like documentation or support — not for switching between apps.

Don't

Don't use the app launcher for primary in-app navigation — use a drawer or menu instead.

Don't populate relatedApps with more than a handful of apps — that defeats its purpose as a shortlist.

Don't leave the header and section titles at generic defaults if your ecosystem has its own established terminology for them.

A navigation component that enables users to switch between applications and contexts, presenting as a popover on desktop devices and a full-screen dialog on mobile devices.

import "@tylertech/forge/app-launcher";

Properties

Property	Attribute	Type	Default	Description
`open`	—	`boolean`	`false`	Indicates whether the dialog or popover is open.
`relatedApps`	—	`AppLauncherOption[]`	`[]`	An array of related apps for the related apps view.
`allApps`	—	`AppLauncherOption[]`	`[]`	An array of all available apps for the all apps view.
`launcherAriaLabel`	—	`string`	`'Open app launcher'`	ARIA label for the app launcher trigger button.
`backAriaLabel`	—	`string`	`'Go back'`	ARIA label for the back button.
`closeAriaLabel`	—	`string`	`'Close app launcher'`	ARIA label for the close button.
`searchPlaceholder`	—	`string`	`'Search by product or app'`	Placeholder text for the search input in the all apps view.

Events

Name	Type	Description
`toggle`	`ToggleEvent`	Dispatched when the app launcher opens or closes.

Slots

Name	Description
`header-title`	Title text for the app launcher header
`related-apps-title`	Title text for the related apps section
`all-apps-title`	Title text for the all apps view
`view-all-apps-button-text`	Text for the button that switches to all apps view
`app-launcher-links-title`	Title text for the custom links section
`app-launcher-link`	Individual custom link items using forge-app-launcher-link
`empty-state-text`	Text shown when no applications match the search filter
`loading-text`	Text shown while the app launcher is in the loading state

Accessibility documentation coming soon.