We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
Tabs
Tabs provide additional navigation within a page or sub section of a page. They are available in primary and secondary styles.
Primary
To create a primary tab start with a <div> and add the .tabs and .is-primary classes. Then, insert an <ul> tag and place <a> tags wrapped in <li> tags inside the <ul> tag to create tab links. Set an active or disabled state to a tab link by adding a .is-active or .is-disabled class to a <li> tag.
Horizontal
Horizontal alignment is built into primary tabs by default.
Users who do not or cannot use pointing devices can tab through links. These links should be in a logical tabbing order, but if they aren't use the tabindex attribute to allow you to define the order.
Secondary
To create a secondary tab add the .is-secondary class to a tab's outer <div>.
Tabs have an active state and disabled state. To implement either of these states simply add the .is-active or .is-disabled class to the <li> or <a> tag containing the tab item.