Component category
Navigation Layout
149 implemented experiments in this category. Filter the focused category with responsive previews and framework-free source.
Complete category directory
Browse every navigation layout component.
These direct links keep the full catalog usable without filtering and make each component reachable from its category page.
- Adaptive glass commandAdaptive command bar
Prioritizes contextual commands in a compact toolbar that exposes overflow without hiding the primary action.
- Editorial architectureAdaptive Command Finder
Climate field guide: an intent-oriented finder with ranked results, keyboard movement, and a resilient empty state.
- Editorial architectureAdaptive Constellation Map
Climate field guide: a spatial destination constellation paired with an equivalent linear navigation list.
- Editorial architectureAdaptive Destination Preview
Climate field guide: a disclosure menu that previews destination content and state before navigation.
- Editorial architectureAdaptive History Rail
Climate field guide: a recency rail that supplements stable navigation with timestamped return points.
- Editorial architectureAdaptive Journey Navigator
Climate field guide: a non-linear stage map that distinguishes available, complete, optional, and blocked steps.
- Editorial architectureAdaptive Navigation Tree
Climate field guide: a disclosure tree that preserves hierarchy, focus, and branch state without visual overload.
- Editorial architectureAdaptive Overflow Rescue
Climate field guide: a measurement-aware overflow menu that keeps every long or translated label reachable.
- Editorial architectureAdaptive Permission Map
Climate field guide: a destination map that explains locked areas and offers an accountable access path.
- Editorial architectureAdaptive Route Restore
Climate field guide: a recovery navigator that restores destination, scroll, filters, and interruption context.
- Editorial architectureAdaptive Section Switcher
Climate field guide: a sibling-destination switcher with roving selection, arrow-key movement, and visible context.
- Editorial architectureAdaptive Semantic Trail
Climate field guide: a crawlable location trail with descriptive parent links and a legible current destination.
- Editorial architectureAdaptive Workspace Switcher
Climate field guide: a context switcher that keeps tenant, role, environment, and destination visible together.
- Orbital progressAsync Action Cluster
Research export: a primary command with an accessible secondary-action disclosure that preserves focus and Escape.
- Orbital progressAsync Adaptive Action
Research export: a prerequisite-aware action that explains what is missing and changes its verb as readiness improves.
- Orbital progressAsync Approval Router
Research export: an approval control combining owner selection, response policy, escalation context, and an audit.
- Orbital progressAsync Bulk Console
Research export: a bulk action console that keeps selected scope, exclusions, progress, and cancellation.
- Orbital progressAsync Command Button
Research export: a consequence-first command button that exposes idle, working, and confirmed states without resizing.
- Orbital progressAsync Hold Reactor
Research export: a deliberate hold control with keyboard parity, visible commitment progress, and cancellation on.
- Orbital progressAsync Icon Action
Research export: a compact icon action whose visible label, shortcut, and consequence never depend on icon.
- Orbital progressAsync Magnetic Action
Research export: a fixed action target with bounded pointer-attraction artwork and an equally expressive keyboard.
- Orbital progressAsync Offline Queue
Research export: a connectivity-aware action that produces a local queue receipt and an understandable.
- Orbital progressAsync Retry Recovery
Research export: a recovery panel that retains the failed payload, explains the failure, and offers retry or a.
- Orbital progressAsync Shortcut Action
Research export: a command surface that documents a keyboard chord and confirms identical click and keyboard outcomes.
- Orbital progressAsync Split Decision
Research export: a split action pairing one safe default with keyboard-navigable alternatives and explicit outcomes.
- Coding Laboratory utilityBreadcrumb trail
A small responsive breadcrumb that clarifies hierarchy without dominating the page.
- Command latticeCommand Command Finder
Developer command surface: an intent-oriented finder with ranked results, keyboard movement, and a resilient empty.
- Command latticeCommand Constellation Map
Developer command surface: a spatial destination constellation paired with an equivalent linear navigation list.
- Command latticeCommand Destination Preview
Developer command surface: a disclosure menu that previews destination content and state before navigation.
- Command latticeCommand History Rail
Developer command surface: a recency rail that supplements stable navigation with timestamped return points.
- Command latticeCommand Journey Navigator
Developer command surface: a non-linear stage map that distinguishes available, complete, optional, and blocked steps.
- Command latticeCommand Navigation Tree
Developer command surface: a disclosure tree that preserves hierarchy, focus, and branch state without visual.
- Command latticeCommand Overflow Rescue
Developer command surface: a measurement-aware overflow menu that keeps every long or translated label reachable.
- Command latticeCommand Permission Map
Developer command surface: a destination map that explains locked areas and offers an accountable access path.
- Command latticeCommand Route Restore
Developer command surface: a recovery navigator that restores destination, scroll, filters, and interruption context.
- Command latticeCommand Section Switcher
Developer command surface: a sibling-destination switcher with roving selection, arrow-key movement, and visible.
- Command latticeCommand Semantic Trail
Developer command surface: a crawlable location trail with descriptive parent links and a legible current destination.
- Command latticeCommand Workspace Switcher
Developer command surface: a context switcher that keeps tenant, role, environment, and destination visible together.
- Catalog gatewayCommerce category nav
Makes product categories, featured collections, account, search, and cart understandable across widths.
- Coding Laboratory utilityCompact sidebar menu
A slim dashboard navigation rail with section labels, active state, and item counts.
- Coding Laboratory utilityCompact tabs strip
A keyboard-friendly tab strip for switching among tightly related panels.
- Coding Laboratory utilityCompact top app bar
A narrow application header with brand, navigation links, status, and one action.
- Fractured crystalCrystal shatter button
Splits a crystalline face into contained facets when the action completes.
- Workspace commandDashboard command header
Combines workspace context, search, notifications, and the primary creation action in a responsive header.
- Precision signalDecisive Action Cluster
Production launch: a primary command with an accessible secondary-action disclosure that preserves focus and.
- Precision signalDecisive Adaptive Action
Production launch: a prerequisite-aware action that explains what is missing and changes its verb as readiness.
- Precision signalDecisive Approval Router
Production launch: an approval control combining owner selection, response policy, escalation context, and an.
- Precision signalDecisive Bulk Console
Production launch: a bulk action console that keeps selected scope, exclusions, progress, and cancellation.
- Precision signalDecisive Command Button
Production launch: a consequence-first command button that exposes idle, working, and confirmed states without.
- Precision signalDecisive Hold Reactor
Production launch: a deliberate hold control with keyboard parity, visible commitment progress, and cancellation.
- Precision signalDecisive Icon Action
Production launch: a compact icon action whose visible label, shortcut, and consequence never depend on icon.
- Precision signalDecisive Magnetic Action
Production launch: a fixed action target with bounded pointer-attraction artwork and an equally expressive.
- Precision signalDecisive Offline Queue
Production launch: a connectivity-aware action that produces a local queue receipt and an understandable.
- Precision signalDecisive Retry Recovery
Production launch: a recovery panel that retains the failed payload, explains the failure, and offers retry or a.
- Precision signalDecisive Shortcut Action
Production launch: a command surface that documents a keyboard chord and confirms identical click and keyboard.
- Precision signalDecisive Split Decision
Production launch: a split action pairing one safe default with keyboard-navigable alternatives and explicit outcomes.
- Reference treeDocs sidebar navigation
Provides searchable, collapsible documentation navigation with a persistent current-page indicator.
- Solar eclipseEclipse hover button
Reveals a luminous corona as a dark orbital disc crosses a compact action surface.
- Elastic gelElastic blob toggle
A tactile preference switch with a three-lobe gel thumb that stretches, catches up, and reforms.
- Luminous edge railExpanding rail navigation
Keeps destinations icon-compact until hover, focus-within, or explicit pinning expands their labels.
- Query compassExplorer Anomaly narrative card
Explorer Anomaly narrative card is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Cohort explorer
Explorer Cohort explorer is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Decision observatory
Explorer Decision observatory is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Labelled mini chart
Explorer Labelled mini chart is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Metric context card
Explorer Metric context card is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Partial result recovery
Explorer Partial result recovery is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Responsive data table
Explorer Responsive data table is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Revenue leak ledger
Explorer Revenue leak ledger is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Scenario comparison matrix
Explorer Scenario comparison matrix is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Service health topology
Explorer Service health topology is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Stale data guardrail
Explorer Stale data guardrail is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Query compassExplorer Trace waterfall
Explorer Trace waterfall is an accessible, animated data controls pattern with visible evidence and reversible actions.
- Ember forgedFire forged button
A cinematic action button with a layered ember bed, licking flames, sparks, and heat-reactive states.
- Soft outlineFloating navigation
A compact, floating site navigation with a responsive menu and focused call to action.
- Swipe glass tabsGesture tab switcher
Supports click, arrow-key, and horizontal swipe selection within one compact tab surface.
- Gravity lensGravity well button
Pulls orbiting particles toward the pointer while preserving a stable native action target.
- Coding Laboratory utilityIcon action button
A square toolbar button with an accessible name and a lightweight hover tooltip.
- Chromatic ink bloomInk bloom button
Blooms layered ink pools beneath a clear label without reducing contrast.
- Kinetic clipboardKinetic copy button
A tactile clipboard action with a sliding icon carriage, contained spark rail, and durable success feedback.
- Coding Laboratory utilityLabeled toggle switch
A compact settings switch with visible labels and announced on or off state.
- Mercury chromeLiquid metal button
A reflective mercury action whose edge blobs stretch and fuse into a polished chrome capsule.
- Orbital darkMagnetic orbit button
A pointer-responsive action that leans into intent while three luminous satellites orbit its boundary.
- Magnifying glass dockMagnifying dock navigation
A labeled application dock whose destinations magnify by pointer proximity and keyboard focus.
- Pocket orbitMobile Command Finder
Museum night trail: an intent-oriented finder with ranked results, keyboard movement, and a resilient empty state.
- Pocket orbitMobile Constellation Map
Museum night trail: a spatial destination constellation paired with an equivalent linear navigation list.
- Pocket orbitMobile Destination Preview
Museum night trail: a disclosure menu that previews destination content and state before navigation.
- Pocket orbitMobile History Rail
Museum night trail: a recency rail that supplements stable navigation with timestamped return points.
- Pocket orbitMobile Journey Navigator
Museum night trail: a non-linear stage map that distinguishes available, complete, optional, and blocked steps.
- High contrastMobile navigation drawer
A full-height mobile menu with a dimmed backdrop, focus management, and grouped links.
- Pocket orbitMobile Navigation Tree
Museum night trail: a disclosure tree that preserves hierarchy, focus, and branch state without visual overload.
- Pocket orbitMobile Overflow Rescue
Museum night trail: a measurement-aware overflow menu that keeps every long or translated label reachable.
- Pocket orbitMobile Permission Map
Museum night trail: a destination map that explains locked areas and offers an accountable access path.
- Pocket orbitMobile Route Restore
Museum night trail: a recovery navigator that restores destination, scroll, filters, and interruption context.
- Pocket orbitMobile Section Switcher
Museum night trail: a sibling-destination switcher with roving selection, arrow-key movement, and visible context.
- Pocket orbitMobile Semantic Trail
Museum night trail: a crawlable location trail with descriptive parent links and a legible current destination.
- Pocket orbitMobile Workspace Switcher
Museum night trail: a context switcher that keeps tenant, role, environment, and destination visible together.
- Download capsuleMorphing download button
Transforms from download action to determinate transfer rail and verified package state.
- Neon split controlNeon split action button
A compact default launch action with a separate neon disclosure and keyboard-navigable mode menu.
- Orbital pathfinderOrbital breadcrumb navigation
Shows a navigational path as connected planetary nodes with an unmistakable current destination.
- Coding Laboratory utilityPagination control
A compact page navigator with previous, next, current, and condensed page links.
- Photon acceleratorPhoton trail button
Carries a bright photon around the perimeter to communicate a fast send action.
- Plasma reactorPlasma charge button
A hold-to-confirm control with a live conic charge ring, cancellable progress, and reactor-complete state.
- Coding Laboratory utilityPrimary action button
A focused primary button with an icon slot, compact sizing, and clear interaction states.
- Prismatic page stepsPrism page stepper
Combines compact pagination with a refracted progress beam and jump feedback.
- Spectral glassPrism refraction button
A premium glass action with three clipped spectral panes that refract independently through its surface.
- Signal pulsePulse ring icon button
Provides a compact icon action with readable tooltip text and multi-ring attention feedback.
- Quantum interferenceQuantum ripple button
Launches one action through concentric interference rings that originate at the activation point.
- Radial bloomRadial action menu
A compact central action hub that blooms four labeled commands into fixed radial positions.
- Glass split workspaceResizable glass split panel
A two-pane glass workspace with bounded pointer dragging and fully equivalent keyboard separator controls.
- Product mapSaaS mega menu
Organizes product, solution, resource, and company destinations into a keyboard-friendly navigation map.
- Chromatic scroll spyScroll-spy pill navigation
Tracks the active section with a sliding spectral pill and direct keyboard selection.
- Coding Laboratory utilitySegmented view control
A compact three-option control for switching views with announced pressed state.
- Shared signalTeam Action Cluster
Campaign approval: a primary command with an accessible secondary-action disclosure that preserves focus and.
- Shared signalTeam Adaptive Action
Campaign approval: a prerequisite-aware action that explains what is missing and changes its verb as readiness.
- Shared signalTeam Approval Router
Campaign approval: an approval control combining owner selection, response policy, escalation context, and an.
- Shared signalTeam Bulk Console
Campaign approval: a bulk action console that keeps selected scope, exclusions, progress, and cancellation.
- Shared signalTeam Command Button
Campaign approval: a consequence-first command button that exposes idle, working, and confirmed states without.
- Shared signalTeam Hold Reactor
Campaign approval: a deliberate hold control with keyboard parity, visible commitment progress, and cancellation.
- Shared signalTeam Icon Action
Campaign approval: a compact icon action whose visible label, shortcut, and consequence never depend on icon.
- Shared signalTeam Magnetic Action
Campaign approval: a fixed action target with bounded pointer-attraction artwork and an equally expressive.
- Shared signalTeam Offline Queue
Campaign approval: a connectivity-aware action that produces a local queue receipt and an understandable.
- Shared signalTeam Retry Recovery
Campaign approval: a recovery panel that retains the failed payload, explains the failure, and offers retry or a.
- Shared signalTeam Shortcut Action
Campaign approval: a command surface that documents a keyboard chord and confirms identical click and keyboard.
- Shared signalTeam Split Decision
Campaign approval: a split action pairing one safe default with keyboard-navigable alternatives and explicit outcomes.
- Aqua glassWater drop button
A glassy aqua button with a suspended droplet, moving waterline, splash crown, and surface ripples.
- Control deckWorkspace Automation run console
Workspace Automation run console is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Control deckWorkspace Capacity balancing console
Workspace Capacity balancing console is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Command Finder
Northstar / Production: an intent-oriented finder with ranked results, keyboard movement, and a resilient empty state.
- Control deckWorkspace Conflict aware edit queue
Workspace Conflict aware edit queue is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Constellation Map
Northstar / Production: a spatial destination constellation paired with an equivalent linear navigation list.
- Control deckWorkspace Customer health workspace
Workspace Customer health workspace is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Control deckWorkspace Dependency path planner
Workspace Dependency path planner is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Destination Preview
Northstar / Production: a disclosure menu that previews destination content and state before navigation.
- Control deckWorkspace Failed job recovery board
Workspace Failed job recovery board is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Control deckWorkspace Handoff readiness panel
Workspace Handoff readiness panel is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace History Rail
Northstar / Production: a recency rail that supplements stable navigation with timestamped return points.
- Control deckWorkspace Incident response workspace
Workspace Incident response workspace is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Journey Navigator
Northstar / Production: a non-linear stage map that distinguishes available, complete, optional, and blocked steps.
- Control deckWorkspace Mission control workspace
Workspace Mission control workspace is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Navigation Tree
Northstar / Production: a disclosure tree that preserves hierarchy, focus, and branch state without visual overload.
- Operational railsWorkspace Overflow Rescue
Northstar / Production: a measurement-aware overflow menu that keeps every long or translated label reachable.
- Operational railsWorkspace Permission Map
Northstar / Production: a destination map that explains locked areas and offers an accountable access path.
- Operational railsWorkspace Route Restore
Northstar / Production: a recovery navigator that restores destination, scroll, filters, and interruption context.
- Control deckWorkspace Schedule agenda
Workspace Schedule agenda is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Section Switcher
Northstar / Production: a sibling-destination switcher with roving selection, arrow-key movement, and visible context.
- Operational railsWorkspace Semantic Trail
Northstar / Production: a crawlable location trail with descriptive parent links and a legible current destination.
- Control deckWorkspace Work item card
Workspace Work item card is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Control deckWorkspace Workflow board
Workspace Workflow board is an accessible, animated workspace shells pattern with visible evidence and reversible actions.
- Operational railsWorkspace Workspace Switcher
Northstar / Production: a context switcher that keeps tenant, role, environment, and destination visible together.








