Tabs

Interactive Tabs

Easy-to-use component with built-in state and click bindings. By default the first tab is selected.

<Tabs>
  <Tabs.Item content="Content for Profile">Profile</Tabs.Item>
  ...
</Tabs>

Styled variant

By using the prop variant, the menu can change its appearance. Currently, styled is the only valid value for this prop.

<Tabs variant="styled">...</Tabs>

No padding

Content area

You can remove the padding inside content panes with <Tabs.Item noPadding>, useful when you have content that stretches the full width, like a <Table noBorder> or an image.

<Tabs.Item noPadding>...</Tabs.Item>

Tab bar

You can remove the padding inside the tab bar with <Tabs noPadding>.

No background

noBackground makes the tab bar transparent

<Tabs noBackground>...</Tabs>

Content background

contentBackground sets the content background to base (default), base-2, base-3, or transparent.

<Tabs contentBackground="base-3">...</Tabs>

This also affects active tab for variant="styled", which does not support transparent since it relies on the background-color to overlap the bottom tab bar border.

<Tabs variant="styled"  contentBackground="base-3" ... />

Background color combinations

<Tabs contentBackground="base-3" noBackground ... />

<Tabs variant="styled" contentBackground="base-3" noBackground ... />

Badge in tabs

You can include <Badge> components inside tab labels. Add margin so the badge doesn't stick to the text.

Tabs in section

In order to better illustrate the padding options for tabs, we wrap them in <Section> components below.

To follow section styling, do the following:

• Use paddingInline={16} on <Tabs>
• Use noBackground prop on <Tabs>
• Set contentBackground="base-3" on <Tabs>.
• Set padding={16} on each <Tabs.Item>
• Use radiusBottom to <Tabs> to match section border radius.

Responsive Tabs with scroll

When the component extends beyond visibility, the component becomes vertically scrollable. Left and right scroll arrows will be rendered for easy navigation. Clicking a Tab slightly outside of view will make it scroll into view

Icons

Pass in <Icon> component as content, along with the tab button text.

Link tabs

Links inside <Tabs> will render as tab buttons, which allow you to use any routing lib to handle clicks and render content while still being styled.

Mark the currently active tab with using the active css class. (<NavLink> from react-router does this out of the box.)

React router example

import { Route, NavLink } from "react-router";
import Tabs from "@intility/bifrost-react/Tabs";

export default function RoutedTabs() {
  return (
    <>
      <Tabs>
        <NavLink to="/path/to/tab-one">Tab 1</NavLink>
        <NavLink to="/path/to/tab-two">Tab 2</NavLink>
      </Tabs>
      <div className="bf-page-padding">
        <Route path="/path/to/tab-one">Tab 1 content</Route>
        <Route path="/path/to/tab-two">Tab 2 content</Route>
      </div>
    </>
  );
}

Tanstack router example

import { Link, Outlet } from "@tanstack/react-router";
import Tabs from "@intility/bifrost-react/Tabs";

export default function RoutedTabs() {
  return (
    <>
      <Tabs>
        <Link to="/path/to/tab-one">Tab 1</Link>
        <Link to="/path/to/tab-two">Tab 2</Link>
      </Tabs>
      <div className="bf-page-padding">
        <Outlet />
      </div>
    </>
  );
}