Edit page

Tabs

Tabs separate related content into groups within a single context.

Basic Usage

To implement the Tabs component, you need to import it first:

import { Tabs, TabsItem } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Use tabs to divide similar content. Tabs make sense when the content they contain is related.

  • Make sure everything necessary to complete a single task is contained within one tab. Users don't like switching context to get their task done.

  • Make labels short and clear. Long tab names impede comprehension. Use as few words as possible, preferably just one.

  • Limit the number of tabs. Having too many tabs increases clutter and can be overwhelming for users. Try to have no more than 5 or 6 tabs.

Tabs with Icons

Tab titles can be accompanied by icons. Once you decide to have icons, use one for each tab and don't leave some tabs without an icon.

Scrollable Tabs

If you have more than a few tabs, you may need to make sure they will be all accessible no matter the space they have around. Wrap Tabs into ScrollView to make them scrollable if necessary.

API

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Nested TabsItem elements.

idstringundefinedfalse

ID of the root HTML element. It also serves as base for nested element:

  • <ID>__list

TabsItem

Prop nameTypeDefaultRequiredDescription
afterLabelnodenullfalse

Optional element shown after item’s label, e.g. an icon.

beforeLabelnodenullfalse

Optional element shown before item’s label, e.g. an icon.

hrefstringtrue

Item’s link URL. Optionally add custom routing function to the onClick option to bypass browser’s default navigation.

idstringundefinedfalse

ID of the root HTML element. It also serves as base for nested elements:

  • <ID>__link
  • <ID>__label
isActiveboolfalsefalse

If true, item is marked as active.

labelstringtrue

Item’s label.

onClickfuncnullfalse

Function to call on item click, e.g. custom routing function.

Theming

Tabs Theming

Custom PropertyDescription
--rui-Tabs__border-bottom-widthWidth of decorative bottom border
--rui-Tabs__border-bottom-colorColor of decorative bottom border
--rui-Tabs__gap--xsGap between individual tab items on smallest screens
--rui-Tabs__gap--smGap between individual tab items from sm breakpoint up
--rui-Tabs__gap--mdGap between individual tab items from md breakpoint up
--rui-Tabs__padding-xHorizontal padding

TabsItem Theming

Custom PropertyDescription
--rui-Tabs__item__padding--xsPadding of tab items on smallest screens
--rui-Tabs__item__padding--smPadding of tab items from sm breakpoint up
--rui-Tabs__item__padding--mdPadding of tab items from md breakpoint up
--rui-Tabs__item__font-weightLabel font weight
--rui-Tabs__item__colorLabel color
--rui-Tabs__item__border-widthBorder width, allows specifying for individual sides
--rui-Tabs__item__border-colorBorder color, allows specifying for individual sides
--rui-Tabs__item__border-radiusTop corners radius
--rui-Tabs__item__background-colorBackground color
--rui-Tabs__item__box-shadowBox shadow
--rui-Tabs__item__icon__gapGap between label and accompanying elements, e.g. icons

Theming TabsItem Hover and Active States

Most of TabsItem options can be adjusted for hover and active states as follows:

--rui-Tabs__item--<STATE>__<PROPERTY>

Where:

  • <STATE> is one of hover or active,
  • <PROPERTY> is one of font-weight, color, border-width, border-color, background-color, box-shadow, shift-y (shifts vertically the whole item), or label__shift-y (tweaks vertical position of tab label).