Tabs

Switch between related views within a single section.

Live preview Try the effect

Project progress: 86%

All tasks are progressing as planned.

Try the controls to understand this pattern.

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Switch between related views within a single section. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Related settings, summaries and record sections.

Related concepts

Tabs select peer panels; navigation links may lead to unrelated pages.

Describe this effect

Output language

Use a tab list with one selected panel, visible focus and arrow-key navigation. Keep the tab and panel relationships accessible.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.