# Mobile navigation

The floating glass bar at the bottom of a phone screen that switches between WerkOS workspaces.

* Kind: component
* Page: https://design.werklist.com/components/mobile-navigation
* Version: 2.1.2

## When to use it

* Below 1024 px, on the home screen, the module list of each workspace and the team pages.
* Inside a module: the module's own bar in the same place, or none, with the back arrow in the header.

## When not to use it

* Actions in the workspace bar.
* From 1024 px: the rail replaces it.
* The workspace bar and a module bar on the same screen.

## Rules

* No border or halo on the glass. The shadow alone separates the bar from the page.
* Pad the page with --bottom-nav-h. Place floating buttons with --bottom-nav-live-h.

## Anatomy

* Place: fixed to the bottom of the screen, 14 px above the bottom safe area, 8 px or the side safe area from each edge, whichever is larger. Hidden from 1024 px (--layer-header)
* Room kept: the page keeps room for the tallest height of the bar. Floating buttons follow its current height (--bottom-nav-h, --bottom-nav-live-h)
* Bar: 69 px at rest, 52 px compact, radius 26 px. Padding 6 px, 4 px above and below when compact, 2 px between tabs (--glass-fill-nav, --glass-blur-nav, --glass-shadow-nav)
* Tab: a link that shares the width equally, radius 16 px, at least 44 px wide. 57 px high at rest, 44 px compact
* Icon box: 36 by 36 px
* Glyph: 21 px, stroke 2 when selected, 1.75 when idle
* Label: 9 px, weight 500, 4 px under the icon box. Folds away in 200 ms when the bar is compact
* Selected capsule: fills the icon box and glides to the tab you tap (--nav-tab-chip)
* Opaque fallback: white in light, deep blue gray in dark, no blur

## Variants

* Workspace bar: The top level on a phone, with no color.
* Module bar: The views of one module, in the same glass and tabs. Its Add tab keeps the blue disc.

## States

* Rest: Labels shown, bar 69 px
* Compact: After 24 px of scrolling down, once 40 px from the top, the labels fold and the bar is 52 px. The first scroll up brings them back
* Selected: Capsule, full ink, stroke 2. The tab carries aria-current page only on its own screen (--nav-tab-chip, --text)
* Idle: Muted ink, stroke 1.75 (--text-muted)
* Pressed: Scales to 0.92, or holds still with reduced motion
* Focus: 2 px ring inside the tab (--focus-ring)
* Typing: On a touch screen the bar steps aside while a field has focus
* No blur, or reduced transparency: The opaque fallback

## Keyboard

* Tab: Next workspace tab
* Enter: Opens the workspace screen

## Accessibility

* The bar is a navigation landmark named Main navigation.
* A tab carries aria-current page only on its own screen. On a team page the capsule shows the workspace you came from, and no tab claims the page.
* Folded labels stay in the name of each tab.
* Targets at least 44 by 44 px.
* Idle ink meets 4.5 to 1 in both themes. The capsule is a faint fill, so ink and stroke weight carry the selection.

## Content

* One word per workspace label: Home, Projects, Intranet, Werkbook, Finance, Network.
* A longer label ends in an ellipsis.

## Tokens

* --layer-header
* --glass-fill-nav
* --glass-blur-nav
* --glass-shadow-nav
* --nav-tab-chip
* --text
* --text-muted
* --focus-ring
* --bottom-nav-h
* --bottom-nav-live-h