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.

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

Playground

Table of contents
APIPlayground