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