UX Patterns
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.
397. Modal with Card Options
397. Modal with Card Options
Modal
379. Dropdown Filters
379. Dropdown Filters
Filters
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationScrollHypertextFixed on Scroll
362. Slack - Side Menu Toggle
362. Slack - Side Menu Toggle
NavbarSide Panel
361. WhatsApp - Progress Bar Loading
361. WhatsApp - Progress Bar Loading
LoaderHypertext
360. Page Outline Menu
360. Page Outline Menu
PaginationScroll
359. Discord - Button to Input Transition
359. Discord - Button to Input Transition
Input FieldHypertext
356. MetaMap - Multi-Layout Topbar Menu
356. MetaMap - Multi-Layout Topbar Menu
NavbarDropdown Menu
353. Population Pyramid - Visualizations with live filters
353. Population Pyramid - Visualizations with live filters
GraphAnimation & VideoFiltersDropdown Menu
350. Netifly - Multi-layout Topbar Menu
350. Netifly - Multi-layout Topbar Menu
NavbarDropdown Menu
359. Toggle List/Grid View 
359. Toggle List/Grid View
TooltipHypertext
357. Modal with Steps (No blackout)
357. Modal with Steps (No blackout)
ModalAnimation & Video
344. MercadoLibre - Horizontal Item Slider
344. MercadoLibre - Horizontal Item Slider
CarrouselModalPaginationIllustration
342. Savee - Light/Dark Mode Switcher 
342. Savee - Light/Dark Mode Switcher
CheckboxTabs
341. Savee - Image Grid Customization
341. Savee - Image Grid Customization
Animation & VideoDrag & DropRange Field
340. Asana - Zoom/Magnifier Over Image
340. Asana - Zoom/Magnifier Over Image
Animation & Video
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Input FieldPaginationAnimation & VideoHypertext
346. Toggl - Sidebar Menu Show More
346. Toggl - Sidebar Menu Show More
AccordionNavbar
345. Vertical Accordion for FAQs
345. Vertical Accordion for FAQs
AccordionHypertext
336. Floating Popover on Click
336. Floating Popover on Click
TooltipInput FieldHypertext
343. Modal Drag & Drop to Fixed Position
343. Modal Drag & Drop to Fixed Position
Drag & DropModalSide Panel
331. Linkedin - Search Bar Blackout
331. Linkedin - Search Bar Blackout
332. Apple - Drag&Drop Browser File to Desktop
332. Apple - Drag&Drop Browser File to Desktop
322. Apple - Search on Menu Items
322. Apple - Search on Menu Items
328. Apple Safari - Zoom In/Out Transition
328. Apple Safari - Zoom In/Out Transition
333. Static Tooltip with Steps
333. Static Tooltip with Steps
324. Visual Studio Code - Dual View Scroll Sync
324. Visual Studio Code - Dual View Scroll Sync
320. Discord - Sign In with Loading Tips
320. Discord - Sign In with Loading Tips
318. Binance - Tooltip on Features
318. Binance - Tooltip on Features
312. Pocket - View Switcher
312. Pocket - View Switcher
312. Instagram - Animated Illustration with Menu
312. Instagram - Animated Illustration with Menu
309. Instagram - Brand Gradient
309. Instagram - Brand Gradient
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
313. Modal Blackout with Scroll
313. Modal Blackout with Scroll
308. Spinners for Module Loading
308. Spinners for Module Loading
307. Tooltip on Hover
307. Tooltip on Hover
305. Button Combo for App Download
305. Button Combo for App Download
302. Theme Switcher in Side-drawer
302. Theme Switcher in Side-drawer
300. Sound Bars Graph
300. Sound Bars Graph
295. “NEW” Badge on Menu Items_00.42.51/w=1920,quality=90,fit=scale-down)
295. “NEW” Badge on Menu Items
NavbarNotification BadgeHypertext
293. Collapsable Sidebar Menu
293. Collapsable Sidebar Menu
292. Vertical Icon Menu
292. Vertical Icon Menu
291. Action Menu from Button
291. Action Menu from Button
286. Apple - Background Animation on Scroll
286. Apple - Background Animation on Scroll
285. Cloudflare - Sidebar with Scroll
285. Cloudflare - Sidebar with Scroll
284. Emergency Information Map
284. Emergency Information Map
284. Top Tooltip on Link Hover
284. Top Tooltip on Link Hover
282. Telegram - Chat Setup Wizard
282. Telegram - Chat Setup Wizard
271. Slack - Collapsable Sidebars
271. Slack - Collapsable Sidebars
278. Search Menu Dropdown from Input Text
278. Search Menu Dropdown from Input Text
277. Horizontal Card Slider with Actions
277. Horizontal Card Slider with Actions
268. GIPHY - Alert on Drag & Drop
268. GIPHY - Alert on Drag & Drop
Drag & DropModalHypertextAnimation & VideoIllustration
274. Interactive Background Animation
274. Interactive Background Animation
Animation & VideoLoaderDrag & Drop
264. Figma - Interactive Background Animation
264. Figma - Interactive Background Animation
259. Squarespace - Multi-depth Sidebar Navigation
259. Squarespace - Multi-depth Sidebar Navigation
Side PanelHypertextAnimation & Video
258. Squarespace - Adaptable Viewport Size
258. Squarespace - Adaptable Viewport Size
Side PanelHypertextAnimation & Video
254. Notion - Side Menu Toggle
254. Notion - Side Menu Toggle
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
ScrollSelectionInput Field
240. Instagram - Horizontal Accordion
240. Instagram - Horizontal Accordion
251. Progressive Layout Loader
251. Progressive Layout Loader
TooltipLoaderAnimation & Video
235. Background Animation on Hover
235. Background Animation on Hover
Animation & VideoHypertext
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
HypertextPaginationSide Panel
236. Horizontal Graph with Time Ranges
236. Horizontal Graph with Time Ranges
225. Cloudflare - Multiple Graphs by Time Ranges
225. Cloudflare - Multiple Graphs by Time Ranges
220. Apple - Multi-window App
220. Apple - Multi-window App
219. Apple - Adjacent Sidebar Toggle
219. Apple - Adjacent Sidebar Toggle
215. Stacked Action Button
215. Stacked Action Button
Fixed on ScrollNavbarScroll
211. Intercom - Vertical Icon Menu
211. Intercom - Vertical Icon Menu
121. 2-pane Audio Navigation
121. 2-pane Audio Navigation
148. Search Bar Fade-out_18.38.50/w=1920,quality=90,fit=scale-down)
148. Search Bar Fade-out
175. Tab Preview on Hover State
175. Tab Preview on Hover State
137. Product Color Selector
137. Product Color Selector
114. News Swiper_09.27.02_p._m..png&w=1920&q=90)
114. News Swiper
61. Section Dropdown_11.40.00_a._m..png&w=1920&q=90)
61. Section Dropdown
158. Bar Reading Status
158. Bar Reading Status
Progress StateNotification BadgeNavbarFixed on Scroll
125. Product Highlights_01.16.07_p._m..png&w=1920&q=90)
125. Product Highlights
171. Slack - Multi-browser Sign In
171. Slack - Multi-browser Sign In
14. App Bottom Popup_01.38.38_a._m..png&w=1920&q=90)
14. App Bottom Popup
63. GitHub - Contextual Back Navigation Bar_21.29.50/w=1920,quality=90,fit=scale-down)
63. GitHub - Contextual Back Navigation Bar
116. 2-pane Automatic Slider
116. 2-pane Automatic Slider
176. Wordpress.com - Natural Inputs with Suggestions
176. Wordpress.com - Natural Inputs with Suggestions
91. Bubble Status Reading 
91. Bubble Status Reading
ScrollPaginationAnimation & VideoFixed on ScrollProgress StateEmpty State
173. Share Invitation to Live Movie
173. Share Invitation to Live Movie
HypertextNavbarLive StateEmpty StateCopy to ClipboardAvatarShare ThumbnailInvitation Link
99. Letterboxd - Topbar Dropdown Menu_10.36.09_p._m..png&w=1920&q=90)
99. Letterboxd - Topbar Dropdown Menu
3. Apple Safari - Search Options on Focus
3. Apple Safari - Search Options on Focus
2. Youtube - Feed Filter Tabs_11.42.00_p._m..png&w=1920&q=90)
2. Youtube - Feed Filter Tabs
156. Figma - Keyboard Navigated Menu
156. Figma - Keyboard Navigated Menu
135. Stories From Network_11.48.24_a._m..png&w=1920&q=90)
135. Stories From Network
112. Share on Social Networks_02.43.10_p._m..png&w=1920&q=90)
112. Share on Social Networks
1. Steps Guidance
1. Steps Guidance
139. Zoom Out Transition on Hover
139. Zoom Out Transition on Hover
160. Pocket - Content Highlighting_13.23.22/w=1920,quality=90,fit=scale-down)
160. Pocket - Content Highlighting
146. Intelligencer - Hamburger Menu_16.21.40/w=1920,quality=90,fit=scale-down)
146. Intelligencer - Hamburger Menu
155. Menu Search Highlighting
155. Menu Search Highlighting