Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
NavigationFree

App Sidebar

Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

6 states5 edge casesDesktop + Mobile

01The problem

SaaS products accumulate sections: dashboards, records, reports, settings, integrations. Without a deliberate structure, the sidebar becomes a long, flat list where everything has equal weight, users lose track of where they are, and the mobile version is an afterthought.

02When to use

Use when

  • Products with more than ~5 top-level sections
  • Users switch between sections many times a day
  • Multi-workspace or multi-project products

Avoid when

  • Content sites or simple tools with 3–4 destinations — a top bar is enough.
  • Focused single-task flows such as checkout or onboarding — hide global navigation entirely.

03Recommended UX

Statecraft recommendation

Limit the sidebar to the places users visit daily, group the rest under a few labelled sections, and mark the current location with both position and a strong active style. Put workspace switching at the top and account settings at the bottom; never mix them with content navigation.

Every item added to a sidebar reduces the visibility of the others. Settings, billing and rarely used admin pages belong in a settings area, not the main nav.

Top = context (which workspace am I in?), middle = work, bottom = me. This stable layout lets users navigate without reading.

An active state that relies on a faint background tint fails on many screens. Use weight, a marker and colour together.

04Interaction flow

  1. 01

    Land in app

    Sidebar shows workspace, primary items, groups.

  2. 02

    Scan

    Active item marked; groups show what's inside.

  3. 03

    Navigate

    One click to any primary item; groups expand in place.

  4. 04

    Collapse (optional)

    Icon-only rail with tooltips; state remembered.

  5. Result

    • Arrived
    • Switched workspace

05Desktop behaviour

On desktop the sidebar is persistent. Width is a trade-off: wide enough for full labels, with an optional collapsed rail for users who want more canvas.

Desktop rules

  • Keep primary items to about 7; group the rest under 2–4 labelled sections.
  • Workspace switcher at the top, account and settings at the bottom.
  • Collapsed rail shows icons with tooltips and keeps the active marker visible; remember the user's choice.
  • Show counts only when they demand action (e.g. 3 approvals waiting), never for totals.
Context at the top, daily work in the middle, account at the bottom. The active item uses a marker, weight and fill together.

06Mobile behaviour

A desktop sidebar squeezed into a drawer hides everything behind a hamburger. On mobile, promote the top destinations to a bottom tab bar and put the rest in a “More” screen.

Mobile rules

  • Bottom tab bar with the 4 most used destinations plus More.
  • More opens a full screen list with the remaining sections and settings.
  • Workspace switcher moves to the top of the screen header.
  • The active tab uses an icon fill and label, not colour only.
The sidebar becomes a bottom tab bar with the four most used destinations plus More.

07States

  • Default

    Full labels, groups expanded per saved preference.

  • Active item

    Marker, stronger weight and background on the current section.

  • Nested active

    Parent stays marked when a child page is open.

  • Collapsed rail

    Icons only, tooltips on hover and focus.

  • Attention badge

    Count when action is waiting: “Approvals 3”.

  • Unavailable

    Sections outside the plan show a lock and lead to an explanation, or are hidden for members.

08Edge cases

  1. EC-01

    Deep pages

    The user is on Settings › Billing › Invoice 1024.

    Recommendation

    Keep the nearest sidebar ancestor (Settings) active, and let breadcrumbs carry the depth.

  2. EC-02

    Too many workspaces

    A consultant belongs to 40 workspaces.

    Recommendation

    Make the switcher searchable, show recent workspaces first, and support a keyboard shortcut.

  3. EC-03

    Role-specific items

    Admins have 3 extra sections that members never use.

    Recommendation

    Hide items users can never access instead of disabling them. Show locked items only when an upgrade could unlock them.

  4. EC-04

    User-pinned items

    Users want quick access to specific projects.

    Recommendation

    Offer a separate Favourites group they control, below primary items. Don't let personalisation reorder the main navigation.

  5. EC-05

    Long labels and translations

    A German translation doubles label length.

    Recommendation

    Truncate with an ellipsis and show the full label in a tooltip; never wrap labels to two lines in the sidebar.

09Microcopy

  • Group label

    Avoid

    “Misc”

    Prefer

    “Reports”

  • Action badge

    Avoid

    “Approvals (124)”

    Prefer

    “Approvals 3 — only items waiting for you”

  • Locked item

    Prefer

    “Audit log — Business plan”

  • Collapse control

    Prefer

    “Collapse sidebar”

10Accessibility

  • Wrap the sidebar in a nav landmark with a label and mark the current item with aria-current="page".
  • Collapsible groups use buttons with aria-expanded.
  • In the collapsed rail, every icon link keeps an accessible name, and tooltips also appear on keyboard focus.
  • Provide a skip link to main content so keyboard users don't tab through the whole sidebar on every page.

11Developer notes

  1. 01

    Define navigation as data (id, label, icon, href, group, permission, plan) and render it once for sidebar, mobile tabs and command palette.

  2. 02

    Derive the active item from the route, matching the longest prefix, rather than storing it in state.

  3. 03

    Persist collapsed state and group expansion per user.

  4. 04

    Load badge counts separately so a slow count never delays the navigation.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement the main application sidebar.

Requirements:
- Navigation defined as data: { id, label, icon, href, group, permission, plan }.
- Structure: workspace switcher (top), ~7 primary items, 2–4 labelled groups, account/settings (bottom).
- Active item derived from the route by longest prefix; parent stays active on nested pages; aria-current="page".
- Collapsible groups (buttons with aria-expanded) and a collapsible icon rail with tooltips on hover and focus; persist both per user.
- Action badges only for items needing attention; counts loaded asynchronously.
- Hide items the user can't access; show plan-locked items with a lock and an explanation.
- Searchable workspace switcher with recents.
- Mobile: bottom tab bar with 4 destinations + More (full-screen list); switcher moves to the header.
- Skip link to main content.

Do not redesign the existing interface.
Share the navigation config with other navigation surfaces.