{
  "title": "Side navigation",
  "path": "/components/side-navigation",
  "url": "https://design.werklist.com/components/side-navigation",
  "text": "https://design.werklist.com/agent/components/side-navigation",
  "summary": "A list of places down the left edge that shows where you are: the blocks of a long page, or the workspaces and modules of WerkOS.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Side navigation",
  "purpose": "A list of places on the left edge that marks the current one: the blocks of a long page, or the WerkOS rail and modules panel.",
  "use": [
    "Page list: pages with three or more blocks.",
    "Rail: switching WerkOS workspaces from 1024 px.",
    "Modules panel: the modules of the current workspace, grouped in folders."
  ],
  "avoid": [
    "Pages with fewer than three blocks and overview pages.",
    "More than two levels of hierarchy.",
    "Actions, filters or editing inside the list.",
    "Screens under 1024 px: WerkOS uses mobile navigation there, and a website page shows no page list."
  ],
  "anatomy": [
    {
      "part": "Page list",
      "measure": "columns 1 and 2 of the twelve column grid from 1024 px, with no fill, border or radius",
      "token": "--leftnav-w"
    },
    {
      "part": "Page list title",
      "measure": "the page title, 24 px on 32 px, weight 700, with 16 px under it. Plain text, not a heading and not a link",
      "token": "--text"
    },
    {
      "part": "Page list row",
      "measure": "36 px, padding 8 px by 16 px, 56 px when the label wraps to two lines",
      "token": "--type-nav, --space-4"
    },
    {
      "part": "Page list position",
      "measure": "sticks 24 px under the header and scrolls on its own when taller than the window",
      "token": "--space-6"
    },
    {
      "part": "Rail",
      "measure": "a floating glass panel 84 px wide, radius 24 px, 8 px in from the edges of the window. Its head holds the 22 px mark stroked in a blue gradient, 56 px high, 48 px on a short window",
      "token": "--radius-3xl, --glass-fill, --glass-highlight, --glass-ring, --glass-shadow-panel"
    },
    {
      "part": "Rail tile",
      "measure": "36 px icon box, radius 12 px, 17 px glyph, 10 px label at weight 500, tiles 12 px apart. On a window under 960 px high: 32 px box, 16 px glyph, 10 px apart",
      "token": "--radius-xl"
    },
    {
      "part": "Profile tile",
      "measure": "the last tile is the person's picture, 22 px, 20 px on a short window, with a 1 px ring",
      "token": "--border-rule"
    },
    {
      "part": "Modules panel",
      "measure": "232 px, radius 24 px, docked 6 px from the rail, pushes the content aside. Its head is 56 px, with the workspace glyph at 17 px in muted ink and the workspace name in bold",
      "token": "--glass-fill-panel, --glass-fill, --radius-3xl"
    },
    {
      "part": "Folder toggle",
      "measure": "14 px chevron in muted ink, turned 90 degrees when open. Title in bold, full ink. Padding 4 px by 6 px, radius 8 px",
      "token": "--text, --text-muted, --radius-lg"
    },
    {
      "part": "Module row",
      "measure": "36 px, padding 8 px, gap 10 px, radius 8 px, 18 px glyph, label 14 px at weight 500, rows 2 px apart",
      "token": "--radius-lg, --type-nav"
    },
    {
      "part": "Upcoming module",
      "measure": "the whole row at 60 percent, not a link, with the word Soon after the label and no pill",
      "token": "--text-muted, --type-caption"
    }
  ],
  "variants": [
    {
      "name": "Page list",
      "use": "Blocks of one page, with scroll spy."
    },
    {
      "name": "Rail",
      "use": "WerkOS workspaces and shared pages."
    },
    {
      "name": "Modules panel",
      "use": "Modules of the current workspace."
    }
  ],
  "states": [
    {
      "name": "Idle",
      "change": "Muted ink, glyph stroke 1.75",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Hover, page list",
      "change": "Fill at full radius, full ink",
      "tokens": [
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "Hover, rail and panel",
      "change": "Soft glass fill. A panel row keeps its muted ink, a rail label turns full ink",
      "tokens": [
        "--glass-fill-hover"
      ]
    },
    {
      "name": "Current, page list",
      "change": "1 px outline in full ink at full radius, full ink, aria-current location",
      "tokens": [
        "--text",
        "--radius-full"
      ]
    },
    {
      "name": "Current, rail and panel",
      "change": "Soft blue fill, full ink, glyph stroke 2, aria-current page. In the rail the fill glides to the new tile",
      "tokens": [
        "--nav-fill-active",
        "--text"
      ]
    },
    {
      "name": "Focus",
      "change": "2 px ring, drawn inside the tile in the rail",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Panel closed",
      "change": "No width, out of the tab order and hidden from screen readers. Opens in 150 ms",
      "tokens": [
        "--duration-fast",
        "--ease-soft"
      ]
    },
    {
      "name": "Forced colors",
      "change": "The current WerkOS row also gets a 1 px outline, since fills are removed"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Next link"
    },
    {
      "key": "Enter",
      "action": "Follows the link. On the page list, scrolls to the block and focuses its heading"
    },
    {
      "key": "Enter or Space on a folder",
      "action": "Toggles the folder"
    }
  ],
  "accessibility": [
    "Landmarks: nav named On this page, nav named Main navigation for the rail, nav named Modules.",
    "Current link: aria-current location on the page list, page in the rail and the panel.",
    "Folder toggles are buttons with aria-expanded.",
    "A closed modules panel is inert and hidden from screen readers.",
    "After a jump, focus lands on the block heading, and the heading stops clear of the sticky header.",
    "Idle ink meets 4.5 to 1 on the page color in both themes.",
    "Upcoming rows carry aria-disabled true."
  ],
  "content": [
    "Row labels: the name people use for the place. Module names are proper names and keep their capitals: Global Projects, Job Board. Everything else is in sentence case.",
    "Folder titles: one short noun each, such as People or Organizations.",
    "Upcoming modules: the word Soon, as text."
  ],
  "tokens": [
    "--leftnav-w",
    "--type-nav",
    "--type-caption",
    "--space-4",
    "--text",
    "--text-muted",
    "--surface-control",
    "--radius-full",
    "--radius-lg",
    "--radius-xl",
    "--radius-3xl",
    "--nav-fill-active",
    "--glass-fill-hover",
    "--glass-fill-panel",
    "--glass-fill",
    "--glass-shadow-panel",
    "--glass-highlight",
    "--glass-ring",
    "--border-rule",
    "--focus-ring",
    "--space-6",
    "--duration-fast",
    "--ease-soft"
  ]
}