TabsNext switch between different but related content. Users can move between different views without the need to leave the current page. A tabstrip comprises a minimum of two tabs, with one tab actively engaged at any given moment. The active tab is differentiated from an inactive tab by a colored indicator either on the top or bottom edge of the tab, depending on the variant in use. These tabstrips can expand the full width of the page or be used within content areas, or within components such as dialogs, cards, and drawers.
- Use tabs to organize logically related but mutually exclusive content on a single page.
- Use tabs to prevent users from navigating to another page to complete a task.
- Don’t use tabs when users need to compare information between views.
- Don’t use tabs to communicate progress. Instead, use
Stepped Tracker. - Don’t use tabs for primary navigation, taking the user off the current page. Instead, use
Navigation Item.
- All labels should be short and concise.
- Labels should clearly communicate the underlying view.
- Always use sentence case in labels.
- Always use sentence case for badge labels when nesting in a tab.
- Do not wrap labels. Use truncation with
Tooltipif necessary. - Icon and text should match each other semantically.
To import TabsNext and related components from the lab Salt package, use:
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
- Use tabs to organize logically related but mutually exclusive content on a single page.
- Use tabs to prevent users from navigating to another page to complete a task.
- Don’t use tabs when users need to compare information between views.
- Don’t use tabs to communicate progress. Instead, use
Stepped Tracker. - Don’t use tabs for primary navigation, taking the user off the current page. Instead, use
Navigation Item.
- All labels should be short and concise.
- Labels should clearly communicate the underlying view.
- Always use sentence case in labels.
- Always use sentence case for badge labels when nesting in a tab.
- Do not wrap labels. Use truncation with
Tooltipif necessary. - Icon and text should match each other semantically.
To import TabsNext and related components from the lab Salt package, use:
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
- Use tabs to organize logically related but mutually exclusive content on a single page.
- Use tabs to prevent users from navigating to another page to complete a task.
- Don’t use tabs when users need to compare information between views.
- Don’t use tabs to communicate progress. Instead, use
Stepped Tracker. - Don’t use tabs for primary navigation, taking the user off the current page. Instead, use
Navigation Item.
- All labels should be short and concise.
- Labels should clearly communicate the underlying view.
- Always use sentence case in labels.
- Always use sentence case for badge labels when nesting in a tab.
- Do not wrap labels. Use truncation with
Tooltipif necessary. - Icon and text should match each other semantically.
To import TabsNext and related components from the lab Salt package, use:
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|
| Name | Type | Description | Default |
|---|