Path

Examples

TODO:

Add to Pajamas UI Kit. Create an issue

Structure

TODO:

Add structure image. Create an issue

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

1. Simple Path: A simple path only contains stages with labels.
2. 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.
3. 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.
4. 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.