Patterns for Search & Navigation
- Desktop (98)
- Tablet (3)
- Mobile (32)
406. Fixed Bottom-Right Chat Bubble
Desktop, Feedback, Pathfinding, Onboarding, Web, English, Chat, Side Panel, Accordion, Fixed on Scroll, Notification Badge, Progress State, Live State, Transition, Scrollbar, Text Input
404. Sidebar Backdrop Menu
Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation
400. 3D Button Shadow
Desktop, Awareness, Pathfinding, Button, Animation, Transition
397. Modal w/ Card Options
Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation, Close Overlay, Cards, Dim Overlay
379. Dropdown Filters
Desktop, Pathfinding, Accessibility, Web, EspaƱol, Filters
363. Better History - Back to Top on scroll
Desktop, Pathfinding, Awareness, Web, English, Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll
375. Toggle/Show Sidebar Menu
Desktop, Pathfinding, Web, EspaƱol, Navbar, Side Panel, Transition, Hover Event, Click Event, Avatar, List Items, Tabs
361. WhatsApp - Progress Bar Loading
Desktop, Awareness, Pathfinding, Onboarding, Web, EspaƱol, Loader, Hypertext Links
360. Page Outline Menu
Desktop, Pathfinding, Awareness, Accessibility, Onboarding, Web, English, Pagination, Anchor Scroll
359. Discord - Button to Input Transition
Desktop, Decision Making, Pathfinding, Consent, Web, EspaƱol, Text Input, Hypertext Links
356. MetaMap - Multi-Layout Topbar Menu
Desktop, Pathfinding, Awareness, Decision Making, Web, English, Navbar, Dropdown Menu
353. Population Pyramid - Visualizations with live filters
Desktop, Pathfinding, Awareness, Decision Making, Web, EspaƱol, Graph, Filters, Dropdown Menu, Transition
350. Netifly - Multi-layout Topbar Menu
Desktop, Pathfinding, Web, English, Navbar, Dropdown Menu
359. Toggle List/Grid View
Desktop, Accessibility, Onboarding, Pathfinding, Web, EspaƱol, Tooltip, Hypertext Links
357. Modal w/ Steps & Animation (No blackout)
Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration
344. MercadoLibre - Horizontal Item Slider
Desktop, Awareness, Pathfinding, Web, EspaƱol, Carrousel, Modal, Pagination, Image / Illustration
342. Savee - Light/Dark Mode Switcher
Desktop, Accessibility, Pathfinding, Web, English, Checkbox, Tabs
341. Image Grid Customization Sliders
Desktop, Accessibility, Pathfinding, Web, English, Animation, Drag & Drop Gesture, Range Field
340. Asana - Zoom/Magnifier Over Image
Desktop, Accessibility, Pathfinding, Web, English, Animation
339. Asana - Platform Onboarding Simulator
Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links
346. Sidebar Menu With Collapsable Items (Show More)
Desktop, Pathfinding, Accessibility, Awareness, Web, English, Accordion, Navbar
345. Vertical Accordion for FAQs
Desktop, Pathfinding, Accessibility, Awareness, Web, EspaƱol, Accordion, Hypertext Links
336. Floating Popover on Click
Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links
343. Modal/Dialog Drag & Drop to Fixed Position
Desktop, Accessibility, Pathfinding, Awareness, Web, EspaƱol, Drag & Drop Gesture, Modal, Side Panel, Alert Dialog
331. Linkedin - Search Bar Blackout
Desktop, Pathfinding, Awareness, Web, EspaƱol
332. Drag & Drop to Create File from Web Image
Desktop, Pathfinding, Accessibility, Awareness, Web, Apple OS, Drag & Drop Gesture, Image / Illustration, File OS, Modal, Click Event
322. Search on Menu Items
Desktop, Pathfinding, Awareness, Apple OS, EspaƱol, Navbar, Dropdown Menu, Text Input, Fixed on Scroll
336. Transition: Zoom-In/Out for Browser Windows
Desktop, Pathfinding, Apple OS, EspaƱol, Transition, Tabs, Thumbnail, Pinch Gesture
333. Static Tooltip with Steps
Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English
324. Visual Studio Code - Dual View Scroll Sync
Desktop, Decision Making, Pathfinding, Apple OS, English
320. Discord - Sign In with Loading Tips
Desktop, Pathfinding, Onboarding, Apple OS, English, QR, Text Input, Password Input, Button
318. Binance - Tooltip on Features
Desktop, Decision Making, Onboarding, Pathfinding, Web, English
312. Pocket - View Switcher
Desktop, Pathfinding, Accessibility, Web, EspaƱol, Navbar, Thumbnail, Toggle Field, Radio Button
318. Instagram - Animated Illustration with Menu
Desktop, Pathfinding, Awareness, Web, English, Animation, Pagination, Carrousel
309. Instagram - Brand Gradient
Desktop, Landing Page, Pathfinding, https://about.instagram.com/brand/gradient, Web, English, Animation, Scrollbar, Photo
308. MercadoLibre - Hero Slider
Desktop, Pathfinding, Awareness, Web, EspaƱol, Carrousel, Drag & Drop Gesture, Transition, Photo
313. Modal Blackout w/ Scroll
Desktop, Pathfinding, Web, EspaƱol, Modal, Scrollbar, Image / Illustration, Photo, MercadoLibre
308. Spinners for Module Loading
Desktop, Awareness, Pathfinding, Web, English, Loader, Twitter
307. Tooltip on Hover
Desktop, Awareness, Pathfinding, Apple OS, Web, English, Thumbnail, Tooltip, Side Panel, Google, Google Chrome
305. Button Combo for App Download
Desktop, Pathfinding, Decision Making, Awareness, Web, EspaƱol, Button, Microsoft, Microsoft Teams
302. Theme Switcher in Side-drawer
Desktop, Accessibility, Pathfinding, Web, EspaƱol, Side Panel, Transition, Image / Illustration, Click Event, Google
300. Sound Bars Graph
Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp
_00.42.51.png?table=block&id=0252c6ff-06c8-496f-88d6-e8f876a3af4d&cache=v2)
295. āNEWā Badge on Menu Items
Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, Navbar, Notification Badge, Hypertext Links, Notion
293. Collapsable Sidebar Menu
Desktop, Awareness, Pathfinding, Accessibility, Web, English, EspaƱol, Side Panel, Transition, Click Event, Navbar, Google, Gmail
292. Vertical Icon Menu
Desktop, Awareness, Pathfinding, Web, English, Tooltip, Side Panel, Navbar, Hover Event, Image / Illustration, Notification Badge, Dashboard, Mailchimp
291. Action Menu from Button
Desktop, Decision Making, Awareness, Pathfinding, Web, English, Google, Google Meet
286. Background Animation on Scroll
Desktop, Awareness, Pathfinding, Web, EspaƱol, Animation, Transition, Image / Illustration, Fixed on Scroll, Apple
285. Cloudflare - Sidebar with Scroll
Desktop, Pathfinding, Awareness, Web, English, Cloudflare
284. Emergency Information Map
Desktop, Pathfinding, Awareness, Landing Page, Web, EspaƱol, Google
284. Top Tooltip on Link Hover
Desktop, Awareness, Pathfinding, Web, English, Crunchbase
282. Telegram - Chat Setup Wizard
Desktop, Onboarding, Accessibility, Pathfinding, Apple OS, English, Telegram
279. Collapsable Layout Sidebars
Desktop, Pathfinding, Accessibility, Apple OS, macOS, EspaƱol, Toolbar, Navbar, Side Panel, Click Event, Transition, Avatar, Chat, Drag & Drop Gesture, List Items, Button, Close Overlay, Slack
278. Search Menu Dropdown from Input Text
Desktop, Pathfinding, Accessibility, Web, English, Google, Google Analytics
277. Horizontal Card Slider with Actions
Desktop, Pathfinding, Accessibility, Web, EspaƱol, Linkedin
268. Drag & Drop to Upload File
Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY
274. Interactive Background Animation
Desktop, Pathfinding, Awareness, Web, English, Animation, Loader, Drag & Drop Gesture, GitHub
265. Youtube - Hidden Options Menu (Dots)
Desktop, Pathfinding, Accessibility, Web, English, YouTube, Google
264. Interactive Background Animation
Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma
259. Multi-depth Sidebar Navigation
Desktop, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace
258. Squarespace - Adaptable Viewport Size
Desktop, Accessibility, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace
254. Toggle/Hide Sidebar Menu (Mouse)
Desktop, Pathfinding, Accessibility, Web, English, EspaƱol, Toggle Field, Active State, Side Panel, Transition, Click Event, Notion
253. Youtube - Table Row Selector
Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google
240. Instagram - Horizontal Accordion
Desktop, Pathfinding, Decision Making, Web, English, Instagram
251. Progressive Layout Loader
Desktop, Pathfinding, Awareness, Web, English, Tooltip, Loader, Animation, Google, Google Analytics
235. Background Animation (on Mouse Hover)
Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney
231. Floating Dialog Popover w/ Steps
Desktop, Awareness, Pathfinding, Web, EspaƱol, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress
236. Horizontal Graph with Time Ranges
Desktop, Pathfinding, Accessibility, Web, English, Google, Google Analytics
225. Cloudflare - Multiple Graphs by Time Ranges
Desktop, Pathfinding, Accessibility, Web, English, Cloudflare
228. Open in New Window (Doble Click)
Desktop, Accessibility, Pathfinding, Apple OS, EspaƱol, Doble Click Event, Browser Window, Drag & Drop Gesture, Apple, Apple Notes
227. Secondary Sidebar Toggle (Mouse)
Desktop, Tablet, Accessibility, Pathfinding, Apple OS, EspaƱol, Click Event, Transition, Side Panel, Toggle Field, Active State, Apple, Apple Notes
221. Stacked Action Button
Desktop, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Button, Back Link, Search Input, Twitter
217. Vertical Icon Menu (duplicated)
Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom
121. 2-pane Audio Navigation
Desktop, Pathfinding, Web, English
_18.38.50.png?table=block&id=c651e204-8edb-4bd8-96cb-760d7955b0bd&cache=v2)
148. Search Bar Fade-out
Desktop, Pathfinding, Web, English, YouTube, Google
175. Tab Preview on Hover State
Desktop, Pathfinding, Apple OS, Apple Safari
137. Product Color Selector
Desktop, Pathfinding, Web, EspaƱol, MercadoLibre
_09.27.02_p._m..png?table=block&id=83aa4527-ffe4-4c56-8e77-d6fe1f74f5b1&cache=v2)
114. News Swiper
Desktop, Pathfinding, Web, English
_11.40.00_a._m..png?table=block&id=bb415b1d-0b8c-4f5b-8da4-f30a16b94d36&cache=v2)
61. Section Dropdown
Desktop, Pathfinding, Web, English, Apple
158. Bar Reading Status
Desktop, Awareness, Pathfinding, Web, English, Progress State, Notification Badge, Navbar, Fixed on Scroll, McKinsey
_01.16.07_p._m..png?table=block&id=6a31ab9e-2c98-422b-8d05-d782b5d26680&cache=v2)
125. Product Highlights
Desktop, Pathfinding, Web, English
171. Slack - Multi-browser Sign In
Desktop, Onboarding, Pathfinding, Apple OS, Web, Email, English, Navbar, Text Input, Hypertext Links, Button, Numeric Input, Slack
14. App Bottom Popup
Desktop, Pathfinding, Apple OS, EspaƱol
_21.29.50.png?table=block&id=5a6c8023-5e5e-42d0-b8fc-da78c2f1f777&cache=v2)
63. GitHub - Contextual Back Navigation Bar
Desktop, Awareness, Pathfinding, Web, English, GitHub
116. 2-pane Automatic Slider
Desktop, Pathfinding, Awareness, Web, EspaƱol, Tiendanube
176. Wordpress.com - Natural Inputs with Suggestions
Desktop, Decision Making, Accessibility, Awareness, Pathfinding, Web, English, Wordpress
91. Bubble Status Reading
Desktop, Pathfinding, Awareness, Appreciation, Web, English, Infinite Scroll, Pagination, Animation, Fixed on Scroll, Progress State, Empty State, TechCrunch
173. Share Invitation to Live Movie
Desktop, Pathfinding, Onboarding, Awareness, Web, Apple OS, EspaƱol, Hypertext Links, Navbar, Live State, Empty State, Copy to Clipboard, Avatar, Thumbnail, Invitation Link, Disney
_10.36.09_p._m..png?table=block&id=39f65881-f4f2-4e2d-a9e8-e9538f13aa4d&cache=v2)
99. Letterboxd - Topbar Dropdown Menu
Desktop, Pathfinding, Web, English
3. Apple Safari - Search Options on Focus
Desktop, Pathfinding, Apple OS, English
_11.42.00_p._m..png?table=block&id=7c0c878c-451b-4bba-9c78-0c89099501b5&cache=v2)
2. Youtube - Feed Filter Tabs
Desktop, Pathfinding, Web, English
156. Figma - Keyboard Navigated Menu
Desktop, Pathfinding, Accessibility, Windows, Apple OS, Web, English, View, Original source on Twitter, Figma
_11.48.24_a._m..png?table=block&id=ef9b6a77-5ba3-4a1b-bb70-55540d8719de&cache=v2)
135. Stories From Network
Desktop, Mobile, Pathfinding, Web, Apple OS, English, Navbar, Fixed on Scroll, Banner, Avatar, Medium
_02.43.18_p._m..png?table=block&id=d94c7654-8937-4725-bd2c-c5fb02d83ae2&cache=v2)
112. Share on Social Networks
Desktop, Pathfinding, Web, English, Banner, Fixed on Scroll, Tags, Share on Social
1. Steps Guidance
Desktop, Pathfinding, Web, English
139. Transition: Zoom-Out on Hover
Desktop, Pathfinding, Web, English, Transition, Hover Event, Image / Illustration
_13.23.22.png?table=block&id=f678772e-c665-4ab7-a743-b7cc731b8b6a&cache=v2)
160. Pocket - Content Highlighting
Desktop, Accessibility, Pathfinding, Web, EspaƱol
_16.21.40.png?table=block&id=c1ac4cac-0b2d-4491-bcf8-45f141c0886e&cache=v2)
146. Intelligencer - Hamburger Menu
Desktop, Mobile, Pathfinding, Awareness, Web, English
155. Menu Search Highlighting
Desktop, Awareness, Pathfinding, Apple OS, macOS, EspaƱol, Dropdown Menu, Search Input, Click Event, User Selection, Text Input, Dim Overlay, Apple