React Reference

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>
<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>
<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 ... />
<Tabs noBackground ... />

Content background

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

<Tabs contentBackground="base-3" ... />
<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" ... />
<Tabs variant="styled"  contentBackground="base-3" ... />

Background color combinations

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

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

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>
<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 icon={faCog} />
  </Tabs.Item>
</Tabs>
<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 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>
<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;
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;