Design HubStudio

2. Navigation

The hierarchy of orientation — top nav for global, sidebar for section, breadcrumbs for path, tabs for view. Four primitives, one rule: each level of navigation must have a distinct job. If two levels overlap, drop one.

Gallery

Four primitives, shown in isolation. Active state on each uses aria-current="page"; .is-active is supported for non-routing toggles.

Top nav — .nav-item
Sidebar — .sidebar-item + .sidebar-section-label
Tabs — .tabs + .tab
Breadcrumb — .breadcrumb
When to use each

Three decisions: which primary nav, when tabs are tabs, and whether breadcrumbs earn their keep.

Top nav vs. sidebar
Acme
Top nav — for global destinations
Three to seven primary app sections, visible at a glance, scans horizontally. Use for the highest-level navigation — the "rooms" of the app. Stays put across page changes; gives the user a constant frame.
WorkcellActivity
Sidebar — for section navigation
Five or more items, or items with grouping. Scans vertically; supports section labels for hierarchy. Use inside one of the "rooms" the top nav points to — the top nav says which app section, the sidebar navigates within it.
Using both — common in workbench-style apps (Titan, DH). Top nav = global app sections, sidebar = section navigation. Each has a distinct job; they never compete for the same role.
Tabs vs. separate pages
PCR amplification
Tabs — same context, different view
Use when switching views of the same thing. The method is the same; only the lens changes. URL may stay the same or use a fragment. Tabs imply parallel views, not parallel resources.
Separate pages — different contexts
Use when navigating between different things. Methods, resources, and devices are distinct concepts; each deserves its own page and URL. Linkability, bookmarkability, and back-button behavior matter — that's routing, not tab-switching.
Breadcrumbs — when they earn their keep
PCR amplification
Use — deep in hierarchy
Three or more levels deep, or a page reached from multiple paths. The breadcrumb answers "how did I get here?" and offers a way back up without using the browser's back button.
Settings

Workspace preferences and account management.

Skip — shallow or self-evident
One or two levels deep, or the page title already orients fully ("Settings", "Inbox"). A breadcrumb here is just visual chrome — the title says where you are; that's enough.
Drift to avoid

Seven named anti-patterns. Navigation drift is especially insidious because users learn the navigation — every inconsistency taxes their muscle memory.

  • Don't show all four nav primitives on one page
    Principle 1
    Top nav + sidebar + breadcrumb + tabs is visual overload. Pick the levels the page needs. A shallow page might be top nav + sidebar only. A deep detail page might be top nav + breadcrumb + tabs (no sidebar). Not every page needs every level.
  • Don't use tabs to switch resources
    UX
    If clicking a tab changes which thing you're viewing — not the view of one thing — that's routing, not tabs. "Methods / Resources / Devices" as tabs misleads: those are three different concepts, not three views of one. Use top nav or sidebar.
  • Don't put twenty items in a flat sidebar
    Principle 1
    A long flat list defeats scanning. Group with .sidebar-section-label headers; collapse the least-used items behind an overflow; or move secondary items to a different surface (a settings page, a contextual menu). The sidebar is for primary section navigation, not everything you might possibly want.
  • Don't duplicate the page title in the breadcrumb
    Principle 1
    Breadcrumb shows the path to the current page; the .breadcrumb-current at the end repeats the h1 below it. That's two adjacent labels saying the same thing. Either drop the last breadcrumb item or drop the breadcrumb entirely if the title is enough.
  • Don't make hover state and active state look alike
    Principle 4
    The user must be able to tell at a glance which item is selected versus which item they're hovering. Hover is a subtle tint (--color-bg-hover); active is the saturated state (--color-primary-subtle + primary text). Same rule as table rows.
  • Don't hide nav items based on state
    UX
    Users build muscle memory for where items live. Items shouldn't appear or disappear unpredictably between page loads. If an action isn't available, disable the item (with a tooltip explaining why) instead of removing it. Stability beats minimalism.
  • Don't make the brand element link somewhere unexpected
    UX
    Convention: clicking the brand returns to the app home (dashboard or root). Pointing it at a marketing page, a random destination, or nothing at all surprises users who expect the universal escape hatch.
Composition — workcell page

A real page with all four primitives working together. Top nav for global app sections, sidebar for section navigation, breadcrumb for path, tabs for view. Each level has a distinct job; none of them compete.

Acme
OnlineIM

Workcell stations

Station list and configuration controls live in the page body.

  • top nav Three primary app destinations — Workflows / Library / Config. Stays put across pages
  • sidebar with labels Section navigation within Config, grouped: Workcell items + Activity items
  • breadcrumb Two-level path (Config › Workcell stations). Note: the current item is also the h1 — could drop the .breadcrumb-current if the title is right there. Including here for completeness.
  • tabs Filter views of the same Stations data — All / Active / Configured / Archived. Switching tabs doesn't change the resource
  • one-of-each Each primitive does one job. The top nav doesn't list stations; the sidebar doesn't list filters; the tabs don't link to other resources