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