Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.5.2
@intility/bifrost-react@6.12.0
@intility/bifrost-react-datepicker@6.2.4
@intility/bifrost-react-select@6.1.0
/
/
/
Nav

Nav

Also see /react/nav
React component

Top level elements

bf-nav-side

<nav class="bf-nav bf-nav-side">
  <div class="bf-nav-side-logo">{bf-nav-logo}</div>
  <div class="bf-nav-side-content-wrapper bf-scrollbar-small">
    <div class="bf-nav-side-content">{nav items}</div>
  </div>
</nav>

bf-nav-top

<header class="bf-nav bf-nav-top">
  <div class="bf-nav-top-logo">{bf-nav-logo}</div>
  <div class="bf-nav-top-content">{nav items}</div>
</header>
{nav items}

main

A <main> sibling following a .bf-nav-top and/or .bf-nav-side should get placed appropriately (margin and padding in order to avoid overlapping with top bar or side bar):

<header class="bf-nav bf-nav-top">{bf-nav-top}</header>
<main>main content goes here</main>
{bf-nav-top}
main content goes here
<nav class="bf-nav bf-nav-side">{bf-nav-side}</nav>
<main>main content goes here</main>
main content goes here
<header class="bf-nav bf-nav-top">{bf-nav-top}</header>
<nav class="bf-nav bf-nav-side">{bf-nav-side}</nav>
<main>main content goes here</main>
{bf-nav-top}
main content goes here

bf-nav-mobile

To get correct animation transitions and accessibility, use:

To disable main scrollbar while mobile nav is open, apply .bf-nav-mobile-is-open to <html> element.

<nav class="bf-nav bf-nav-mobile bf-nav-mobile-open bf-scrollbar-small">
  <div class="bf-nav-mobile-content">{nav items}</div>
</nav>
<div class="bf-nav-mobile-overlay"></div>

bf-nav-top-hide-for-mobile

Apply .bf-nav-top-hide-for-mobile to the top bar when scrolled down and mobile nav is not open.

Logo and app name

Replace the {logo} below with any custom logo (either <svg> or <img> should work)

<div class="bf-nav-logo">
  <div class="bf-nav-logo-graphic">{logo}</div>
  <div class="bf-nav-logo-name">App name</div>
</div>

bf-nav-item

Links placed in the sidebar should have text and an icon:

<a href="#path">
  <div class="bf-nav-item">
    <i class="bf-nav-item-icon fa-solid fa-user"></i>
    <span class="bf-nav-item-text">Profile</span>
  </div>
</a>

For top bar, you can have the same as in sidebar (above), or an icon alone:

<a href="#path" aria-label="Profile">
  <div class="bf-nav-item bf-nav-item-icon-only">
    <i class="bf-nav-item-icon fa-solid fa-user"></i>
  </div>
</a>

For direct actions (like opening a dropdown menu), use <button type="button"> instead of <a>.

Skip to main button

Give the <main> element an ID and link to it with an <a> styled as a small button. Place the button as the first content of the page to allow keyboard users to skip the menu items when tabbing through the page.

.bf-hide-until-focus lets it stay out of the way until it gets focused.

<a href="#mainContent" class="bf-hide-until-focus bf-button bf-button-small">
  Skip to main content
</a>
<main id="mainContent">main content goes here</main>

Responsive menu

In order to show mobile menu for screens smaller than 1600px and sidebar for wider, you can use to-xl and from-xl class names. For instance:

<header class="bf-nav bf-nav-top">
  <!-- bf-nav-mobile-toggle button visible up to 1600px -->
  <button
    type="button"
    class="bf-nav-mobile-toggle to-xl"
    aria-label="Open mobile nav"
  >
    <div class="bf-nav-item bf-nav-item-icon-only">
      <i class="bf-nav-item-icon fa-solid fa-bars"></i>
    </div>
  </button>
  {rest of bf-nav-top always visible}
</header>
<nav class="bf-nav bf-nav-side from-xl">{bf-nav-side visible from 1600px}</nav>
<nav class="bf-nav bf-nav-mobile to-xl">
  {bf-nav-mobile visible up to 1600px, same for overlay below}
</nav>
<div class="bf-nav-mobile-overlay to-xl"></div>
<main>main content</main>
{rest of bf-nav-top always visible}
main content

All together now

