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.
397. Modal with Card Options
397. Modal with Card Options
ModalThumbnailAnimation
379. Dropdown Filters
379. Dropdown Filters
Filters
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationInfinite ScrollHypertext LinksFixed on Scroll
362. Slack - Side Menu Toggle
362. Slack - Side Menu Toggle
NavbarSide PanelTransition
361. WhatsApp - Progress Bar Loading
361. WhatsApp - Progress Bar Loading
LoaderHypertext Links
360. Page Outline Menu
360. Page Outline Menu
PaginationAnchor Scroll
359. Discord - Button to Input Transition
359. Discord - Button to Input Transition
Text InputHypertext Links
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
GraphFiltersDropdown MenuTransition
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 Links
357. Modal with Steps (No blackout)
357. Modal with Steps (No blackout)
ModalAnimationImage / Illustration
344. MercadoLibre - Horizontal Item Slider
344. MercadoLibre - Horizontal Item Slider
CarrouselModalPaginationImage / Illustration
342. Savee - Light/Dark Mode Switcher 
342. Savee - Light/Dark Mode Switcher
CheckboxTabs
341. Image Grid Customization Sliders
341. Image Grid Customization Sliders
AnimationDrag & Drop GestureRange Field
340. Asana - Zoom/Magnifier Over Image
340. Asana - Zoom/Magnifier Over Image
Animation
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Text InputPaginationAnimationHypertext Links
346. Toggl - Sidebar Menu Show More
346. Toggl - Sidebar Menu Show More
AccordionNavbar
345. Vertical Accordion for FAQs
345. Vertical Accordion for FAQs
AccordionHypertext Links
336. Floating Popover on Click
336. Floating Popover on Click
TooltipText InputHypertext Links
343. Modal Drag & Drop to Fixed Position
343. Modal Drag & Drop to Fixed Position
Drag & Drop GestureModalSide 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
Drag & Drop GestureImage / IllustrationFile OSModalClick Event
322. Search on Menu Items
322. Search on Menu Items
NavbarDropdown MenuText Input
328. Apple Safari - Zoom In/Out Transition
328. Apple Safari - Zoom In/Out Transition
TransitionTabsThumbnailPinch Gesture
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
QRText InputPassword InputButton
318. Binance - Tooltip on Features
318. Binance - Tooltip on Features
312. Pocket - View Switcher
312. Pocket - View Switcher
NavbarThumbnailToggle FieldRadio Button
312. Instagram - Animated Illustration with Menu
312. Instagram - Animated Illustration with Menu
AnimationPaginationCarrousel
309. Instagram - Brand Gradient
309. Instagram - Brand Gradient
AnimationScrollbarPhoto
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
CarrouselDrag & Drop GestureTransitionPhoto
313. Modal Blackout with Scroll
313. Modal Blackout with Scroll
ModalScrollbarImage / IllustrationPhoto
308. Spinners for Module Loading
308. Spinners for Module Loading
Loader
307. Tooltip on Hover
307. Tooltip on Hover
ThumbnailTooltipSide Panel
305. Button Combo for App Download
305. Button Combo for App Download
Button
302. Theme Switcher in Side-drawer
302. Theme Switcher in Side-drawer
Side PanelTransitionImage / IllustrationClick Event
300. Sound Bars Graph
300. Sound Bars Graph
Sound BarTransitionClick EventDropdown Menu
295. “NEW” Badge on Menu Items_00.42.51/w=1920,quality=90,fit=scale-down)
295. “NEW” Badge on Menu Items
NavbarNotification BadgeHypertext Links
293. Collapsable Sidebar Menu
293. Collapsable Sidebar Menu
Side PanelTransitionClick EventNavbar
292. Vertical Icon Menu
292. Vertical Icon Menu
TooltipSide PanelNavbar
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 & Drop GestureModalHypertext LinksAnimationImage / Illustration
274. Interactive Background Animation
274. Interactive Background Animation
AnimationLoaderDrag & Drop Gesture
264. Figma - Interactive Background Animation
264. Figma - Interactive Background Animation
259. Squarespace - Multi-depth Sidebar Navigation
259. Squarespace - Multi-depth Sidebar Navigation
Side PanelHypertext LinksAnimation
258. Squarespace - Adaptable Viewport Size
258. Squarespace - Adaptable Viewport Size
Side PanelHypertext LinksAnimation
254. Notion - Side Menu Toggle
254. Notion - Side Menu Toggle
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
User SelectionText InputFixed on ScrollThumbnail
240. Instagram - Horizontal Accordion
240. Instagram - Horizontal Accordion
251. Progressive Layout Loader
251. Progressive Layout Loader
TooltipLoaderAnimation
235. Background Animation on Hover
235. Background Animation on Hover
AnimationHypertext Links
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
Hypertext LinksPaginationSide 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 ScrollNavbarInfinite Scroll
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=75)
114. News Swiper
61. Section Dropdown_11.40.00_a._m..png&w=1920&q=75)
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=75)
125. Product Highlights
171. Slack - Multi-browser Sign In
171. Slack - Multi-browser Sign In
NavbarText InputHypertext LinksButtonNumeric Input
14. App Bottom Popup_01.38.38_a._m..png&w=1920&q=75)
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
Infinite ScrollPaginationAnimationFixed on ScrollProgress StateEmpty State
173. Share Invitation to Live Movie
173. Share Invitation to Live Movie
Hypertext LinksNavbarLive StateEmpty StateCopy to ClipboardAvatarThumbnailInvitation Link
99. Letterboxd - Topbar Dropdown Menu_10.36.09_p._m..png&w=1920&q=75)
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=75)
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=75)
135. Stories From Network
NavbarFixed on ScrollBannerAvatar
112. Share on Social Networks_02.43.18_p._m..png&w=1920&q=75)
112. Share on Social Networks
BannerFixed on ScrollTagsShare on Social
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