Overlay & Navigation
Components for overlays, navigation, and structured content organization.
Overlay & Navigation
Overlay and navigation components organize content into logical sections, provide layered interactions, and enable quick access to commands. Choose based on how intrusive the interaction should be and whether content persists on the page.
Overlay patterns
Modals (center-focused): Use Dialog for important, focused interactions that demand user attention. Dialogs darken the background and trap focus, preventing interaction with the page until closed. Use for forms, confirmations, or critical information.
Drawers (side-focused): Use Sheet for secondary content that slides in from the edge (left, right, top, or bottom). Sheets are ideal for mobile-friendly navigation menus, settings panels, or detailed views that don't need to block the entire screen.
Floating panels: Use Popover for context-specific content anchored to a trigger element. Popovers are lightweight and great for filters, quick actions, or supplementary information without full-screen interruption.
Lightweight tooltips: Use Tooltip for hover-based help text or supplementary info. Tooltips are read-only and appear on mouse hover—never rely on them for critical information.
Context menus: Use Dropdown Menu for action menus anchored to a button or trigger. Dropdowns are perfect for grouped actions (Edit, Delete, Share) and work well in toolbars or table rows.
Navigation and structure
Tabbed interfaces: Use Tabs to organize related content into separate panels within a page. Tabs are for peer sections at the same level—the active tab clearly indicates which section the user is viewing.
Collapsible sections: Use Accordion for FAQs, nested details, or content that benefits from progressive disclosure. Accordions collapse sections vertically, saving space while keeping related items discoverable.
Simple toggles: Use Collapsible for a single expandable/collapsible panel when you don't need multiple accordion sections.
Power-user search: Use Command for a command palette—a searchable, keyboard-driven menu for power users to quickly navigate or trigger actions. Perfect for internal tools or feature-rich apps.
Components
| Component | Type | Interaction | Use case |
|---|---|---|---|
| Dialog | Modal (centered) | User must respond | Important confirmations, forms |
| Sheet | Drawer (side) | User can interact behind it | Navigation, settings panels, mobile menus |
| Popover | Floating panel | Anchored to trigger | Filters, quick actions, supplementary content |
| Dropdown Menu | Context menu | Anchored action list | Grouped actions in toolbars, table rows |
| Tooltip | Hover text | Read-only, transient | Help text, abbreviation explanations |
| Tabs | On-page sections | No overlay | Peer sections of content |
| Accordion | Collapsible sections | Vertical toggle | FAQs, nested details, disclosure |
| Collapsible | Single toggle | Expand/collapse one panel | Simple show/hide, not accordion |
| Command | Keyboard palette | Search + keyboard nav | Power-user navigation, command access |
Quick decision tree
- Must user focus on one task without page distraction? → Dialog
- Secondary content that slides in from the edge? → Sheet
- Small action menu or filters anchored to an element? → Dropdown Menu or Popover
- Separate sections users can click between? → Tabs
- Expandable FAQ or nested disclosure items? → Accordion
- Help text on hover? → Tooltip
- Search-driven command access? → Command