A sidebar menu that can be collapsed or expanded to manage screen real estate, often used for navigation. Supports user pathfinding and awareness in web applications.

A vertical navigation menu composed of icons, often placed in a side panel or navbar, supporting tooltips on hover and notification badges for user awareness and pathfinding.

A UI pattern where a button triggers an overlay menu containing a list of actions, typically used for contextual operations or secondary actions.

Animates a background element, often an image or illustration, as the user scrolls, creating a dynamic visual transition. The background can be fixed in position relative to the viewport.

A desktop web pattern featuring a scrollable sidebar, enhancing pathfinding and user awareness within the application interface.

Displays critical information on an interactive map, enabling users to quickly understand and navigate emergency situations.

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

A multi-step wizard guiding users through the initial setup of a chat, commonly found in desktop applications, focusing on onboarding and pathfinding, with considerations for accessibility.

Layout sidebars that can be expanded or collapsed, often used for navigation or supplementary content, improving screen real estate management and pathfinding.

Displays a dynamic dropdown menu with search results or suggestions as a user types into an input field, facilitating quick information retrieval and navigation. Notable behavior: Typing; Text Input; Empty Input.

A UI component displaying a series of cards horizontally, allowing users to navigate through them and perform actions on individual cards. Optimized for web and desktop environments.

This pattern allows users to upload files by dragging and dropping them onto a designated area, often featuring visual feedback, progress indicators, and potentially appearing within a modal dialog. Notable behavior: Drag and Drop; File Selection; Idle.

A background animation that provides visual feedback, often responding to user interactions like drag & drop gestures or indicating loading states, enhancing user awareness and engagement.

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 pattern provides a multi-level sidebar navigation system, typically found on desktop and web applications, designed to help users efficiently navigate complex information architectures. It utilizes a side panel to display hypertext links, allowing users to drill down into multiple depths of content. The navigation often incorporates animations to enhance the user experience during expansion, collapse, or selection of menu items, facilitating clear pathfinding within the application. Notable behavior: Click to expand/collapse; Click to navigate; Expanded.

This pattern illustrates how a side panel dynamically adjusts its visibility and layout in response to changes in the viewport size. It often incorporates smooth animations to enhance the user experience during these responsive transitions. Notable behavior: Viewport Resizing; Panel Expansion/Collapse; Expanded Panel.

Allows users to toggle the visibility of a sidebar menu on desktop interfaces via a mouse click. This pattern typically involves a visual transition to expand or collapse the side panel, optimizing screen real estate and aiding in content pathfinding.

Desktop, Accessibility, Pathfinding, Awareness, Web, English, User Selection, Text Input, Fixed on Scroll, Thumbnail, YouTube, Google

A UI pattern featuring content panels that expand and collapse horizontally, optimizing screen space while allowing users to reveal or hide sections. This design facilitates sequential content exploration or option selection, often seen in applications like Instagram for presenting multiple stories or filters.

A Progressive Layout Loader displays content incrementally, often utilizing placeholders or animations, to enhance perceived performance and user experience during data fetching or complex rendering operations.

Applies a dynamic visual effect to an element's background when a user hovers their mouse over it, enhancing interactivity and drawing attention to the element.

Desktop, Awareness, Pathfinding, Web, Español, Hypertext Links, Pagination, Side Panel, Alert Dialog, Modal, Dark Mode, Wordpress

A data visualization pattern that presents information horizontally across a timeline, enabling users to observe trends and events within specified time ranges. Notable behavior: Zooming; Panning; Loading.

Displays multiple data graphs, each presenting metrics over independently selectable time ranges, commonly used in analytics dashboards for comparative data analysis.

This pattern describes how a double-click event on an element can open content in a new browser window, often used for pathfinding or accessing detailed views.

Desktop, Awareness, Pathfinding, Web, English, Fixed on Scroll, Navbar, Infinite Scroll, Button, Back Link, Search Input, Twitter

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

A layout pattern featuring two distinct panes for navigating and controlling audio content. Typically used on desktop web applications, one pane might list audio tracks or categories, while the other displays details or playback controls.

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.

A search bar that dynamically fades out of view when not in active use or during user scrolling, optimizing screen real estate and minimizing visual distractions. Notable behavior: Scrolling; Focus/Blur; Visible.

A News Swiper displays a collection of news articles or items in a horizontally scrollable or swipeable carousel, enabling users to browse content efficiently.

A UI component enabling users to select product colors, typically presented as a list of color markers or photos. It supports hover events for tooltips and click events for selection, aiding decision-making on web and desktop platforms.

Displays per-hour status indicators on a status page, providing real-time and historical system health. Supports various UI states and interactive elements like tooltips for detailed information.

