Navigation and shell

Top bar

56px, white at 86% with a 10px blur, sticky. Breadcrumbs on the left; on the right the environment badge, the "?" help trigger (same spot on every page) and the account button.

Live specimen

Lifted from the approved family page at build time; interact with it.

Top bar and environment

Where you are on the left; environment, page help and account on the right, in the same order on every page.

Stagingamber badge, plus the 32px engineers' banner on every page
Engineers' staging copy. To edit or publish your website, use dtc-admin.rjmtm.com
Staging
Production
Production
Local, with the access noticesits under the bar until the brand is picked again
Local
Site selection expired or access changed. Select the brand again.
Account button
default
hover
focus
loading
Environment badge
StagingProductionLocal
Account menu, open
shadcnBadge · Alert · DropdownMenu · DropdownMenuLabel · DropdownMenuItem[disabled] · AvatarUses.topbar.staging.env-prod.sh-banner.sh-notice.help-q.menu.mi

from families/app-shell/#top-bar