There are three types of Tab controls : nav, tab and pills. The tabType property determines the type. By default it's set to 'tabs'.
Navigation available in Smart.Core share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
Navigation available in Smart.Core share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned via the align property.
Centered with align="center"
Right-aligned with align="end"
Vertical-aligned with align="vertical"
Vertical-aligned works with listType="nav" as well:
Here's the default appearance of the Smart's core Tabs control. Setting the tabType property to 'tabs' will also change the the element to it's default state.
Pills is the third appearance of the Tab control. Changing the tabType property to 'pills' in order to change the appearance of the element.
Force your Tab contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, set the fill property. Notice that all horizontal space is occupied, but not every nav item has the same width.
For equal-width elements, set the justified property. All horizontal space will be occupied by nav links, but unlike the fill above, every nav item will be the same width.
If you’re using navs to provide a navigation bar, be sure to add a role="navigation" to the element. Note that navigation bars, even if visually styled as tabs with the tabType="tabs" property, should not be given role="tablist", role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. See JavaScript behavior for dynamic tabbed interfaces in this section for an example.
Tabs with dropdowns
Pills with dropdowns
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
Dynamic Tabs also works with pills: