Home
PATTTTERNS - An open catalog of design patterns | Product Hunt

Made with šŸ’™ by Pablo Armenv2.1.10

Home
/Flows
/Search & Navigation
Description
Navigation, menus and other way to find information.

Patterns for Search & Navigation

Because we are all looking for something, this patterns help people find and accomplish their tasks. Usually seen as navigation hierarchy, collapsable menus and other visual clues.
Ā 
Recommendation (Ad)
https://uink.digital
Ā 
  • Desktop (96)
  • Tablet (3)
  • Mobile (32)
400. 3D Button Shadow

400. 3D Button Shadow

Desktop, Awareness, Pathfinding, Button, Animation, Transition

Open pattern
397. Modal with Card Options

397. Modal with Card Options

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, EspaƱol, Modal, Thumbnail, Animation

Open pattern
379. Dropdown Filters

379. Dropdown Filters

Desktop, Pathfinding, Accessibility, Web, EspaƱol, Filters

Open pattern
363. Better History - Back to Top on scroll

363. Better History - Back to Top on scroll

Desktop, Pathfinding, Awareness, Web, English, Pagination, Infinite Scroll, Hypertext Links, Fixed on Scroll

Open pattern
362. Slack - Side Menu Toggle

362. Slack - Side Menu Toggle

Desktop, Pathfinding, Web, EspaƱol, Navbar, Side Panel, Transition

Open pattern
361. WhatsApp - Progress Bar Loading

361. WhatsApp - Progress Bar Loading

Desktop, Awareness, Pathfinding, Onboarding, Web, EspaƱol, Loader, Hypertext Links

Open pattern
360. Page Outline Menu

360. Page Outline Menu

Desktop, Pathfinding, Awareness, Accessibility, Onboarding, Web, English, Pagination, Anchor Scroll

Open pattern
359. Discord - Button to Input Transition

359. Discord - Button to Input Transition

Desktop, Decision Making, Pathfinding, Consent, Web, EspaƱol, Text Input, Hypertext Links

Open pattern
356. MetaMap - Multi-Layout Topbar Menu

356. MetaMap - Multi-Layout Topbar Menu

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Navbar, Dropdown Menu

Open pattern
353. Population Pyramid - Visualizations with live filters

353. Population Pyramid - Visualizations with live filters

Desktop, Pathfinding, Awareness, Decision Making, Web, EspaƱol, Graph, Filters, Dropdown Menu, Transition

Open pattern
350. Netifly - Multi-layout Topbar Menu

350. Netifly - Multi-layout Topbar Menu

Desktop, Pathfinding, Web, English, Navbar, Dropdown Menu

Open pattern
359. Toggle List/Grid View

359. Toggle List/Grid View

Desktop, Accessibility, Onboarding, Pathfinding, Web, EspaƱol, Tooltip, Hypertext Links

Open pattern
357. Modal with Steps (No blackout)

357. Modal with Steps (No blackout)

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

Open pattern
344. MercadoLibre - Horizontal Item Slider

344. MercadoLibre - Horizontal Item Slider

Desktop, Awareness, Pathfinding, Web, EspaƱol, Carrousel, Modal, Pagination, Image / Illustration

Open pattern
342. Savee - Light/Dark Mode Switcher

342. Savee - Light/Dark Mode Switcher

Desktop, Accessibility, Pathfinding, Web, English, Checkbox, Tabs

Open pattern
341. Image Grid Customization Sliders

341. Image Grid Customization Sliders

Desktop, Accessibility, Pathfinding, Web, English, Animation, Drag & Drop Gesture, Range Field

Open pattern
340. Asana - Zoom/Magnifier Over Image

340. Asana - Zoom/Magnifier Over Image

Desktop, Accessibility, Pathfinding, Web, English, Animation

Open pattern
339. Asana - Platform Onboarding Simulator

339. Asana - Platform Onboarding Simulator

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Text Input, Pagination, Animation, Hypertext Links

Open pattern
346. Toggl - Sidebar Menu Show More

346. Toggl - Sidebar Menu Show More

Desktop, Pathfinding, Accessibility, Awareness, Web, English, Accordion, Navbar

Open pattern
345. Vertical Accordion for FAQs

345. Vertical Accordion for FAQs

Desktop, Pathfinding, Accessibility, Awareness, Web, EspaƱol, Accordion, Hypertext Links

Open pattern
No preview

336. Floating Popover on Click

Desktop, Pathfinding, Awareness, Apple OS, English, Tooltip, Text Input, Hypertext Links

Open pattern
343. Modal Drag & Drop to Fixed Position

