Dynamic tabbed interfaces
Create dynamic tabbed interfaces, as described in the
WAI ARIA Authoring Practices.
Tabs is a higher-level component for quickly creating a
Nav matched with a set of
Tabs can be controlled directly when you want to handle the
selection logic personally.
transition prop to
Fill and justify
Similar to the
Nav component, you can force the contents of your
Tabs to extend the full available width. To
proportionately fill the space use
fill. Notice that the
Tabs is the entire width but each
Tab item is a different size.
If you want each
Tab to be the same size use
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.
That said, it Dropdowns do work technically (sans focus management), but we don't make any claims about support.
Custom Tab Layout
For more complex layouts the flexible
TabPane components along with any
Nav allow you to quickly piece together your own Tabs
component with additional markup needed.
Create a set of NavItems each with an
corresponding to the eventKey of a
TabPane. Wrap the whole
thing in a
TabContainer and you have fully functioning
custom tabs component. Check out the below example making use of the
grid system, pills and underline.