pattern playground

Hub and spoke

Added

Hub lists major sections. Actors navigate to spokes, complete tasks, then return to hub for other sections. Spokes link only to hub, not to each other.

This structure trades navigation flexibility for cognitive simplicity—actors always know the path to any destination. Limited space in spokes constrains additional navigation options.

Most commonly found on mobile devices where screen space is limited and clear task focus is valuable. The iPhone home screen exemplifies the pattern: apps are spokes, the home screen is the hub.

Behavioural position

Supports

Constrains

  • Navigating — forces hub return even when destination is known
  • Browsing — limits lateral movement between related spokes

The constraint on navigating can frustrate actors who know their destination but must take two-step journeys. However, for exploring, the hub provides clear overview of available spaces.

Variants

  • Pure hub and spoke: Spokes contain no navigation to other spokes. Only path back is to hub. Best for completely independent sections.
  • Hub and spoke with limited cross-links: Spokes can link to closely related spokes directly. Good for sections with clear relationships.
  • Hub and spoke with global navigation: Hub provides entry point, but spokes include global navigation to all sections. Becomes hybrid pattern.

States

Hub states

  • Active — currently displaying, actors select destination
  • Returning — navigated back from spoke, may need visual indication of previous context
  • Updated — indicators show changes in spokes (badges, highlights, notifications)

Spoke states

  • Active — currently displaying content/functionality
  • Accessible — available from hub
  • Restricted — greyed out or hidden based on permissions or prerequisites
  • Notifying — has updates or requires attention (shown on hub)

To-do

Follow-up to capture: mobile app architectures with tab bars, a common realisation where the tab bar acts as the persistent hub.

Resources & references

Consequences

  • every destination is two moves from every other through a surface that always knows the way, so the actor can't get lost — and can't travel laterally either; a journey between two spokes that turns out to be routine is paid for twice on every trip
  • the hub is the one surface every journey passes through, which makes it the natural place to report across all the spokes — what changed, what needs attention; what to show there is its own design problem, not something the topology settles
  • a spoke has little room for navigation of its own, so anything that has to be reachable from inside one competes for space with the spoke's actual work

Related patterns

Precedes

  • Purpose-keyed view — the hub is the one surface every journey passes through, which makes it the natural place to report across all the spokes — what changed, what needs attention; what to show there is its own design problem, not something the topology settles

Enables

  • Workspace — organisational containers often use hub and spoke

Complements

  • Command menu — provides escape hatch for quick navigation without hub return
  • Deep linking — enables direct spoke access from external sources
  • Searching — alternative to hub browsing for known destinations

Alternatives

  • Fully connected — for frequent cross-section movement
  • Multilevel tree — for hierarchical relationships
  • Hybrid patterns — to add cross-spoke navigation
  • Overview and detail — the boundary is what sits beneath: overview-detail shows one collection at two levels of detail; hub-and-spoke routes between sections that share no underlying model
  • Pyramid — when items don't form sequences

Related

Preceded by

  • Flat navigation — everything is reachable in one place — which holds only while the tools and destinations fit one surface; when the item count outgrows the screen, hub and spoke takes over