Bifrost Design System

Tabs

import Tabs from "@intility/bifrost-react/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.Item content="Content for Email">Email</Tabs.Item>
  <Tabs.Item
    content={
      <>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          condimentum ornare est, quis semper quam egestas viverra. velit quis
          mi porta tempor. Fusce auctor consectetur cursus. Curabitur vel magna
          tortor. Quisque pretium eu magna sit amet lacinia. Proin at odio in
          neque tristique commodo. Phasellus nec ex vel est dapibus porta.
        </p>
        <p>
          Ut lacinia lacus in neque placerat, malesuada ullamcorper elit
          fringilla. Pellentesque tincidunt volutpat eros, nec aliquam odio
          porta a.
        </p>
      </>
    }
  >
    Lorem
  </Tabs.Item>
  <Tabs.Item disabled content="Content for Disabled tab">
    Disabled tab
  </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.Item content="Content for Profile">Profile</Tabs.Item>
  <Tabs.Item content="Content for Email">Email</Tabs.Item>
  <Tabs.Item
    content={
      <>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          condimentum ornare est, quis semper quam egestas viverra. velit quis
          mi porta tempor. Fusce auctor consectetur cursus. Curabitur vel magna
          tortor. Quisque pretium eu magna sit amet lacinia. Proin at odio in
          neque tristique commodo. Phasellus nec ex vel est dapibus porta.
        </p>
        <p>
          Ut lacinia lacus in neque placerat, malesuada ullamcorper elit
          fringilla. Pellentesque tincidunt volutpat eros, nec aliquam odio
          porta a.
        </p>
      </>
    }
  >
    Lorem
  </Tabs.Item>
  <Tabs.Item disabled content="Content for Disabled tab">
    Disabled tab
  </Tabs.Item>
</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.

import Tabs from "@intility/bifrost-react/Tabs";
import Table from "@intility/bifrost-react/Table";

export default function () {
  return (
    <Tabs
    // noPadding // removes tab bar padding
    >
      <Tabs.Item
        content={
          <Table>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Navn</Table.HeaderCell>
                <Table.HeaderCell>Tittel</Table.HeaderCell>
                <Table.HeaderCell>Avdeling</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell>Eric Morton</Table.Cell>
                <Table.Cell>Developer</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Linda Tran</Table.Cell>
                <Table.Cell>Datteren til oppfinneren av Tran</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Herman Jensen</Table.Cell>
                <Table.Cell>Developer</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        }
      >
        Default Table
      </Tabs.Item>
      <Tabs.Item
        noPadding // removes padding inside content area
        content={
          <Table noBorder>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Navn</Table.HeaderCell>
                <Table.HeaderCell>Tittel</Table.HeaderCell>
                <Table.HeaderCell>Avdeling</Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell>Eric Morton</Table.Cell>
                <Table.Cell>Developer</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Linda Tran</Table.Cell>
                <Table.Cell>Datteren til oppfinneren av Tran</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Herman Jensen</Table.Cell>
                <Table.Cell>Developer</Table.Cell>
                <Table.Cell>Developer Services</Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        }
      >
        Table noPadding
      </Tabs.Item>
      <Tabs.Item
        content={
          <img
            src="img/seal.jpg"
            style={{ width: "100%", display: "block" }}
            alt="Grumpy-looking seal"
          />
        }
      >
        Default Image
      </Tabs.Item>
      <Tabs.Item
        noPadding // removes padding inside content area
        content={
          <img
            src="img/seal.jpg"
            style={{ width: "100%", display: "block" }}
            alt="Grumpy-looking seal"
          />
        }
      >
        Image noPadding
      </Tabs.Item>
    </Tabs>
  );
}

Open Sandbox

Tab bar

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

No background

noBackground makes the tab bar transparent

<Tabs noBackground ... />

Content background

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

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

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>
  <Tabs.Item content="Inbox content">
    Inbox
    <Badge style={{ marginLeft: 8 }}>1</Badge>
  </Tabs.Item>
  <Tabs.Item content="Sent content">
    Sent
    <Badge state="neutral" style={{ marginLeft: 8 }}>
      10
    </Badge>
  </Tabs.Item>
</Tabs>

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.

About me

I am Bifrost—the shimmering bridge that spans the realms, connecting the world of mortals with the domain of the gods. Born of myth and woven from the colors of the rainbow, I am both path and possibility, a symbol of unity, transformation, and the journey between worlds.

About me

<Section>
  <Tabs
    radiusBottom
    noBackground
    contentBackground="base-3"
    paddingInline={16}
    // variant="styled"
  >
    <Tabs.Item
      content={<>Bifrost has all the colors of the rainbow...</>}
      padding={16}
    >
      {/* Skip marginLeft and marginRight for variant="styled" */}
      <Icon marginLeft marginRight icon={faPalette} />
    </Tabs.Item>
    <Tabs.Item
      content={
        <>
          In the context of Bifrost, teal could represent a harmonious link
          between growth (green) and wisdom or depth (blue).
        </>
      }
      padding={16}
    >
      Teal theme
    </Tabs.Item>
    Etc...
  </Tabs>
</Section>

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

<Tabs>
  <Tabs.Item content="Gandalf the Grey">Gandalf</Tabs.Item>
  <Tabs.Item content="Frodo Baggins">Frodo</Tabs.Item>
  <Tabs.Item content="Samwise Gamgee">Sam</Tabs.Item>
  <Tabs.Item content="Aragorn, son of Arathorn II">Aragorn</Tabs.Item>
  <Tabs.Item content="Legolas, son of Thranduil">Legolas</Tabs.Item>
  <Tabs.Item content="Gimli, son of Glóin">Gimli</Tabs.Item>
  <Tabs.Item content="Peregrin Took">Pippin</Tabs.Item>
  <Tabs.Item content="Meriadoc Brandybuck">Merry</Tabs.Item>
  <Tabs.Item content="Boromir, son of Denethor II">Boromir</Tabs.Item>
  <Tabs.Item content="A.K.A. Sméagol">Gollum</Tabs.Item>
</Tabs>

Icons

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

<Tabs>
  <Tabs.Item content="Content for profile">
    <Icon icon={faUser} marginRight />
    Profile
  </Tabs.Item>
  <Tabs.Item content="Content for email">
    Email
    <Icon icon={faEnvelope} marginLeft />
  </Tabs.Item>
  <Tabs.Item content="Content for settings">
    <Icon marginLeft marginRight icon={faCog} />
  </Tabs.Item>
</Tabs>

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

<Tabs>
  <a href='#path/to/tab/profile'>Profile</a>
  <a className='active' href='#path/to/tab/email'>
    Email
  </a>
  <a href='#path/to/tab/apps'>Applications</a>
  <Tabs.Item content='' disabled>
    Disabled tab
  </Tabs.Item>
</Tabs>
<div className='bf-page-padding'>
  When used this way, it's up to you to handle the routes and render the correct
  content.
  The leftmost tab button should line up with your content if you wrap it in the
  <code>.bf-page-padding</code> class.
</div>

Profile Email Applications

When used this way, it's up to you to handle the routes and render the correct content. The leftmost tab button should line up with your content if you wrap it in the .bf-page-padding class.

React router example

import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink,
} from "react-router-dom";
import Tabs from "@intility/bifrost-react/Tabs";

const RoutedTabs = () => (
  <Router>
    <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">
      <Switch>
        <Route path="/path/to/tab-one">Tab 1 content</Route>
        <Route path="/path/to/tab-two">Tab 2 content</Route>
      </Switch>
    </div>
  </Router>
);

export default RoutedTabs;