Skip Navigation

Drilldown Nav Design Only

Drilldown navigation appears in the context of a data visualization when the user “drills down” to a detailed view within the chart or graph. It allows users to move between levels of information within the data hierarchy.

Standard Example

Drilldown Nav illustration

When to Use

  • When the user may select a data element in the current visualization and drill into a more detailed view of the data. For example, when drilling into a single section of a Donut or Pie Chart.

When Not to Use

  • When there is only one level of data available.
  • Also, the links only appear once the user drills into a secondary level. The links do not appear at the default/primary level.

Examples

Usage

See Links for state treatments.

Responsive Behavior

  • When there are three or more links in the drilldown hierarchy, an ellipses may appear between the first and last link at smaller screen sizes. Selecting the ellipses will expand the additional links.
  • This navigation can wrap to a second line.
Drilldown Nav Responsive Behavior