This collapsible sidebar menu allows users to expand or hide navigation options, optimizing screen real estate while maintaining easy access to key sections.

This vertical icon menu provides quick access to key sections, revealing descriptive tooltips on hover to aid navigation and improve user pathfinding.

Users can click a button to reveal a contextual menu of related actions, streamlining decision-making and guiding them to their desired outcome.

This pattern uses a fixed background image that animates and shifts as the user scrolls, creating a dynamic and engaging visual experience.

This pattern provides a persistent, scrollable sidebar for navigation, ensuring users can always access key sections and maintain context within complex applications.

This pattern provides users with critical, localized emergency information and actionable advice through an interactive map, enhancing awareness and guiding safe behavior.

Displays a tooltip above a link when the user hovers over it, providing additional context or information without navigating away from the current page.

This wizard guides users through initial setup choices like appearance and chat mode, ensuring a personalized experience from the start.

Users can collapse and expand layout sidebars to optimize screen space, enhancing focus on primary content while maintaining quick access to navigation.

This pattern allows users to quickly find and select desired options from a dynamic, filtered list that appears as they type into an input field.

This pattern allows users to efficiently browse a curated collection of content cards, with clear navigation and editing options for personalized interaction.

Users can effortlessly upload files by dragging them from their desktop directly into a designated drop zone within the application.

This pattern uses an interactive background animation to engage users and provide visual feedback as they navigate or interact with elements on the page.

A common UI pattern where additional options or actions related to a specific item are initially hidden to conserve space. These options are revealed upon user interaction, typically by clicking or tapping a 'dots' (ellipsis) icon, presenting a contextual menu or dropdown.

Desktop, Pathfinding, Apple OS, English, Animation, Click Event, Image / Illustration, Vectors, Figma

This multi-depth sidebar navigation allows users to quickly traverse complex information hierarchies, improving discoverability and reducing cognitive load.

Users can dynamically adjust the content preview area, allowing them to visualize their website across various screen sizes for optimal responsiveness and design fidelity.

Users can toggle the sidebar menu to hide or reveal navigation, optimizing screen space for content focus or quick pathfinding.

Users can efficiently select multiple table rows by clicking checkboxes, enabling bulk actions and streamlining content management workflows.

This horizontal accordion allows users to explore distinct content categories by expanding a selected panel, revealing detailed information and relevant calls to action.

This pattern provides immediate visual feedback during page loads, progressively revealing content to reassure users that the system is actively processing their request.

This pattern uses a subtle background animation on hover to provide visual feedback, guiding users to interactive elements and enhancing discoverability.

This pattern guides users through a multi-step onboarding or feature tour with a dismissible, paginated floating dialog, enhancing discoverability and adoption.

Users can easily compare data trends over customizable time ranges within a horizontal graph, enabling quick insights into performance changes.

This pattern allows users to quickly switch between predefined time ranges to view multiple related data graphs, enabling efficient analysis of performance trends.

Users can double-click an item to open its content in a new, independent window, enabling parallel viewing and enhanced multitasking.

This pattern keeps primary actions readily accessible by stacking them vertically, ensuring users can quickly initiate key tasks without scrolling.

Desktop, Pathfinding, Web, English, Side Panel, Transition, Image / Illustration, Tooltip, Hover Event, Intercom

This pattern allows users to browse a list of audio episodes while simultaneously playing and controlling a selected episode.

Displays a preview of a tab's content when the user hovers over the tab, enabling quick content assessment without requiring a full click or navigation.

This pattern allows users to quickly search their content with a prominent search bar that reveals recent searches and relevant suggestions upon interaction.

This pattern allows users to effortlessly browse a carousel of news or definition cards, providing quick access to multiple content pieces with clear navigation.

Users can effortlessly browse and select product variations by color, with immediate visual feedback and clear stock availability, streamlining their purchasing decision.

Users can browse a curated selection of offers by clicking pagination arrows, enabling efficient discovery and decision-making.

This pattern uses an animated, interactive background to engage users and visually highlight featured content, enhancing initial appreciation and pathfinding.

Users can quickly assess system health over time via color-coded hourly indicators, revealing operational status and outage events at a glance.

Offers always-available, AI-powered guidance and support through a fixed bottom-right chat

This pattern provides a full-height, animated sidebar menu that slides in from the left, offering clear navigation options while dimming the main content for focused interaction.

This pattern uses a subtle 3D shadow animation on hover to provide clear visual feedback, enhancing user awareness and guiding interaction.

This modal presents users with clear, card-based options to initiate a task, guiding them efficiently through initial decision-making.

Dropdown filters enable users to quickly refine content views by selecting specific criteria from a compact, accessible menu.

This pattern allows users to quickly navigate to the top of a long list by clicking a fixed "Back to Top" button that appears on scroll.

Users can toggle a persistent sidebar menu to reveal or hide navigation options, optimizing screen space while maintaining easy access to key features.

This progress bar visually informs users about the loading status of their chats, providing a clear percentage to manage expectations during data synchronization.

This menu provides an interactive outline of page content, allowing users to quickly navigate to specific sections and understand the page structure at a glance.

This pattern allows users to seamlessly transition from a clear call-to-action button to an input field, streamlining the path to engagement.

This topbar menu uses a dropdown to reveal categorized links, enabling users to quickly navigate to relevant sections and understand the product's diverse offerings.

Users can dynamically filter population data by country and year, enabling quick comparisons and insights into demographic trends.

This topbar menu dynamically adjusts its layout and content, offering users clear navigation and relevant options as they explore different sections of the site.

