Tabs organise and allow navigation between groups of content that are related and at the same level of hierarchy.
To select the active tab add the attribute
aria-selected="true" and that list item will have the correct styling.
To horizontally align the tab list with other content, the whole tab set can be contained within a
.row element to provide correct gutters.
There are two contexts in which this pattern can be used: as navigation, and as controls for panes of content.
The tabs pattern can be used as an alternative way to display a list of links.
Tabs use Vanilla's light theme by default. There are two ways to switch between the light and the dark themes:
To change the default, go to
_settings_themes.scss and set
To override the default, add a state to
is-dark when the default tabs theme is light, or
is-light when the default has been changed to dark:
To import just the standard tab component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins // this only needs to happen once in a given project @import 'vanilla-framework'; @include vf-base; @include vf-p-tabs;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
You can use tabs in React by installing our react-component library and importing