Setup example

Other examples

Basic app structure

The whole point of Bifrost is to create a consistent look and feel for all Intility web apps, and as such we would like for you to always use our <Nav> component for your app menus.

Basically we provide three options for a basic React app layout:

1. Use both sidebar and top bar
2. Only standalone top bar
3. Only standalone sidebar

Clickable links and routing

Usually you will do something like <NavLink to='/path'> instead of <a href='#path'> in the examples below.

If you use <NavLink> from react-router-dom it will add an .active css class if the link matches the current page, but you can also use className='active' on <a> or <Link> to mark the menu item as currently active.

Responsive navigation

By default, the <Nav> component will provide a mobile-friendly fullscreen menu, with the contents passed to the side prop. A hamburger button to open the mobile menu will appear in the top bar for screens smaller than 960px wide, and at the same breakpoint the sidebar is hidden.

For more advanced usage see breakpoint docs and Nav component.

import ReactDOM from "react-dom";
import { faHome, faUser, faCog } from "@fortawesome/free-solid-svg-icons";
import Nav from "@intility/bifrost-react/Nav";

export default function App() {
  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>
        </>
      }
    >
      <div className="bf-padding">App content goes here</div>
    </Nav>
  );
}

// in your app you'll need this. commented out for sandbox demo
//ReactDOM.render(<App />, document.getElementById('root'))