Users can switch between list and grid views to optimize content display for their preference, enhancing readability and navigation.

This modal guides users through multi-step processes with clear instructions and animated transitions, enhancing awareness without obscuring the underlying content.

This horizontal item slider allows users to effortlessly browse a curated selection of items, enhancing discoverability and engagement with minimal scrolling.

Users can instantly toggle between light and dark display modes, enhancing visual comfort and accessibility based on their preference or environment.

This pattern enhances clarity by dynamically magnifying specific image regions, guiding users to key details and improving comprehension of visual instructions.

Users can dynamically adjust the number of columns and spacing in an image grid using intuitive sliders, enhancing visual organization and content exploration.

This pattern guides users through initial setup by simulating product features, allowing them to visualize outcomes and make informed decisions before committing.

This sidebar menu allows users to expand and collapse sections, efficiently managing screen space while providing access to numerous navigation options.

This vertical accordion allows users to efficiently reveal or hide detailed content sections, optimizing screen space and improving navigation for FAQs or contact information.

A UI pattern where a floating popover element appears adjacent to a trigger element upon a click interaction, providing additional context or actions without navigating away.

Users can drag a modal dialog to a fixed side panel, allowing them to view and interact with underlying content without losing context.

Users can effortlessly create a new file on their desktop by dragging and dropping an image directly from a web browser.

This pattern darkens the background and highlights the search bar, guiding users to focus on search input and results without distraction.

This pattern integrates a search input directly within a menu, typically a dropdown, enabling users to quickly filter and locate specific menu items. It enhances pathfinding and awareness, commonly found in desktop applications with navigation bars. Notable behavior: Typing; Filtering; Filtered Menu Items.

This transition allows users to fluidly zoom between a grid of browser tab thumbnails and a full-screen view, enhancing navigation and context switching.

A non-dismissible tooltip presenting a sequence of steps, commonly employed for user onboarding or guiding through multi-stage workflows, enhancing user awareness and pathfinding.

This pattern allows users to efficiently compare and resolve differences between two versions of a file by synchronizing their scroll positions.

This sign-in pattern offers both traditional email/password input and a convenient QR code scan, enhancing user flexibility and reducing login friction with engaging loading tips.

A tooltip pattern used to provide contextual information or explanations for features, commonly activated on hover or focus, enhancing user understanding and decision-making in web and desktop applications.

Users can effortlessly switch between grid and list views of content, enhancing readability and personalizing their browsing experience.

Users can dynamically adjust content aspect ratios via a clickable menu, providing flexible viewing experiences and enhancing content adaptability.

This pattern uses a dynamic, animated brand gradient to visually engage users and highlight key messages as they scroll, enhancing brand recognition and content flow.

Users can effortlessly browse featured promotions and products through a dynamic hero slider, enhancing awareness and guiding their pathfinding.

This pattern displays a scrollable modal over a darkened background, allowing users to focus on its content while retaining context of the underlying page.

This spinner provides visual feedback during module loading, reassuring users that the system is actively processing and preventing perceived delays.

Hovering over a truncated title reveals its full text in a tooltip, providing complete context without cluttering the interface.

This pattern offers users clear choices to join a meeting, enabling them to download the app, continue in the browser, or open the existing application for optimal experience.

Users can quickly toggle between light and dark themes via a side-drawer, enhancing visual comfort and accessibility without leaving the current page.

This pattern displays real-time audio levels as a dynamic graph, providing immediate visual feedback on sound input during a call.

Users can select a specific version of a product or guide from a dropdown menu, ensuring they access relevant, up-to-date information.

A UI element, typically a bar, that visually indicates the user's reading progress or status within a document or page. Often integrated into a fixed navigation bar, it enhances awareness and helps users track their position. Notable behavior: Progress State; Fixed on Scroll.

This pattern uses interactive hotspots on a product image to reveal key features and benefits, allowing users to explore details without leaving the main page.

This pattern automatically cycles through content in a two-pane layout, allowing users to passively discover key features or products without direct interaction.

This pattern provides a clear, persistent navigation bar at the top of the screen, allowing users to quickly return to previous views or access key sections.

This pattern provides quick access to recent activity and featured items within a compact, dismissible overlay, enhancing user efficiency.

This pattern streamlines desktop app sign-in by redirecting users to a web browser for authentication, then seamlessly returning them to the application.

Users can invite up to six friends to a synchronized viewing experience, fostering shared enjoyment and social interaction around media content.

This pattern provides a fixed, animated bubble that indicates reading progress, helping users understand their position within long articles and enhancing content appreciation.

This pattern guides users to quickly name their site by offering real-time suggestions as they type, streamlining the initial setup process.

Upon focusing the search bar, users are presented with a curated list of favorites, frequently visited sites, and Siri suggestions, streamlining navigation and discovery.

Users can quickly access account-specific options and site navigation through a persistent topbar dropdown menu, enhancing pathfinding and personalization.

Users can quickly filter their video feed by topic using a horizontal row of clickable tabs, enhancing content discovery and personalization.

This pattern enables users to efficiently navigate and select menu items using keyboard arrows, enhancing accessibility and speed for power users.

This pattern guides users through multi-step processes with clear, numbered instructions and corresponding visual cues for efficient task completion.

This pattern enables users to effortlessly share content across popular social networks and via email, boosting content reach and engagement.

This pattern highlights matching items within a dropdown menu as a user types into an associated search input, aiding in quick pathfinding and user selection.

Users can highlight and save specific text within an article, enabling focused review and easy access to key information later.

This transition subtly scales down an image on hover, providing visual feedback and highlighting interactive elements without obscuring content.