D.13
pointerhoverspringmotion
Interactive Dock
A navigation dock whose tiles rise and grow as the pointer approaches.
Navigation & Menus · React / Motion / Tailwind
Wayfinding
Know where you are. Get where you're going.
Navigation is a promise that nobody gets lost. This set covers the main patterns — persistent bars, palettes for power users, contextual menus, sheets on small screens and reading progress — each built on the correct ARIA pattern so the promise holds for everyone.
- D.15keyboardclicktweenzero deps
Command Menu
A searchable command palette with grouped commands, fuzzy matching and full keyboard control.
Navigation & Menus · React / CSS / Tailwind
- D.16scrollclickscroll-linkedmotion
Scroll Progress Navbar
A header that tightens and gains a surface as you scroll, with a reading progress bar.
Navigation & Menus · React / Motion / Tailwind
- D.45clickpointerspringmotion
Radial Menu
A circular menu that fans actions around a trigger or the pointer, with direction-aware highlighting.
Navigation & Menus · React / Motion / Tailwind
- D.46scrollclicklayoutmotion
Scrollspy TOC
A table of contents that tracks the section you are reading with a sliding indicator and per-section progress.
Navigation & Menus · React / Motion / Tailwind
- D.47clickkeyboardspringmotion
Dynamic Island
A pill that morphs between idle, compact and expanded live activities on a spring.
Navigation & Menus · React / Motion / Tailwind
- B.39dragclickspringmotion
Bottom Sheet
A draggable modal sheet that snaps between heights with velocity, built on a native dialog.
Cards & Containers · React / Motion / Tailwind
- D.14clickkeyboardlayoutmotion
Morphing Tabs
Accessible tabs with a selection indicator that flows between tabs on a spring.
Navigation & Menus · React / Motion / Tailwind
- D.75clickkeyboardtweenmotion
Overlay Menu
A fullscreen navigation overlay that grows from its hamburger button, with large links rising through masks.
Navigation & Menus · React / Motion / CSS / Tailwind
- D.76clickkeyboardlayoutmotion
Fluid Pagination
Pagination with a sliding active indicator, smart ellipsis windowing and numbers that roll in the direction of travel.
Navigation & Menus · React / Motion / Tailwind
- D.77clickhoverspringmotion
Collapsible Sidebar
An app sidebar that springs down to an icon rail, with fading labels, rail tooltips, nested groups and a sliding active marker.
Navigation & Menus · React / Motion / Tailwind
- D.78hoverclickspringmotion
Morphing Dropdown
A top-nav dropdown where one floating panel morphs its size and position between menus while content slides.
Navigation & Menus · React / Motion / Tailwind
- B.69hoverfocusspringmotion
Link Preview
An inline link that springs out a preview card on hover or keyboard focus, with collision-aware placement.
Cards & Containers · React / Motion / Tailwind
- D.105clickkeyboardlayoutmotion
Smart Breadcrumbs
Breadcrumbs that measure themselves and fold middle items into an accessible overflow menu when space runs short.
Navigation & Menus · React / Motion / Tailwind
- D.106scrollclickspringmotion
Scroll to Top
A back-to-top button with a scroll-progress ring that appears after a threshold, for the window or any scroll box.
Navigation & Menus · React / Motion / SVG / Tailwind
- D.107clickpressspringmotion
Context Menu
A right-click and long-press menu with checkbox and radio items, nested submenus, shortcuts, typeahead and full menu ARIA.
Navigation & Menus · React / Motion / Tailwind
- D.108clickpresslayoutmotion
Mobile Tab Bar
A bottom navigation bar with a sliding indicator, icon bounce, badge counts and an optional raised primary action.
Navigation & Menus · React / Motion / Tailwind
- D.135clickkeyboardtweenzero deps
Step Indicator
A horizontal or vertical wizard stepper whose connectors fill as you advance, with clickable completed steps and a narrow-width summary.
Navigation & Menus · React / CSS / Tailwind
- D.136clickkeyboardspringmotion
Expanding Search
A search icon that springs open into a full field with recent searches, suggestions and a / shortcut.
Navigation & Menus · React / Motion / Tailwind
- D.137clickkeyboardspringmotion
Scrollable Tabs
A tab strip for many tabs: edge fades and scroll buttons, a sliding indicator, wheel-to-horizontal scrolling and closable tabs.
Navigation & Menus · React / Motion / Tailwind
- D.138scrollfocusscroll-linkedmotion
Auto-Hide Header
A sticky header that slides away as you scroll down and springs back the moment you scroll up.
Navigation & Menus · React / Motion / Tailwind
- B.129clickkeyboardspringmotion
Product Tour
An onboarding tour that dims the page, springs a spotlight between targets and anchors a step card with collision handling.
Cards & Containers · React / Motion / SVG / Tailwind
- D.165clickkeyboardtweenmotion
Tree View
A file-explorer tree on the APG pattern: arrow keys, typeahead, multi-select, tri-state checkboxes and lazy loading.
Navigation & Menus · React / Motion / Tailwind
- D.167dragpointertweenzero deps
Alphabet Index
An A–Z scrubber beside a long grouped list: drag to jump with a letter bubble, sticky headers, locale-aware sorting.
Navigation & Menus · React / Tailwind
- D.168hoverfocusspringmotion
Hover Highlight Nav
Nav links with one highlight pill that springs to the hovered or focused link and rests on the active one.
Navigation & Menus · React / Motion / Tailwind
- D.166scrolldragscroll-linkedzero deps
Swipe Tabs
Mobile tabs with side-by-side panels on native scroll-snap and an indicator that tracks the swipe continuously.
Navigation & Menus · React / CSS / Tailwind
- D.198keyboardclickzero deps
Link Hints
Vimium-style keyboard hints scoped to a container: press F to label every visible control, then type the letters to activate one.
Navigation & Menus · React / CSS / Tailwind
- D.197clickkeyboardtweenmotion
Page Transition
A route transition wrapper using the View Transitions API with a Motion fallback, direction-aware presets and SPA focus management.
Navigation & Menus · React / Motion / CSS
- D.196pointerkeyboardtweenzero deps
Selection Toolbar
A Medium-style toolbar that floats above a text selection inside one container, keeps the selection intact and is reachable with Alt+F10.
Navigation & Menus · React / CSS / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVG
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion- Interactive Dock documentation
- Command Menu documentation
- Scroll Progress Navbar documentation
- Radial Menu documentation
- Scrollspy TOC documentation
- Dynamic Island documentation
- Bottom Sheet documentation
- Morphing Tabs documentation
- Overlay Menu documentation
- Fluid Pagination documentation
- Collapsible Sidebar documentation
- Morphing Dropdown documentation
- Link Preview documentation
- Smart Breadcrumbs documentation
- Scroll to Top documentation
- Context Menu documentation
- Mobile Tab Bar documentation
- Step Indicator documentation
- Expanding Search documentation
- Scrollable Tabs documentation
- Auto-Hide Header documentation
- Product Tour documentation
- Tree View documentation
- Alphabet Index documentation
- Hover Highlight Nav documentation
- Swipe Tabs documentation
- Link Hints documentation
- Page Transition documentation
- Selection Toolbar documentation