--- name: tabs url: /tabs title: Tabs ---

Tabs

Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.


Basic HTML

You can create automatic tabs with this basic directive:

Tab content 1
Tab content 2
Tab content 3
Tab content 1
Tab content 2
Tab content 3

Advanced HTML

You can create Automatic tabs with displaced tab content with this basic directive:

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

Sass Mixins

Use our mixins to write your own tab classes.

// This is the container for your tabstrip .custom-tabs { @include tabstrip( $orientation: horizontal, // Can also be vertical $background: #fff ); } // This is an individual tab .custom-tabs-item { @include tabstrip-item( $background: #fff, // Background color $background-hover: #fff, // Background color on hover $background-active: #fff, // Background color when active $color: #000, // Text color $color-active: #000, // Text color when active $padding: 1rem ); } // This is the container for tab content panes .custom-tab-content { @include tab-content( $padding: 1rem ); } // This is an individual tab pane .custom-tab-content-item { @include tab-content-item; }

Sass Variables

You can customize tabs with these variables in the `_settings.scss` file: