Available Sass Variables and default values

$tabs-bar-padding-top: 0px
$tabs-bar-padding-bottom: 30px
$tabs-bar-border-bottom: 1px solid $base-border-color

$tabs-actions-top-offset: 5px
$tabs-actions-button-height: 30px
$tabs-actions-button-left-right-padding: 30px

$tabs-color-active: $text-color-dark
$tabs-color-inactive: $silver
$tabs-font-size: $font-size-large
$tabs-font-weight: $font-normal
$tabs-decoration-color: $brand-primary
$tabs-decoration-height: 3px
$tabs-padding-bottom: 20px
$tabs-left-right-padding: 20px


Vanilla JS Example

For use when it is reasonable to pull all data for all tabs on page load

Tab-bar markup looks like this

ul.tabs data-tab-group="[GROUP_NAME]" data-target="[CONTENT_SELECTOR_1]": span Tab 1
  li data-target="[CONTENT_SELECTOR_2]": span Tab 2
  li data-target="[CONTENT_SELECTOR_3]": span Tab 3

Use different [GROUP_NAME] for multiple tab-bars on the same page. [CONTENT_SELECTOR_X] can be any jQuery selector string

The associated content for 'Tab 1' looks like this

[CONTENT_SELECTOR_1].active data-tab-group="[GROUP_NAME]" Content for tab 1

Add .active to a tab and the associated content element to have a tab selected on page load

All js and css is included and initialized on page load. Only the markup is required

  • Tab 1
  • Tab 2 Long Title
  • Tab 3
Content for tab 1
Content for tab 2
Content for tab 3

Link Example

If the data for all tabs cannot reasonably be loaded on page load, then it is recommended to use normal links. Turbolinks will make it seem like the tabs are switching locally-ish.

The markup is dramatically simplified:

ul.tabs a Tab 1
  li: a Tab 2 with long title
  li: a Tab 3
The above tabs are actually links to new pages

Action Example

ul.tabs data-tab-group="[GROUP_NAME]" data-target="[CONTENT_SELECTOR_1]": a Tab 1
  li data-target="[CONTENT_SELECTOR_2]": a Tab 2
  li data-target="[CONTENT_SELECTOR_3]": a Tab 3
    a.btn-text Delete
    a.btn-primary Add
Tab 1 content here
Tab 2 content here