Bifrost Design System

Design React CSS

Figma

import BottomBar from "@intility/bifrost-react/BottomBar";

BottomBar

Go to top

Props

Floating bottom bar

Fixed positioning (will float on top of other content)
Responsive vertical padding like .bf-page-padding (remove all padding with noPadding prop)
Automatically makes space for sidebar/collapsed sidebar/no sidebar with transition
Height will adjust to its content

Main content overlap

Since the BottomBar will float on top of other content, you need to make sure to make vertical space for it at the bottom of your content, usually a padding-bottom: [your BottomBar height] on your main content will do the trick.

TSX

<BottomBar>
  <Button>A button</Button>
</BottomBar>

Open Sandbox

import {
  faHome,
  faInfoCircle,
  faUser,
  faCog,
} from "@fortawesome/free-solid-svg-icons";
import BottomBar from "@intility/bifrost-react/BottomBar";
import Nav from "@intility/bifrost-react/Nav";
export default function () {
  return (
    <Nav
      logo="App Name"
      top={
        <>
          <a href="#path" title="Profile">
            <Nav.Item icon={faUser} />
          </a>
          <a href="#path">
            <Nav.Item>About</Nav.Item>
          </a>
        </>
      }
      side={
        <>
          <a href="#path">
            <Nav.Item icon={faHome}>Home</Nav.Item>
          </a>
          <a href="#path">
            <Nav.Item icon={faCog}>Settings</Nav.Item>
          </a>
        </>
      }
    >
      App content goes here
      <BottomBar>Bottom bar content</BottomBar>
    </Nav>
  );
}

Inline layout

See <Inline> for an easy way to place buttons and other inline content.

TSX

<BottomBar>
  <Inline align="center">
    <Button>Cancel</Button>
    <Inline.Separator />
    <span>Some text</span>
    <Button variant="filled">Done</Button>
  </Inline>
</BottomBar>

Some text

Floating bottom bar

Demo with Nav sidebar

Inline layout