# Side navigation

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.

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

## When to use it

* 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.

## When not to use it

* 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

* Page list: columns 1 and 2 of the twelve column grid from 1024 px, with no fill, border or radius (--leftnav-w)
* Page list title: the page title, 24 px on 32 px, weight 700, with 16 px under it. Plain text, not a heading and not a link (--text)
* Page list row: 36 px, padding 8 px by 16 px, 56 px when the label wraps to two lines (--type-nav, --space-4)
* Page list position: sticks 24 px under the header and scrolls on its own when taller than the window (--space-6)
* Rail: 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 (--radius-3xl, --glass-fill, --glass-highlight, --glass-ring, --glass-shadow-panel)
* Rail tile: 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 (--radius-xl)
* Profile tile: the last tile is the person's picture, 22 px, 20 px on a short window, with a 1 px ring (--border-rule)
* Modules panel: 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 (--glass-fill-panel, --glass-fill, --radius-3xl)
* Folder toggle: 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 (--text, --text-muted, --radius-lg)
* Module row: 36 px, padding 8 px, gap 10 px, radius 8 px, 18 px glyph, label 14 px at weight 500, rows 2 px apart (--radius-lg, --type-nav)
* Upcoming module: the whole row at 60 percent, not a link, with the word Soon after the label and no pill (--text-muted, --type-caption)

## Variants

* Page list: Blocks of one page, with scroll spy.
* Rail: WerkOS workspaces and shared pages.
* Modules panel: Modules of the current workspace.

## States

* Idle: Muted ink, glyph stroke 1.75 (--text-muted)
* Hover, page list: Fill at full radius, full ink (--surface-control, --text)
* Hover, rail and panel: Soft glass fill. A panel row keeps its muted ink, a rail label turns full ink (--glass-fill-hover)
* Current, page list: 1 px outline in full ink at full radius, full ink, aria-current location (--text, --radius-full)
* Current, rail and panel: Soft blue fill, full ink, glyph stroke 2, aria-current page. In the rail the fill glides to the new tile (--nav-fill-active, --text)
* Focus: 2 px ring, drawn inside the tile in the rail (--focus-ring)
* Panel closed: No width, out of the tab order and hidden from screen readers. Opens in 150 ms (--duration-fast, --ease-soft)
* Forced colors: The current WerkOS row also gets a 1 px outline, since fills are removed

## Keyboard

* Tab: Next link
* Enter: Follows the link. On the page list, scrolls to the block and focuses its heading
* Enter or Space on a folder: 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