Tabs

Tabs organize content into parallel views that share the same space. They let users switch between related content without navigating to a new page. Use tabs when content sections are at the same level of hierarchy and users may need to switch between them.

Usage Guidelines

Do

Use tabs for content that is parallel in nature — Overview/Analytics/Settings, Code/Preview.

Don't

Don't use tabs for sequential steps. Use a stepper or wizard pattern instead.

Do

Keep tab labels short (1-2 words) and immediately understandable.

Don't

Don't use more than 5-6 tabs. If you need more, consider a different navigation pattern.

Source Code