{
  "title": "Mobile navigation",
  "path": "/components/mobile-navigation",
  "url": "https://design.werklist.com/components/mobile-navigation",
  "text": "https://design.werklist.com/agent/components/mobile-navigation",
  "summary": "The glass bar at the bottom of a phone screen that switches between WerkOS workspaces.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Mobile navigation",
  "purpose": "The floating glass bar at the bottom of a phone screen that switches between WerkOS workspaces.",
  "use": [
    "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."
  ],
  "avoid": [
    "Actions in the workspace bar.",
    "From 1024 px: the rail replaces it.",
    "The workspace bar and a module bar on the same screen."
  ],
  "anatomy": [
    {
      "part": "Place",
      "measure": "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",
      "token": "--layer-header"
    },
    {
      "part": "Room kept",
      "measure": "the page keeps room for the tallest height of the bar. Floating buttons follow its current height",
      "token": "--bottom-nav-h, --bottom-nav-live-h"
    },
    {
      "part": "Bar",
      "measure": "69 px at rest, 52 px compact, radius 26 px. Padding 6 px, 4 px above and below when compact, 2 px between tabs",
      "token": "--glass-fill-nav, --glass-blur-nav, --glass-shadow-nav"
    },
    {
      "part": "Tab",
      "measure": "a link that shares the width equally, radius 16 px, at least 44 px wide. 57 px high at rest, 44 px compact"
    },
    {
      "part": "Icon box",
      "measure": "36 by 36 px"
    },
    {
      "part": "Glyph",
      "measure": "21 px, stroke 2 when selected, 1.75 when idle"
    },
    {
      "part": "Label",
      "measure": "9 px, weight 500, 4 px under the icon box. Folds away in 200 ms when the bar is compact"
    },
    {
      "part": "Selected capsule",
      "measure": "fills the icon box and glides to the tab you tap",
      "token": "--nav-tab-chip"
    },
    {
      "part": "Opaque fallback",
      "measure": "white in light, deep blue gray in dark, no blur"
    }
  ],
  "variants": [
    {
      "name": "Workspace bar",
      "use": "The top level on a phone, with no color."
    },
    {
      "name": "Module bar",
      "use": "The views of one module, in the same glass and tabs. Its Add tab keeps the blue disc."
    }
  ],
  "states": [
    {
      "name": "Rest",
      "change": "Labels shown, bar 69 px"
    },
    {
      "name": "Compact",
      "change": "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"
    },
    {
      "name": "Selected",
      "change": "Capsule, full ink, stroke 2. The tab carries aria-current page only on its own screen",
      "tokens": [
        "--nav-tab-chip",
        "--text"
      ]
    },
    {
      "name": "Idle",
      "change": "Muted ink, stroke 1.75",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Pressed",
      "change": "Scales to 0.92, or holds still with reduced motion"
    },
    {
      "name": "Focus",
      "change": "2 px ring inside the tab",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Typing",
      "change": "On a touch screen the bar steps aside while a field has focus"
    },
    {
      "name": "No blur, or reduced transparency",
      "change": "The opaque fallback"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Next workspace tab"
    },
    {
      "key": "Enter",
      "action": "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."
  ],
  "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."
  ],
  "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"
  ]
}