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.
- Desktop (96)
- Tablet (3)
- Mobile (32)

400. 3D Button Shadow
View Pattern

397. Modal with Card Options
View Pattern

379. Dropdown Filters
View Pattern

363. Better History - Back to Top on scroll
View Pattern

362. Slack - Side Menu Toggle
View Pattern

361. WhatsApp - Progress Bar Loading
View Pattern

360. Page Outline Menu
View Pattern

359. Discord - Button to Input Transition
View Pattern

356. MetaMap - Multi-Layout Topbar Menu
View Pattern

353. Population Pyramid - Visualizations with live filters
View Pattern

350. Netifly - Multi-layout Topbar Menu
View Pattern

359. Toggle List/Grid View
View Pattern

357. Modal with Steps (No blackout)
View Pattern

344. MercadoLibre - Horizontal Item Slider
View Pattern

342. Savee - Light/Dark Mode Switcher
View Pattern

341. Image Grid Customization Sliders
View Pattern

340. Asana - Zoom/Magnifier Over Image
View Pattern

339. Asana - Platform Onboarding Simulator
View Pattern

346. Toggl - Sidebar Menu Show More
View Pattern

345. Vertical Accordion for FAQs
View Pattern
No preview
336. Floating Popover on Click
View Pattern

343. Modal Drag & Drop to Fixed Position
View Pattern

331. Linkedin - Search Bar Blackout
View Pattern

332. Apple - Drag&Drop Browser File to Desktop
View Pattern

322. Search on Menu Items
View Pattern

328. Apple Safari - Zoom In/Out Transition
View Pattern
No preview
333. Static Tooltip with Steps
View Pattern

324. Visual Studio Code - Dual View Scroll Sync
View Pattern

320. Discord - Sign In with Loading Tips
View Pattern
No preview
318. Binance - Tooltip on Features
View Pattern

312. Pocket - View Switcher
View Pattern

312. Instagram - Animated Illustration with Menu
View Pattern

309. Instagram - Brand Gradient
View Pattern

308. MercadoLibre - Hero Slider
View Pattern

313. Modal Blackout with Scroll
View Pattern

308. Spinners for Module Loading
View Pattern

307. Tooltip on Hover
View Pattern

305. Button Combo for App Download
View Pattern

302. Theme Switcher in Side-drawer
View Pattern

300. Sound Bars Graph
View Pattern
_00.42.51.png%3Ftable%3Dblock%26id%3Da96139bf-3091-48ff-b6e3-fd80ed41d434%26cache%3Dv2&w=3840&q=75)
295. “NEW” Badge on Menu Items
View Pattern

293. Collapsable Sidebar Menu
View Pattern

292. Vertical Icon Menu
View Pattern

291. Action Menu from Button
View Pattern

286. Apple - Background Animation on Scroll
View Pattern

285. Cloudflare - Sidebar with Scroll
View Pattern

284. Emergency Information Map
View Pattern
No preview
284. Top Tooltip on Link Hover
View Pattern

282. Telegram - Chat Setup Wizard
View Pattern

271. Slack - Collapsable Sidebars
View Pattern

278. Search Menu Dropdown from Input Text
View Pattern

277. Horizontal Card Slider with Actions
View Pattern

268. GIPHY - Alert on Drag & Drop
View Pattern

274. Interactive Background Animation
View Pattern

265. Youtube - Hidden Options Menu (Dots)
View Pattern
No preview
264. Figma - Interactive Background Animation
View Pattern

259. Squarespace - Multi-depth Sidebar Navigation
View Pattern

258. Squarespace - Adaptable Viewport Size
View Pattern

254. Notion - Side Menu Toggle
View Pattern

253. Youtube - Table Row Selector
View Pattern

240. Instagram - Horizontal Accordion
View Pattern

251. Progressive Layout Loader
View Pattern

235. Background Animation on Hover
View Pattern

231. Automatic Floating Popover with Steps
View Pattern

236. Horizontal Graph with Time Ranges
View Pattern

225. Cloudflare - Multiple Graphs by Time Ranges
View Pattern

220. Apple - Multi-window App
View Pattern

219. Apple - Adjacent Sidebar Toggle
View Pattern

215. Stacked Action Button
View Pattern

211. Intercom - Vertical Icon Menu
View Pattern

121. 2-pane Audio Navigation
View Pattern
_18.38.50.png%3Ftable%3Dblock%26id%3D757af67b-5429-46e8-895f-e612fe267807%26cache%3Dv2&w=3840&q=75)
148. Search Bar Fade-out
View Pattern
No preview
175. Tab Preview on Hover State
View Pattern

137. Product Color Selector
View Pattern
_09.27.02_p._m..png%3Ftable%3Dblock%26id%3D25efe48a-1e71-44d6-a66a-33664b891904%26cache%3Dv2&w=3840&q=75)
114. News Swiper
View Pattern
_11.40.00_a._m..png%3Ftable%3Dblock%26id%3Df9c2faa0-aa6d-4436-83f1-7d90c9fa4545%26cache%3Dv2&w=3840&q=75)
61. Section Dropdown
View Pattern

158. Bar Reading Status
View Pattern
_01.16.07_p._m..png%3Ftable%3Dblock%26id%3Dbf126c12-84db-4cf0-b72c-2db6549ac576%26cache%3Dv2&w=3840&q=75)
125. Product Highlights
View Pattern

171. Slack - Multi-browser Sign In
View Pattern
No preview
14. App Bottom Popup
View Pattern
_21.29.50.png%3Ftable%3Dblock%26id%3D407daf49-f060-4da0-b2bc-ec160fd074cb%26cache%3Dv2&w=3840&q=75)
63. GitHub - Contextual Back Navigation Bar
View Pattern

116. 2-pane Automatic Slider
View Pattern

176. Wordpress.com - Natural Inputs with Suggestions
View Pattern

91. Bubble Status Reading
View Pattern

173. Share Invitation to Live Movie
View Pattern
_10.36.09_p._m..png%3Ftable%3Dblock%26id%3D6a49d67c-d547-40af-a90f-005cf76d9334%26cache%3Dv2&w=3840&q=75)
99. Letterboxd - Topbar Dropdown Menu
View Pattern

3. Apple Safari - Search Options on Focus
View Pattern
_11.42.00_p._m..png%3Ftable%3Dblock%26id%3D01d976de-5d99-4a22-aa4f-b1d1d43f19b6%26cache%3Dv2&w=3840&q=75)
2. Youtube - Feed Filter Tabs
View Pattern

156. Figma - Keyboard Navigated Menu
View Pattern
_11.48.24_a._m..png%3Ftable%3Dblock%26id%3D23ac2a8b-bab0-4917-88cd-7f3055b2d0cd%26cache%3Dv2&w=3840&q=75)
135. Stories From Network
View Pattern
_02.43.18_p._m..png%3Ftable%3Dblock%26id%3Dfe7cd274-0a66-4772-9374-21d369a20811%26cache%3Dv2&w=3840&q=75)
112. Share on Social Networks
View Pattern

1. Steps Guidance
View Pattern

139. Zoom Out Transition on Hover
View Pattern
_13.23.22.png%3Ftable%3Dblock%26id%3Db73355d3-b4ad-4c78-988b-ad6163c43d13%26cache%3Dv2&w=3840&q=75)
160. Pocket - Content Highlighting
View Pattern
_16.21.40.png%3Ftable%3Dblock%26id%3D6290a623-0aac-4676-b31a-e80ed6298406%26cache%3Dv2&w=3840&q=75)
146. Intelligencer - Hamburger Menu
View Pattern

155. Menu Search Highlighting
View Pattern

