--- title: Tabs layout: doc/layouts/default.html --- # 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.

*** ### Horizontal Tabs
{{> examples_tabs_intro}}
***

Basic

You can create a group of horizontal tabs using minimal markup.

HTML

{{#markdown}} ```html {{> examples_tabs_basic}} ``` {{/markdown}}

Rendered HTML

{{> examples_tabs_basic_rendered}}
*** ### Vertical Tabs You can create a group of vertical tabs using minimal markup.

HTML

{{#markdown}} ```html {{> examples_tabs_vertical_basic}} ``` {{/markdown}}

Rendered HTML

{{> examples_tabs_vertical_basic_rendered}}
*** ### Callbacks There are two ways to bind to callbacks in your tabs.
{{#markdown}}

Callback function

```html ``` {{/markdown}}
{{#markdown}}

Toggled Event

```html ``` {{/markdown}}
*** ## Customize With Sass Tabs can be easily customized with the Sass variables provided in the `_settings.scss` file.

SCSS

{{> examples_tabs_variables}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/tabs"; ```