AppNavBar

View in Storybook

A taskbar-style top bar for standalone apps to navigate back to the docs/hub site and across to each other. Each standalone app (Bills, Gym, …) is a separate deployment on its own origin, so this isn't client-side routing — every link is a real, full-page navigation.

Overview

When to use

At the top of a standalone app in this suite, so a user (especially on mobile, with no browser chrome to rely on) can get back to the hub or jump to another app without a bookmark.
Anywhere a fixed set of cross-origin destinations needs a consistent, always-visible way back.

When not to use

For in-app navigation within a single SPA — use real routing (React Router, etc.), not this component.
As a generic breadcrumb — AppNavBar always shows the full flat list of apps, not a hierarchy.

States

Pass currentLabel matching one of the apps entries to mark it "you are here" — it renders with the same pressed-look background PvpNavBar uses for its active toggle state (--bevel-highlight). It's still a real, clickable link (clicking it just reloads the current app) — not disabled, since a dead-looking control is more confusing than a harmless reload.

backLabel defaults to "Back" but can be overridden, e.g. to name the hub explicitly.

Accessibility

The bar itself is a <nav aria-label="App navigation">.
The current app's link gets aria-current="page".
Every link is a real <a href> — full keyboard and screen-reader support comes for free from the native element, no custom handling needed.

<AppNavBar
  backHref="https://pvp.example.com"
  currentLabel="Bills"
  apps={[
    { label: 'Bills', href: 'https://bills.example.com' },
    { label: 'Gym', href: 'https://gym.example.com' },
  ]}
/>

Controls

Interactive controls are available in Storybook. Open Storybook

Props

Token mapping

Property	Token
background	`--color-accent-primary`
current-app background	`--bevel-highlight` (matches PvpNavBar's active-toggle treatment)
bevel (top-left outer)	`--sunken-outer-light`
bevel (bottom-right outer)	`--sunken-outer-dark`
bevel (top-left inner)	`--sunken-inner-light`
bevel (bottom-right inner)	`--sunken-inner-dark`
link styling	Button's exported `buttonVariants` (size `sm`) — same visual as a small Button, applied to real `<a>` tags

Do's and don'ts

Keep the apps list identical across every app instance (same labels, same hrefs) — it should read as one consistent switcher no matter which app you're currently in.
Drive backHref/each app's href from environment variables in the consuming app (e.g. import.meta.env.VITE_PVP_URL), not hard-coded URLs — they differ between local dev and production.

Don't

Use this for navigation within a single app — it's for jumping between separate deployments only.
Forget to set currentLabel — without it, none of the links indicate "you are here."

Changelog

Date	Change
2026-07-23	Initial component created — cross-origin app switcher matching NihNavBar's visual style, built for Bills/Gym's shared top bar

Overview​

When to use​

When not to use​

States​

Accessibility​

Controls​

Props​

Token mapping​

Do's and don'ts​

Changelog​