<header class="bf-nav bf-nav-top">
  <button
    type="button"
    class="bf-nav-mobile-toggle to-xl"
    aria-label="Open mobile nav"
    onclick="
      mobileNav.classList.toggle('bf-nav-mobile-open');
      mobileNav.classList.toggle('bf-nav-mobile-close');
    "
  >
    <div class="bf-nav-item bf-nav-item-icon-only">
      <i class="bf-nav-item-icon fa-solid fa-bars"></i>
    </div>
  </button>
  <div class="bf-nav-top-logo">
    <div class="bf-nav-logo">
      <div class="bf-nav-logo-graphic">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 1 32 33"
          role="img"
          class="bf-it-logo"
          aria-labelledby="itLogoSvgTitle"
        >
          <title id="itLogoSvgTitle">Intility</title>
          <path
            d="M9.29751 7.47552C10.2702 7.47552 11.0588 6.6975 11.0588 5.73776C11.0588 4.77802 10.2702 4 9.29751 4C8.3248 4 7.53625 4.77802 7.53625 5.73776C7.53625 6.6975 8.3248 7.47552 9.29751 7.47552Z"
          />
          <path
            d="M23.6195 11.7061H20.963V8.60254H17.4212V11.7061H15.1443V14.5508H17.4212V18.8441C17.4212 23.6027 17.6237 24.6374 18.7621 26.0858C19.926 27.5343 21.1654 27.9997 23.9482 27.9997H26.2754V24.6895L24.5048 24.5862C21.4688 24.4312 20.963 23.474 20.963 17.9653V14.5513H26.2754V11.7066H23.619L23.6195 11.7061Z"
          />
          <path
            d="M5 11.6558V13.2122V14.7692H6.26247H7.52447V21.3844V28.0001H9.29183H11.0587V19.8279V11.6558H8.02936H5Z"
          />
        </svg>
      </div>
      <div class="bf-nav-logo-name">App name</div>
    </div>
  </div>
  <div class="bf-nav-top-content">
    <a href="#path" aria-label="Profile">
      <div class="bf-nav-item bf-nav-item-icon-only">
        <i class="bf-nav-item-icon fa-solid fa-user"></i>
      </div>
    </a>
  </div>
</header>
<nav class="bf-nav bf-nav-side from-xl">
  <div class="bf-nav-side-content-wrapper bf-scrollbar-small">
    <div class="bf-nav-side-content">
      <a href="#path">
        <div class="bf-nav-item">
          <i class="bf-nav-item-icon fa-solid fa-house"></i>
          <span class="bf-nav-item-text">Home</span>
        </div>
      </a>
    </div>
  </div>
</nav>
<nav class="bf-nav bf-nav-mobile bf-nav-mobile-close to-xl" id="mobileNav">
  <div class="bf-nav-mobile-content">
    <a href="#path">
      <div class="bf-nav-item">
        <i class="bf-nav-item-icon fa-solid fa-house"></i>
        <span class="bf-nav-item-text">Home</span>
      </div>
    </a>
  </div>
</nav>
<div class="bf-nav-mobile-overlay to-xl"></div>
<main>main content</main>
main content

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<header class="bf-nav bf-nav-top">
  <button
    type="button"
    class="bf-nav-mobile-toggle to-xl"
    aria-label="Open mobile nav"
    onclick="
      mobileNav.classList.toggle('bf-nav-mobile-open');
      mobileNav.classList.toggle('bf-nav-mobile-close');
    "
  >
    <div class="bf-nav-item bf-nav-item-icon-only">
      <i class="bf-nav-item-icon fa-solid fa-bars"></i>
    </div>
  </button>
  <div class="bf-nav-top-logo">
    <div class="bf-nav-logo">
      <div class="bf-nav-logo-graphic">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 1 32 33"
          role="img"
          class="bf-it-logo"
          aria-labelledby="itLogoSvgTitle"
        >
          <title id="itLogoSvgTitle">Intility</title>
          <path
            d="M9.29751 7.47552C10.2702 7.47552 11.0588 6.6975 11.0588 5.73776C11.0588 4.77802 10.2702 4 9.29751 4C8.3248 4 7.53625 4.77802 7.53625 5.73776C7.53625 6.6975 8.3248 7.47552 9.29751 7.47552Z"
          />
          <path
            d="M23.6195 11.7061H20.963V8.60254H17.4212V11.7061H15.1443V14.5508H17.4212V18.8441C17.4212 23.6027 17.6237 24.6374 18.7621 26.0858C19.926 27.5343 21.1654 27.9997 23.9482 27.9997H26.2754V24.6895L24.5048 24.5862C21.4688 24.4312 20.963 23.474 20.963 17.9653V14.5513H26.2754V11.7066H23.619L23.6195 11.7061Z"
          />
          <path
            d="M5 11.6558V13.2122V14.7692H6.26247H7.52447V21.3844V28.0001H9.29183H11.0587V19.8279V11.6558H8.02936H5Z"
          />
        </svg>
      </div>
      <div class="bf-nav-logo-name">App name</div>
    </div>
  </div>
  <div class="bf-nav-top-content">
    <a href="#path" aria-label="Profile">
      <div class="bf-nav-item bf-nav-item-icon-only">
        <i class="bf-nav-item-icon fa-solid fa-user"></i>
      </div>
    </a>
  </div>
</header>
<nav class="bf-nav bf-nav-side from-xl">
  <div class="bf-nav-side-content-wrapper bf-scrollbar-small">
    <div class="bf-nav-side-content">
      <a href="#path">
        <div class="bf-nav-item">
          <i class="bf-nav-item-icon fa-solid fa-house"></i>
          <span class="bf-nav-item-text">Home</span>
        </div>
      </a>
    </div>
  </div>
</nav>
<nav class="bf-nav bf-nav-mobile bf-nav-mobile-close to-xl" id="mobileNav">
  <div class="bf-nav-mobile-content">
    <a href="#path">
      <div class="bf-nav-item">
        <i class="bf-nav-item-icon fa-solid fa-house"></i>
        <span class="bf-nav-item-text">Home</span>
      </div>
    </a>
  </div>
</nav>
<div class="bf-nav-mobile-overlay to-xl"></div>
<main>main content</main>
Open on CodeSandboxOpen Sandbox