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.
363. Better History - Back to Top on scroll
363. Better History - Back to Top on scroll
PaginationInfinite ScrollHypertext LinksFixed on Scroll
359. Discord - Button to Input Transition
359. Discord - Button to Input Transition
Text InputHypertext Links
353. Population Pyramid - Visualizations with live filters
353. Population Pyramid - Visualizations with live filters
GraphFiltersDropdown MenuTransition
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
341. Image Grid Customization Sliders
341. Image Grid Customization Sliders
AnimationDrag & Drop GestureRange Field
339. Asana - Platform Onboarding Simulator
339. Asana - Platform Onboarding Simulator
Text InputPaginationAnimationHypertext 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
332. Apple - Drag&Drop Browser File to Desktop
332. Apple - Drag&Drop Browser File to Desktop
Drag & Drop GestureImage / IllustrationFile OSModalClick Event
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
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. Instagram - Animated Illustration with Menu
312. Instagram - Animated Illustration with Menu
AnimationPaginationCarrousel
308. MercadoLibre - Hero Slider
308. MercadoLibre - Hero Slider
CarrouselDrag & Drop GestureTransitionPhoto
313. Modal Blackout with Scroll
313. Modal Blackout with Scroll
ModalScrollbarImage / IllustrationPhoto
302. Theme Switcher in Side-drawer
302. Theme Switcher in Side-drawer
Side PanelTransitionImage / IllustrationClick Event
_00.42.51/w=1920,quality=90,fit=scale-down)
284. Top Tooltip on Link Hover
284. Top Tooltip on Link Hover
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
253. Youtube - Table Row Selector
253. Youtube - Table Row Selector
User SelectionText InputFixed on ScrollThumbnail
231. Automatic Floating Popover with Steps
231. Automatic Floating Popover with Steps
Hypertext LinksPaginationSide Panel
_18.38.50/w=1920,quality=90,fit=scale-down)
175. Tab Preview on Hover State
175. Tab Preview on Hover State
_09.27.02_p._m..png&w=1920&q=75)
_11.40.00_a._m..png&w=1920&q=75)
_01.16.07_p._m..png&w=1920&q=75)
171. Slack - Multi-browser Sign In
171. Slack - Multi-browser Sign In
NavbarText InputHypertext LinksButtonNumeric Input
_01.38.38_a._m..png&w=1920&q=75)
_21.29.50/w=1920,quality=90,fit=scale-down)
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
_10.36.09_p._m..png&w=1920&q=75)
_11.42.00_p._m..png&w=1920&q=75)
_11.48.24_a._m..png&w=1920&q=75)
_02.43.18_p._m..png&w=1920&q=75)
_13.23.22/w=1920,quality=90,fit=scale-down)
_16.21.40/w=1920,quality=90,fit=scale-down)
