Segmented control
Segmented control can be used in two ways:
Secondary tabs: if the page already has a set of primary tabs used as navigation, this can be used as a sub-navigation of those primary tabs.
View switcher: in the case of a page in which the same piece of content is shown in more than one format, this component can be used as a switcher between the different views.
At smaller breakpoints, this pattern should be swapped out for one more suited to the available width, such as a select.
Accessibility:
Default
Use the class p-segmented-control
to make your tabs appear as a group of buttons.
Deprecation warning:
Dense
By adding the is-dense
modifier to the p-segmented-control
element, the buttons will take on a more compact appearance.
With Icons
The pattern also supports the use of icons within each button.
Icons:
Import
To import the segmented control 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-segmented-control;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.