Tabs

tabs

.slds-tabs_default, .slds-tabs-mobile__container, .slds-tabs-mobile__group — A tab keeps related content in a single container that is shown and hidden through navigation.

base

.slds-tabs_default — Initializes a default tablist

base › Size - Medium

base › Size - Medium - With Header

base › Size - Large

base › Size - Large - With Header

base › Overflowing Items

base › Overflowing Items with Icons

base › Tabs With Error inside of content

base › With Nested Scoped Tabs

base › With Header

base › With Invisible Header

base › Tab Card-look

base › Styling Hooks

.slds-tabs_default__nav

.slds-tabs_default__nav — Creates the container for the default tabs

.slds-tabs_default__item

.slds-tabs_default__item — Styles each list item as a single tab

.slds-tabs__item_overflow

.slds-tabs__item_overflow — A tab item that has an overflow menu

.slds-is-active

.slds-is-active — Active state for a tab item

.slds-has-focus

.slds-has-focus — Focus state for a tab item

.slds-has-notification

.slds-has-notification — Creates styles for a Tab Item when its tab has new activity in

.slds-indicator_unread

.slds-indicator_unread — Unread notification icon

.slds-is-unsaved

.slds-is-unsaved — Creates styles for a Tab Item when its in an unsaved or dirty state

.slds-tabs_default__link

.slds-tabs_default__link — Styles each actionable element inside each tab item

.slds-tabs_default__overflow-button

.slds-tabs_default__overflow-button — List item containing the overflow button menu

.slds-tabs__left-icon

.slds-tabs__left-icon — true

.slds-tabs__right-icon

.slds-tabs__right-icon — true

.slds-tabs_default__content

.slds-tabs_default__content — Styles each tab content wrapper

.slds-tabs_default__header

.slds-tabs_default__header — Applies bold font weight to header

medium

.slds-tabs_medium — Medium sized tabs

large

.slds-tabs_large — Large sized tabs

sub-tabs

.slds-sub-tabs — Subtabs

.slds-sub-tabs__item

.slds-sub-tabs__item — Subtab item

.slds-indicator-container

.slds-indicator-container — Used to reserve spacing for tab indicators

.slds-has-success

.slds-has-success — Success notification on a subtab

.slds-has-error

.slds-has-error — Error notification on a subtab

.slds-has-warning

.slds-has-warning — Warning notification on a subtab

mobile-stack

.slds-tabs-mobile__container — Container to hold mobile tabs and their panels

mobile-stack › Adjacent Stacked Drill Ins

mobile-stack › Nested Stacked Drill Ins

mobile-stack › Deprecated Stacked Tabs

mobile-stack › Deprecated Adjacent Tab Stack

.slds-panel_animated

.slds-panel_animated — Modifier that changes the display of a panel to hide out of view and animate in when opened

.slds-tabs-mobile

.slds-tabs-mobile — Styles the list of tabs for the mobile tab set

.slds-tabs-mobile__item

.slds-tabs-mobile__item — Styles each list item as a single drill-in tab

mobile-group

.slds-tabs-mobile__group — Wrapper for adjacent mobile tab sets