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
