Velocity X Components

Standard Navigation

App Launcher Grid

A 'waffle' product switcher popover for suites that have grown past one nav bar into several standalone apps — a grid of icon tiles for every section, the current one marked, fully arrow-key navigable and closes cleanly on outside click or route change.

Subscription Included with the Velocity Components subscription.
bash
$ velocityx add standard-app-launcher-grid

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for App Launcher Grid →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.1 react
App Launcher Grid

Props

NameTypeRequiredDefaultDescription
apps{ id: string, label: string, href: string, icon: ReactNode, description?: string }[]No[]
currentIdstringYesid of the app currently active, gets aria-current + a dot
labelstringNo'Switch app'accessible name for the trigger + popover
columnsnumberNo3grid columns at desktop width
classNamestringNo''applied to the wrapping element

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text
components/velocity/standard-app-launcher-grid/AppLauncherGrid.jsx

Using the App Launcher Grid component

Install it with velocityx add standard-app-launcher-grid. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

More from Standard Navigation.