--- 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}}
*** ### Deep linking to tabs or tab contents The tabs Foundation component can parse the location hash value and open the corresponding tab content pane. If the location hash maps to an element ID within a tab content pane, then the appropriate tab will become active and the browser window will scroll to the specified element. If you do not want to scroll to the specified element then set `data-options="scroll_to_content: false"`. In the following example, deep linking is enabled. If the location hash is `#tabs-deeplink-2` then the second tab will become active. If the location hash is `#tabs-deeplink-content-2` then the second tab will become active, and the browser will scroll to the paragraph tag with ID, tabs-deeplink-content-2. *** ### 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"; ```