Playground
  • Introduction
  • Components

Deep linking

Make any state addressable through a URL, so the actor can return to it, share it, or bookmark it without reconstructing it.

Description

Deep linking treats URLs as pointers to specific application states. Rather than linking only to top-level pages, every meaningful state — a filtered view, a selected item, an open modal, a specific comment — gets its own URL. When loaded, these links restore the exact state the user was seeing, allowing them to jump directly to desired content without traversing multiple navigation levels.

This enables users to save their position within complex applications, share specific states with others, and resume incomplete processes exactly where they left off. Deep links can capture both content location (what you’re viewing) and application state (how you’re viewing it).

Core characteristics

  • Addressability: Every distinct state has a unique URL
  • Shareability: URLs can be emailed, tweeted, posted to social networks, discussed in forums, and shared across any platform
  • Bookmarkability: URLs can be saved for later return using browser bookmarks or external services
  • Navigability: Browser back/forward buttons work as expected
  • Persistence: URLs remain stable over time
  • Time-saving: Users jump directly to desired states rather than recreating them through multiple steps

Implementation patterns

Query parameters for transient state:

/tasks?filter=completed&sort=date&view=list

Path segments for resource hierarchy:

/projects/abc123/tasks/def456/comments/ghi789

Hash fragments for view state within a resource:

/document/123#section-4
/workspace/456#comment-thread-789

Combined approach for complex states:

/board/sprint-3?filter=assigned-to-me#card-1234

Parameter selection

  • Capture navigation-critical state (position, filters, selections)
  • Avoid capturing user preferences that shouldn’t change when loading shared links
  • Consider which parameters are necessary for recreating the intended view
  • Balance completeness with URL length and readability

URL visibility and sharing features

  • Update the browser’s URL field immediately as users navigate and change parameters
  • Provide explicit “Share link” or “Copy link” buttons to make the feature discoverable
  • Consider offering embed code that captures both position and state for external sites
  • Show shortened URLs or QR codes for mobile sharing

States

  • Valid: URL resolves to accessible content
  • Invalid: Resource doesn’t exist or user lacks permission (show appropriate error)
  • Stale: URL format changed but can be migrated to new structure

State encoding approaches

  • Full state encoding: Entire application state in URL (enables exact reproduction)
  • Partial state encoding: Only meaningful navigation state in URL (cleaner, more stable)
  • Opaque identifiers: Short codes that resolve to complex state server-side

Accessibility

  • URLs should be human-readable when possible
  • Screen readers should announce navigation changes
  • Keyboard navigation should update URLs appropriately
  • URL changes shouldn’t interrupt screen reader flow

Related components

  • Messaging — Each message/thread is addressable

Resources

  • Cool URIs don’t change — Tim Berners-Lee on URL stability
  • Designing Interfaces (3rd ed.) by Jenifer Tidwell, Charles Brewer, Aynne Valencia

Related patterns

Complements

  • Dynamic hyperlinks — URL-based addressability
  • Fully connected — enables direct access to any page
  • Hub and spoke — enables direct spoke access from external sources
  • Link preview — when a link targets a specific section, the preview can scroll to and highlight the anchored fragment
  • Multilevel tree — enables direct access to any node
  • Pan and zoom — encode position and zoom in URLs for sharing
  • Pyramid — sharing and bookmarking items

Related

  • Commenting — Comments get unique URLs
  • Progressive disclosure — URL state tracks what's expanded/revealed
  • Prose — Deep linking surfaces a piece of system state as a shareable address; the prose around the link does the work of telling the recipient what they will land in.