343. Modal Drag & Drop to Fixed Position

Desktop, Accessibility, Pathfinding, Awareness, Web, EspaƱol, Drag & Drop Gesture, Modal, Side Panel

Open pattern
331. Linkedin - Search Bar Blackout

331. Linkedin - Search Bar Blackout

Desktop, Pathfinding, Awareness, Web, EspaƱol

Open pattern
332. Apple - Drag&Drop Browser File to Desktop

332. Apple - Drag&Drop Browser File to Desktop

Desktop, Pathfinding, Accessibility, Awareness, Web, Drag & Drop Gesture, Image / Illustration, File OS, Modal, Click Event

Open pattern
322. Search on Menu Items

322. Search on Menu Items

Desktop, Pathfinding, Awareness, Apple OS, EspaƱol, Navbar, Dropdown Menu, Text Input

Open pattern
328. Apple Safari - Zoom In/Out Transition

328. Apple Safari - Zoom In/Out Transition

Desktop, Pathfinding, Apple OS, EspaƱol, Transition, Tabs, Thumbnail, Pinch Gesture

Open pattern
No preview

333. Static Tooltip with Steps

Desktop, Onboarding, Pathfinding, Awareness, Apple OS, English

Open pattern
324. Visual Studio Code - Dual View Scroll Sync

324. Visual Studio Code - Dual View Scroll Sync

Desktop, Decision Making, Pathfinding, Apple OS, English

Open pattern
320. Discord - Sign In with Loading Tips

320. Discord - Sign In with Loading Tips

Desktop, Pathfinding, Onboarding, Apple OS, English, QR, Text Input, Password Input, Button

Open pattern
No preview

318. Binance - Tooltip on Features

Desktop, Decision Making, Onboarding, Pathfinding, Web, English

Open pattern
312. Pocket - View Switcher

312. Pocket - View Switcher

Desktop, Pathfinding, Accessibility, Web, EspaƱol, Navbar, Thumbnail, Toggle Field, Radio Button

Open pattern
318. Instagram - Animated Illustration with Menu

318. Instagram - Animated Illustration with Menu

Desktop, Pathfinding, Awareness, Web, English, Animation, Pagination, Carrousel

Open pattern
309. Instagram - Brand Gradient

309. Instagram - Brand Gradient

Desktop, Landing Page, Pathfinding, https://about.instagram.com/brand/gradient, Web, English, Animation, Scrollbar, Photo

Open pattern
308. MercadoLibre - Hero Slider

308. MercadoLibre - Hero Slider

Desktop, Pathfinding, Awareness, Web, EspaƱol, Carrousel, Drag & Drop Gesture, Transition, Photo

Open pattern
313. Modal Blackout with Scroll

313. Modal Blackout with Scroll

Desktop, Pathfinding, Web, EspaƱol, Modal, Scrollbar, Image / Illustration, Photo, MercadoLibre

Open pattern
308. Spinners for Module Loading

308. Spinners for Module Loading

Desktop, Awareness, Pathfinding, Web, English, Loader, Twitter

Open pattern
307. Tooltip on Hover

307. Tooltip on Hover

Desktop, Awareness, Pathfinding, Apple OS, Web, English, Thumbnail, Tooltip, Side Panel, Google, Google Chrome

Open pattern
305. Button Combo for App Download

305. Button Combo for App Download

Desktop, Pathfinding, Decision Making, Awareness, Web, EspaƱol, Button, Microsoft, Microsoft Teams

Open pattern
302. Theme Switcher in Side-drawer

302. Theme Switcher in Side-drawer

Desktop, Accessibility, Pathfinding, Web, EspaƱol, Side Panel, Transition, Image / Illustration, Click Event, Google

Open pattern
300. Sound Bars Graph

300. Sound Bars Graph

Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Sound Bar, Transition, Click Event, Dropdown Menu, WhatsApp

Open pattern
295. ā€œNEWā€ Badge on Menu Items

295. ā€œNEWā€ Badge on Menu Items

Desktop, Mobile, Awareness, Decision Making, Pathfinding, Web, English, Navbar, Notification Badge, Hypertext Links, Notion

Open pattern
293. Collapsable Sidebar Menu

293. Collapsable Sidebar Menu

Desktop, Awareness, Pathfinding, Accessibility, Web, English, EspaƱol, Side Panel, Transition, Click Event, Navbar, Google, Gmail

Open pattern
292. Vertical Icon Menu

292. Vertical Icon Menu

Desktop, Awareness, Pathfinding, Web, English, Tooltip, Side Panel, Navbar, Mailchimp

