Skip to main content

​
Anatomy

Anatomy of a Drilldown
  1. Back action
  2. Drilldown header
  3. Close action (optional)
  4. Drilldown content
  5. Drilldown footer (optional)

​
Options

​
In a Dialog

​
In a Drawer

​
In a Page Panel

​
Behaviors

​
How the Drilldown gets opened

Drilldowns are opened by clicking on a trigger element within the parent UI.

​
Dismissal

If the container is dismissed (e.g., clicking the backdrop or a close control), the entire UI closes. It does not step back; going back is reserved for the back action.

​
Focus Management

Focus should mimic the corresponding UI which the Drilldown is present in. Refer to focus management documentation for Dialogs and Drawers for more information.

​
Keyboard Interactions

Drilldown does not have any specific keyboard interactions. It should follow the keyboard conventions of the UI it is in.

​
When to use

  • Use as progressive disclosure in constrained layouts or smaller UIs.
  • Use for less critical, less complex tasks.
  • Use when preserving the context of the parent view adds value.
  • Use when wanting to navigate to a child item from a parent view.
An example of a Drilldown within a Drawer that allows the user to quickly edit individual values from the parent view.

​
When not to use

  • Avoid when content is unrelated to the parent UI.
  • Avoid when needing to use a new parent UI in the flow.

​
Where Drilldown can be used

Drilldown is allowed in the following UIs:

​
Where Drilldown cannot be used

Drilldown is explicitly not allowed in the following UIs: These are not allowed for a few reasons:
  • They are not easily accessible to implement in the component.
  • They are an unstable place to interact with for users (e.g., accidental Popover closing, uncontrollable resizes that get cut off).
In place of the Drilldown, use a Dialog instead.

​
Fullscreen Drilldown + Dialog vs A1 Takeover

The A1 Takeover contained in its header a “back to” element. While on the surface this seems the same as a Drilldown in a fullscreen Dialog, there is a notable difference. An A1 Takeover can be triggered from any UI interaction. The Drilldown + Fullscreen Dialog can only be triggered from another fullscreen Dialog, consistent with how Drilldown works in all other scenarios. If looking for the closest approximation to the A1 Takeover, use the normal Fullscreen Dialog without a Drilldown.

​
How to use

  • Use the same container the Drilldown came from (e.g., a Drawer-triggered Drilldown remains in that Drawer).
  • Avoid using the confirmation pattern when using the Drilldown. If the actions being taken are important enough to warrant a confirmation, consider using a different UI pattern besides the Drilldown.
  • If the Drilldown context is closed in some way, such as clicking on an x or a Backdrop, the whole UI is closed. It should not go back, that action is reserved for the back action. You may optionally remove these close actions in a Drilldown.
  • Do not use Breadcrumbs within a Drilldown. Breadcrumbs create a competing hierarchy with the Drilldown’s back action. Breadcrumbs are not traditionally used in Panels, Drawers, or Dialogs either.
Dialog →\rightarrow User clicks on item →\rightarrow Drilldown in same Dialog
DoExample of a properly triggered Drilldown
Any UI in the app →\rightarrow User clicks on item →\rightarrow Drilldown in a new Dialog
Don'tDrilldown must come from the same parent UI

​
Actions within a Drilldown

When using a Drilldown, it is recommended to adjust the actions to the following: Header
  • Always include the back action provided by Drilldown.
  • Optionally remove the close action to reduce ambiguity.
Footer
  • Use Apply or similarly a named action when users modify content within the Drilldown.
  • Omit Cancel, as its scope is ambiguous in this context.
Last modified on January 23, 2026