TabBar
- This component is a sub-navigation to organize different categories of a content on the same page
- The recommended amount of tabs is 2-5
- Consider to wrap the tabbed content e.g. into cards
- Horizontal spacing is space 3 per default which could be overwritten
API
TabBar
The TabBar supports margin styled-system props.
TabBar.Link
Name | Type | Default |
---|---|---|
selected | boolean Indicates that the link is currently selected. | |
activeClassName | string Override the default active class name (see react-router) | |
as | string or component Replace the rendered component with an HTML tag or another component. |
The TabBar.Link supports all the props that can be passed to <a>
tag.
Usage with react-router
When using this component as a navigational element with the NavLink
from react-router, the class name active
on the
TabBar.Link
element can also be used to indicate that the element is active and is the default that react-router adds
to active NavLink
elements.