Path
Paths are horizontal process flows composed of a series of stages.
Examples
Structure
Guidelines
When to use
- When there is a process with unique content at each stage, for example, a DevOps lifecycle.
When not to use
- To segment tasks that are related and linear, use a stepper instead.
- To represent percentage of completion or progress of an activity, process, or task, use a progress bar instead.
Variants
- Simple Path: A simple path only contains stages with labels.
- Counter Path: A counter path contains stages with a counter badge showing the number of items it contains. If there are any âAll,â âOverview,â or âSummaryâ stages, then the counter of that stage should equal the sum total of all the others. Counters shouldnât be included if they break this pattern.
- Metric Path: A metric path contains stages with an abbreviated metric, such as 12d or 1.5h. The metric can be an integer or float, but should be limited to 5 digits maximum (and fewer when possible). Donât use multiple metric types on a single path. For example, 1d and 6kg.
- Combination Path: Some processes may be more complicated and require a path with a combination of icons, counters, and metrics. An icon can also be used at a specific stage, such as an âOverview,â to make it stand out more. Try to limit path complication by only using necessary attributes.
Accessibility
Keyboarding
Key | Action |
---|---|
Tab | When focus is outside of the path, moves focus to the active stage. If focus is on the active stage, moves focus to the content within the content of that stage |
â | Focuses and activates the next stage in the path. If the current tab is the last tab in the tab list, it activates the first tab. |
â | Focuses and activates the previous stage in the path. If the current tab is the first tab in the tab list, it activates the last tab. |
Last updated at: