Tabs
beta

Feature tabs are larger and can be used when more emphasis is required.

Use .nav-tabs-border to include a bottom border.

Tabs can also use icons above the tab text.

Note that tab icons should be included after tab text in HTML/JSX (and content should be included in reverse order of appearance). This is because tab content uses flex-direction: column-reverse to ensure bottom alignment across all tabs regardless of content.

Tabs are left aligned by default.

Tabs can be centered by including the class nav-tabs-center.

Tabs can flex horizontally to fill all the available space by including the class nav-tabs-fill-available-space.

Tabs scroll by default when they overflow the viewport. Resize the window to see this.

By default, tab items are scaled to accomodate all text content without wrapping it, and the overflowed tab items are accessible via scroll.

The nav-tabs-no-overflow helper class reverses this: text within tab items can wrap, and overflow is disabled. This means that only a certain number of tabs with limited content can be used, especially in mobile. Resize the window to see this behavior. This class can only be used in conjunction with nav-tabs-fill-available-space. Please use at your own discretion.