Skip to content
Download assets

Navigation

Each screen answers two questions: where am I, and where can I go from here. WerkOS and the Werklist websites answer them the same way, by marking the place at each level and keeping any destination within two steps.

The task

People visit a few places many times a day and the rest now and then. Keep the frequent ones in sight and the rest one panel or one search away.

What carries it

Header
Sections on a website, actions in WerkOS
Side navigation
Workspaces and modules, or the blocks of a long page
Mobile navigation
Workspaces on a phone
Tabs
Panes inside one screen
Command palette
Any module or record by name
Breadcrumb
The way up a folder tree
Back arrow
The way out of a module on a phone

On a desktop

Pick a workspace in the rail and the modules panel lists what it holds. A module opens straight at its toolbar. The rail and the panel light up together, the moment you click.

WerkOS on a desktop. The rail lights Projects, the modules panel lights Global Projects, and the Global Projects board opens at its toolbar. Partners is marked Soon.

On a phone

Tap a workspace in the bottom bar to see its modules. A module opens with its own bar, or none, and the back arrow returns to the list.

Opened from a link with no history, the arrow goes to the nearest parent, then the list, then home.

WerkOS on a phone. The Projects screen lists its modules above the bottom bar. Global Projects opens with the back arrow in its header, and the arrow returns to the list.

On a website

Choose a section in the header and a panel lists its pages. On the page, the side navigation lists its blocks, and the end of the page links to the next one.

The For candidates panel of a Werklist website lists its pages, from Open jobs to Questions.

Loading, empty and errors

While a page loads, the navigation stays still and already shows the new place.

A workspace with no modules says so in one sentence in its panel.

A missing page keeps the header and the navigation, so people can move on from it.

Rules

Mark the current place at each level with full ink and one shape, not with color alone.

Keep any destination within two steps: a section and a page, or a workspace and a module.

Keep the order of workspaces the same on phone and desktop.

Leave out what a person may not open. A module that is coming keeps its place, marked Soon.

Permitted and not permitted

Permitted

  • A breadcrumb for folders more than one level deep

    The root comes first and the current folder last.

  • The same order of places on each device

    People carry their memory of it.

Not permitted

  • Search as the only way to a place

    People who do not know the name are stuck.

  • A breadcrumb of pages visited

    History changes from visit to visit, and the hierarchy does not.

NextFeedback

Navigation

How a screen tells people where they are and gets them anywhere within two steps, in WerkOS on desktop and phone and on Werklist websites.

  • Kind: pattern
  • Page: https://design.werklist.com/patterns/navigation
  • Version: 2.1.2

When to use it

  • WerkOS on a desktop: the rail for workspaces, the modules panel for modules, the module at its toolbar, tabs or a segmented control inside it, and the command palette for anything by name.
  • WerkOS on a phone: the bottom bar for workspaces, the workspace screen for its modules, a module with its own bar or none, and the back arrow to leave it.
  • A website: the header for sections, the section panel for pages, the side navigation for the blocks of a page, and a link to the next page at the end.

When not to use it

  • Search as the only way to a place.
  • More than two levels in one navigation surface.
  • A breadcrumb of pages visited.
  • Hiding or disabling places because of what is on screen.

Rules

  • Mark the current place at each level at the same time, in full ink and one shape: a fill in WerkOS, an outline in a page list, a bar under a tab. Never with color alone.
  • One item is marked at each level: the place you chose last.
  • The place you click lights at once, before the page loads.
  • Any place is within two steps: a section and a page, or a workspace and a module.
  • Back returns to where you came from. Opened from a link with no history, it goes to the nearest parent, then the workspace screen, then home.
  • What a person may not open is left out. A module that is coming keeps its place, marked Soon, and is not a link.
  • The workspaces keep the same order on phone and desktop.
  • A breadcrumb appears only inside a folder at least one level below the root, and follows the hierarchy, not the history.
  • In a breadcrumb the parent folders are links in muted ink, and the current folder is text in full ink at weight 500.
  • Breadcrumb separators are 14 px chevrons.
  • When room runs out, the folders above the parent fold into a menu. At 360 px only the parent and the current folder show.

States

  • Loading: The navigation stays still and shows the new place. The content shows its skeleton.
  • Empty workspace: The panel says in one sentence that the workspace has no modules (--text-muted)
  • Missing page: The page keeps the header and the navigation

Accessibility

  • A screen reader hears the breadcrumb as a list, without the chevrons, and hears which folder is current.

Tokens

  • --type-nav
  • --text
  • --text-muted
  • --nav-fill-active
  • --nav-tab-chip
  • --focus-ring

JSON

{
  "title": "Navigation",
  "path": "/patterns/navigation",
  "url": "https://design.werklist.com/patterns/navigation",
  "text": "https://design.werklist.com/agent/patterns/navigation",
  "summary": "How people find their way around WerkOS and Werklist websites, and how each screen tells them where they are.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Navigation",
  "purpose": "How a screen tells people where they are and gets them anywhere within two steps, in WerkOS on desktop and phone and on Werklist websites.",
  "use": [
    "WerkOS on a desktop: the rail for workspaces, the modules panel for modules, the module at its toolbar, tabs or a segmented control inside it, and the command palette for anything by name.",
    "WerkOS on a phone: the bottom bar for workspaces, the workspace screen for its modules, a module with its own bar or none, and the back arrow to leave it.",
    "A website: the header for sections, the section panel for pages, the side navigation for the blocks of a page, and a link to the next page at the end."
  ],
  "avoid": [
    "Search as the only way to a place.",
    "More than two levels in one navigation surface.",
    "A breadcrumb of pages visited.",
    "Hiding or disabling places because of what is on screen."
  ],
  "rules": [
    "Mark the current place at each level at the same time, in full ink and one shape: a fill in WerkOS, an outline in a page list, a bar under a tab. Never with color alone.",
    "One item is marked at each level: the place you chose last.",
    "The place you click lights at once, before the page loads.",
    "Any place is within two steps: a section and a page, or a workspace and a module.",
    "Back returns to where you came from. Opened from a link with no history, it goes to the nearest parent, then the workspace screen, then home.",
    "What a person may not open is left out. A module that is coming keeps its place, marked Soon, and is not a link.",
    "The workspaces keep the same order on phone and desktop.",
    "A breadcrumb appears only inside a folder at least one level below the root, and follows the hierarchy, not the history.",
    "In a breadcrumb the parent folders are links in muted ink, and the current folder is text in full ink at weight 500.",
    "Breadcrumb separators are 14 px chevrons.",
    "When room runs out, the folders above the parent fold into a menu. At 360 px only the parent and the current folder show."
  ],
  "states": [
    {
      "name": "Loading",
      "change": "The navigation stays still and shows the new place. The content shows its skeleton."
    },
    {
      "name": "Empty workspace",
      "change": "The panel says in one sentence that the workspace has no modules",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Missing page",
      "change": "The page keeps the header and the navigation"
    }
  ],
  "accessibility": [
    "A screen reader hears the breadcrumb as a list, without the chevrons, and hears which folder is current."
  ],
  "tokens": [
    "--type-nav",
    "--text",
    "--text-muted",
    "--nav-fill-active",
    "--nav-tab-chip",
    "--focus-ring"
  ]
}

Raw file: https://design.werklist.com/agent/patterns/navigation