A fixed bottom-right chat bubble, commonly used for customer support or feedback. It expands into a side panel, features a notification badge for new messages, and includes a text input for user interaction, often with a scrollable conversation history. Notable behavior: Expand/Collapse; Typing; Expanded.

Desktop, Pathfinding, Accessibility, Decision Making, Web, English, Side Panel, Scrollbar, Toggle Field, Button, Image / Illustration, Fixed on Scroll, Filters, Animation

Applies a dynamic 3D shadow effect to a button, enhancing visual depth and responsiveness upon interaction through animation and transition.

Desktop, Decision Making, Feedback, Awareness, Onboarding, Pathfinding, Web, Español, Modal, Thumbnail, Animation, Close Overlay, Cards, Dim Overlay

A dropdown filter allows users to select one or more criteria from a collapsible list to refine displayed content. This pattern helps manage screen space while providing powerful content filtering capabilities. Notable behavior: Click to open dropdown; Click to close dropdown; Dropdown open.

This pattern implements a 'Back to Top' mechanism, typically a fixed button that appears after a user scrolls down a long page. It enhances navigation for content presented via pagination or infinite scroll, allowing users to quickly return to the top of the page. Notable behavior: Scroll; Click; Hidden.

A navigation component that allows users to toggle the visibility of a sidebar menu, often used for pathfinding on desktop and web applications.

Displays a progress bar to indicate the loading status of content or an operation, providing visual feedback to the user during wait times and enhancing awareness of background processes.

A navigation component displaying a hierarchical outline of page content, enabling users to quickly understand the page structure and jump to specific sections via anchor links. This pattern enhances pathfinding and accessibility for long-form content, documentation, or multi-step processes by providing a clear overview and direct navigation within a page. Notable behavior: Click (to navigate to section); Scroll (to highlight current section); Active (current section).

Desktop, Decision Making, Pathfinding, Consent, Web, Español, Text Input, Hypertext Links

A topbar menu designed to adapt across multiple layouts, providing primary navigation and access to features, often utilizing dropdown menus for hierarchical content on desktop web applications. Notable behavior: Clicking menu items for navigation; Opening/closing dropdown menus; Menu item active/inactive.

A population pyramid visualization with interactive live filters, often using dropdown menus, for data exploration on desktop and web platforms. Features transitions for dynamic updates.

A top navigation bar pattern supporting multiple layout configurations, often featuring dropdown menus for pathfinding on desktop web applications.

Allows users to switch between list and grid display modes for content, enhancing content consumption flexibility and adapting to user preferences.

Desktop, Pathfinding, Awareness, Decision Making, Web, English, Modal, Animation, Image / Illustration

A horizontal slider pattern for displaying items, commonly used in e-commerce for product carousels, featuring pagination and image display.

A UI component enabling users to toggle between light and dark visual themes, enhancing accessibility and personal preference across web and desktop applications. Notable behavior: Toggle; Switch; Light Mode.

This pattern implements an image zoom or magnifier effect, enabling users to inspect fine details by hovering over an image. A magnified view typically appears as an overlay or adjacent panel, dynamically revealing content under the cursor. Notable behavior: Hover; Mouse Movement; Default.

Provides sliders for users to customize the display of an image grid, allowing adjustments to parameters like size, spacing, or number of columns. Supports interactive drag-and-drop gestures for precise control.

Simulates platform onboarding, guiding users through initial setup and feature discovery. Involves text input, pagination, and animated transitions for an interactive learning experience.

A sidebar navigation menu featuring collapsable items, often used to manage a large number of navigation links by revealing sub-items on user interaction.

A vertical accordion component used to display frequently asked questions, allowing users to expand and collapse sections for information retrieval.

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.

A Modal or Dialog component that allows users to drag and drop it to a fixed position on the screen. This enables custom placement and enhances user control over the interface layout, supporting repositioning for improved user experience. Notable behavior: Drag & Drop Gesture; Fixed Position.

Enables users to create a file from a web image by dragging and dropping it, often involving OS-level file handling and potentially a modal for confirmation or options.

This pattern describes a search bar interaction where the surrounding content is dimmed or 'blacked out' to focus user attention on the search input field. It enhances pathfinding by making the search function highly prominent and guiding users towards information retrieval. Notable behavior: Input Focus; Content Dimming; Active Search Input.

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 pattern describes a zoom-in/out transition effect applied to browser windows, commonly found in desktop operating systems like Apple OS. It facilitates navigation between windows, tabs, or thumbnail views, often triggered by user interactions such as a pinch gesture. Notable behavior: Pinch gesture; Window selection; Zoomed in.

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 synchronizes the scrolling of two distinct content views, enabling users to compare or edit information side-by-side while maintaining relative positional alignment. It is commonly found in code editors and document comparison tools. Notable behavior: Scrolling; Synchronized Scrolling; Synchronized.

