Skip to main content

Popover

A popover is a small overlay that appears above content, offering extra information, context, or options to the user.

This component is defined by Human Interface Guidelines. See Apple documentation for more information.

Overview

Do
  • Use them for iOS overflow solutions such as when you need to add more options into header content.
  • Order your menus by which items are used the most frequently.
Don't
  • Don't put too much information into a context menu. Context menus should be easy to scan.

Anatomy

Annotated diagram of an iOS context menu showing its parts: liquid glass container, label, selected state, leading icon, border, and chevron.
  1. Liquid Glass Container: Bounding box for the menu's content.
  2. Label: The main message or information.
  3. Selected (Optional): Shows selected menu items.
  4. Leading icon (Optional): Provides visual context.
  5. Border (Optional): Divides content.
  6. Chevron (Optional): Shows that a menu item opens further options.

Variants

Light

Use light theme Liquid Glass Context Menus in light theme.

An iOS context menu displayed in the light variant.

Dark

Use dark theme Liquid Glass Context Menus in dark theme.

An iOS context menu displayed in the dark variant.

Modifiers

Selected

The selected modifier can be toggled on to highlight a menu item that is user selected.

An iOS context menu showing a menu item in the selected state, highlighted to indicate user selection.

Leading icon

Leading icons can be added to menu items to provide visual context and quick recognition.

An iOS context menu with leading icons displayed alongside each menu item label.

Chevron

A trailing chevron shows that a menu item opens further options.

An iOS context menu with a trailing chevron on a menu item to indicate it opens a submenu.

Interactions

Opening a menu

Contextual menus are always hidden, and can be revealed usually by clicking an icon button (such as an overflow menu). Context menus will open close to their point of origin.

Diagram showing an iOS context menu appearing near its trigger icon button when tapped.

Closing a menu

You can close a context menu by either making a selection of the menu items or by tapping outside the menu's boundaries. This provides an intuitive way to dismiss it without interacting with the menu item selection.

Diagram showing the interactive areas to dismiss the iOS context menu by tapping on one option or outside its boundaries.

Content

Labels

Ensure the content follows platform specific wording.

LTR examples

Here's an example of a context menu in context.

Example of an iOS context menu used in a left-to-right layout.

RTL examples

Here's an example of a context menu in RTL context.

Example of an iOS context menu used in a right-to-left layout.
Back to top