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.
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