A sign-in pattern featuring user authentication via text/password input or QR code, enhanced with loading tips during the process to improve perceived performance and user engagement.

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.

Desktop, Pathfinding, Accessibility, Web, Español, Navbar, Thumbnail, Toggle Field, Radio Button

Features an animated illustration alongside a navigation menu, often used in a carousel or paginated content structure for web and desktop applications.

A visual pattern showcasing a brand gradient, typically found on web landing pages. It may incorporate animation and custom scrollbar effects, often used in contexts displaying photo content.

A hero slider, or carousel, presents a series of prominent content items, often images, in a rotating sequence. Users can navigate through the slides using drag gestures, with smooth transitions between each item. This pattern enhances awareness and pathfinding on a webpage. Notable behavior: Drag Gesture; Slide Navigation; Active Slide.

A modal dialog pattern that overlays content, dims the background, and allows scrolling within the modal's content. Typically used for focused user interaction or displaying detailed information.

Displays a visual spinner to indicate that a module or content is actively loading, preventing user uncertainty and improving perceived performance during asynchronous operations.

Displays a small, contextual information box when a user hovers over an interactive UI element, enhancing clarity without permanent screen clutter. Notable behavior: Hover; Hovered; Idle.

A combination of buttons designed to facilitate the download of an application, guiding users towards installation across different platforms or stores.

A user interface pattern where a theme switcher, typically for toggling between light and dark modes, is accessible within a side-drawer or side panel. This interaction involves opening the drawer, selecting a theme, and often includes visual transitions. Notable behavior: Click event; Drawer open/close; Side-drawer open.

A visual component displaying audio levels or data using a graph of sound bars, often incorporating dynamic transitions. Typically found in desktop applications, it can be interactive, responding to click events.

A Section Dropdown enables users to quickly navigate between distinct sections or views within an application or page, providing a compact solution for content organization and access. Notable behavior: Click to Open/Close; Item Selection; Closed.

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.

A pattern for prominently displaying key features, benefits, or selling points of a product to quickly inform users and aid decision-making.

Desktop, Pathfinding, Awareness, Web, Español, Tiendanube

A navigation bar element that provides a contextual link to a previous page or section, aiding users in pathfinding and maintaining awareness of their location within a web application.

Desktop, Pathfinding, Apple OS, Español

Facilitates user sign-in to Slack across multiple browsers, often involving a primary browser for authentication and a secondary browser for access. This pattern streamlines the onboarding and pathfinding experience for desktop users.

Facilitates sharing an invitation link to a live movie event, enabling users to invite others and manage the invitation process. Notable behavior: Hypertext Links; Copy to Clipboard; Live State.

Provides a concise visual indicator, often bubble-shaped, to communicate the current status of an item or process. It enhances user awareness, particularly within dynamic content flows like infinite scroll or pagination, by highlighting progress or empty states, potentially with animation and fixed positioning. Notable behavior: Animation; Progress State; Empty State.

This pattern features natural language input fields that offer real-time suggestions, aiding users in decision-making and efficient pathfinding within web applications. It enhances user awareness and accessibility by guiding input through predictive text or relevant options.

This pattern describes how Apple Safari presents search options when the search input gains focus, facilitating pathfinding on desktop Apple OS.

A dropdown menu integrated into a top navigation bar, providing access to navigation links or user-specific actions. It appears upon user interaction with a trigger element in the top bar. Notable behavior: Click; Hover; Closed.

A UI pattern for filtering content feeds using a horizontal set of interactive tabs. Each tab represents a different filter category, allowing users to quickly switch between various views of the feed. Notable behavior: Tab selection; Filter application; Active tab.

A keyboard-navigated menu enables users to efficiently browse and select menu items using keyboard inputs, enhancing accessibility and pathfinding in desktop and web applications. Notable behavior: Keyboard navigation; Arrow key navigation; Focused.

Facilitates user progression through a defined sequence of steps, commonly employed in complex forms, wizards, or onboarding flows to visualize progress and enable step-by-step navigation.

Provides functionality for users to share content directly to various social media platforms, commonly implemented on web and desktop applications. Notable behavior: Sharing; Fixed on Scroll.

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.

This pattern enables users to highlight specific sections of text within content, similar to the functionality found in reading applications like Pocket. It facilitates visual annotation and easy recall of important information within articles or documents. Notable behavior: Text selection; Applying highlight; Normal text.

Applies a zoom-out visual transition to an element, typically an image or illustration, when a user hovers over it. This interaction provides immediate visual feedback, indicating interactivity and drawing attention to the element on desktop web interfaces.