Open pattern
291. Action Menu from Button

291. Action Menu from Button

Desktop, Decision Making, Awareness, Pathfinding, Web, English, Google, Google Meet

Open pattern
286. Apple - Background Animation on Scroll

286. Apple - Background Animation on Scroll

Desktop, Awareness, Pathfinding, Web, EspaƱol, Apple

Open pattern
285. Cloudflare - Sidebar with Scroll

285. Cloudflare - Sidebar with Scroll

Desktop, Pathfinding, Awareness, Web, English, Cloudflare

Open pattern
284. Emergency Information Map

284. Emergency Information Map

Desktop, Pathfinding, Awareness, Landing Page, Web, EspaƱol, Google

Open pattern
No preview

284. Top Tooltip on Link Hover

Desktop, Awareness, Pathfinding, Web, English, Crunchbase

Open pattern
282. Telegram - Chat Setup Wizard

282. Telegram - Chat Setup Wizard

Desktop, Onboarding, Accessibility, Pathfinding, Apple OS, English, Telegram

Open pattern
271. Slack - Collapsable Sidebars

271. Slack - Collapsable Sidebars

Desktop, Pathfinding, Accessibility, Apple OS, EspaƱol, Slack

Open pattern
278. Search Menu Dropdown from Input Text

278. Search Menu Dropdown from Input Text

Desktop, Pathfinding, Accessibility, Web, English, Google, Google Analytics

Open pattern
277. Horizontal Card Slider with Actions

277. Horizontal Card Slider with Actions

Desktop, Pathfinding, Accessibility, Web, EspaƱol, Linkedin

Open pattern
268. GIPHY - Alert on Drag & Drop

268. GIPHY - Alert on Drag & Drop

Desktop, Awareness, Pathfinding, Web, Apple OS, English, Drag & Drop Gesture, Modal, Hypertext Links, Animation, Image / Illustration, GIPHY

Open pattern
274. Interactive Background Animation

274. Interactive Background Animation

Desktop, Pathfinding, Awareness, Web, English, Animation, Loader, Drag & Drop Gesture, GitHub

Open pattern
265. Youtube - Hidden Options Menu (Dots)

265. Youtube - Hidden Options Menu (Dots)

Desktop, Pathfinding, Accessibility, Web, English, YouTube, Google

Open pattern
No preview

264. Figma - Interactive Background Animation

Desktop, Pathfinding, Apple OS, English, Figma

Open pattern
259. Squarespace - Multi-depth Sidebar Navigation

259. Squarespace - Multi-depth Sidebar Navigation

Desktop, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
258. Squarespace - Adaptable Viewport Size

258. Squarespace - Adaptable Viewport Size

Desktop, Accessibility, Pathfinding, Web, English, Side Panel, Hypertext Links, Animation, Squarespace

Open pattern
254. Notion - Side Menu Toggle

254. Notion - Side Menu Toggle

Desktop, Pathfinding, Accessibility, Web, English, EspaƱol, Notion

Open pattern
253. Youtube - Table Row Selector

253. Youtube - Table Row Selector

Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

Open pattern
240. Instagram - Horizontal Accordion

240. Instagram - Horizontal Accordion

Desktop, Pathfinding, Decision Making, Web, English, Instagram

Open pattern
251. Progressive Layout Loader

251. Progressive Layout Loader

Desktop, Pathfinding, Awareness, Web, English, Tooltip, Loader, Animation, Google, Google Analytics

Open pattern
235. Background Animation on Hover

235. Background Animation on Hover

Desktop, Decision Making, Awareness, Pathfinding, Web, EspaƱol, Animation, Hypertext Links, Disney

Open pattern
231. Automatic Floating Popover with Steps

231. Automatic Floating Popover with Steps

Desktop, Awareness, Pathfinding, Web, EspaƱol, Hypertext Links, Pagination, Side Panel, Wordpress

Open pattern
236. Horizontal Graph with Time Ranges

236. Horizontal Graph with Time Ranges

Desktop, Pathfinding, Accessibility, Web, English, Google, Google Analytics

Open pattern
225. Cloudflare - Multiple Graphs by Time Ranges

225. Cloudflare - Multiple Graphs by Time Ranges

Desktop, Pathfinding, Accessibility, Web, English, Cloudflare

Open pattern
220. Apple - Multi-window App

220. Apple - Multi-window App

Desktop, Accessibility, Pathfinding, Apple OS, EspaƱol, Apple, Apple Notes

Open pattern
219. Apple - Adjacent Sidebar Toggle

219. Apple - Adjacent Sidebar Toggle

Desktop, Tablet, Accessibility, Pathfinding, Apple OS, EspaƱol, Apple, Apple Notes

Open pattern
215. Stacked Action Button

215. Stacked Action Button

Desktop, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Twitter

Open pattern
211. Intercom - Vertical Icon Menu

211. Intercom - Vertical Icon Menu

Desktop, Pathfinding, Web, English, Intercom

Open pattern
121. 2-pane Audio Navigation

121. 2-pane Audio Navigation

Desktop, Pathfinding, Web, English

Open pattern
148. Search Bar Fade-out

148. Search Bar Fade-out

Desktop, Pathfinding, Web, English, YouTube, Google

Open pattern
No preview

175. Tab Preview on Hover State

Desktop, Pathfinding, Apple OS, Apple Safari

Open pattern
137. Product Color Selector

137. Product Color Selector

Desktop, Pathfinding, Web, EspaƱol, MercadoLibre

Open pattern
114. News Swiper

114. News Swiper

Desktop, Pathfinding, Web, English

Open pattern
61. Section Dropdown

61. Section Dropdown

Desktop, Pathfinding, Web, English, Apple

Open pattern
158. Bar Reading Status

158. Bar Reading Status

Desktop, Awareness, Pathfinding, Web, English, Progress State, Notification Badge, Navbar, Fixed on Scroll, McKinsey

Open pattern
125. Product Highlights

125. Product Highlights

Desktop, Pathfinding, Web, English

Open pattern
171. Slack - Multi-browser Sign In

171. Slack - Multi-browser Sign In

Desktop, Onboarding, Pathfinding, Apple OS, Web, Email, English, Navbar, Text Input, Hypertext Links, Button, Numeric Input, Slack

Open pattern
14. App Bottom Popup

14. App Bottom Popup

Desktop, Pathfinding, Apple OS, EspaƱol

Open pattern
63. GitHub - Contextual Back Navigation Bar

63. GitHub - Contextual Back Navigation Bar

Desktop, Awareness, Pathfinding, Web, English, GitHub

Open pattern
116. 2-pane Automatic Slider

116. 2-pane Automatic Slider

Desktop, Pathfinding, Awareness, Web, EspaƱol, Tiendanube

Open pattern
176. Wordpress.com - Natural Inputs with Suggestions

176. Wordpress.com - Natural Inputs with Suggestions

Desktop, Decision Making, Accessibility, Awareness, Pathfinding, Web, English, Wordpress

Open pattern
91. Bubble Status Reading

91. Bubble Status Reading

Desktop, Pathfinding, Awareness, Appreciation, Web, English, Infinite Scroll, Pagination, Animation, Fixed on Scroll, Progress State, Empty State, TechCrunch

Open pattern
173. Share Invitation to Live Movie

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

Open pattern
99. Letterboxd - Topbar Dropdown Menu

99. Letterboxd - Topbar Dropdown Menu

Desktop, Pathfinding, Web, English

Open pattern
3. Apple Safari - Search Options on Focus

3. Apple Safari - Search Options on Focus

Desktop, Pathfinding, Apple OS, English

Open pattern
2. Youtube - Feed Filter Tabs

2. Youtube - Feed Filter Tabs

Desktop, Pathfinding, Web, English

Open pattern
156. Figma - Keyboard Navigated Menu

156. Figma - Keyboard Navigated Menu

Desktop, Pathfinding, Accessibility, Windows, Apple OS, Web, English, View, Original source on Twitter, Figma

Open pattern
135. Stories From Network

135. Stories From Network

Desktop, Mobile, Pathfinding, Web, Apple OS, English, Navbar, Fixed on Scroll, Banner, Avatar, Medium

Open pattern
112. Share on Social Networks

112. Share on Social Networks

Desktop, Pathfinding, Web, English, Banner, Fixed on Scroll, Tags, Share on Social

Open pattern
1. Steps Guidance

1. Steps Guidance

Desktop, Pathfinding, Web, English

Open pattern
139. Zoom Out Transition on Hover

139. Zoom Out Transition on Hover

Desktop, Pathfinding, Web, English

Open pattern
160. Pocket - Content Highlighting

160. Pocket - Content Highlighting

Desktop, Accessibility, Pathfinding, Web, EspaƱol

Open pattern
146. Intelligencer - Hamburger Menu

146. Intelligencer - Hamburger Menu

Desktop, Mobile, Pathfinding, Awareness, Web, English

Open pattern
155. Menu Search Highlighting

155. Menu Search Highlighting

Desktop, Awareness, Pathfinding, Apple OS, EspaƱol, Apple

Open pattern
Ā