Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.0.0
@intility/bifrost-react@6.1.1
@intility/bifrost-react-datepicker@6.0.1
@intility/bifrost-react-select@6.0.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>

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

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

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

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

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

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

<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>
    Profile
  </div>
</a>

<a href="#path">
  <div class="bf-nav-item">
    <i class="bf-nav-item-icon fa-solid fa-user"></i>
    Profile
  </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>

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

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

<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="24"
          height="25"
          viewBox="0 0 24 25"
          role="img"
          class="bf-it-logo"
          aria-labelledby="itLogoSvgTitle"
        >
          <title id="itLogoSvgTitle">Intility</title>
          <path
            d="M6.36516 2.97081C5.83471 3.49389 5.77787 3.84261 6.09994 4.48192C6.40305 5.06312 6.63039 5.19873 7.33136 5.19873C8.08915 5.19873 8.54383 4.67565 8.54383 3.78449C8.54383 2.5446 7.23663 2.06027 6.36516 2.97081Z"
          />
          <path
            d="M13.2822 7.13248V8.29487H12.4297H11.5771V9.3604V10.4259H12.4297H13.2822V13.6419C13.2822 17.2066 13.4338 17.9815 14.2863 19.0664C15.1577 20.1513 16.086 20.5 18.17 20.5H19.9129V19.2601V18.0202L18.5868 17.9427C16.3134 17.8265 15.9345 17.1097 15.9345 12.9832V10.4259H17.9237H19.9129V9.3604V8.29487H17.9237H15.9345V7.13248V5.97009H14.6083H13.2822V7.13248Z"
          />
          <path
            d="M4 9.45726V10.6197H4.94724H5.89449V15.5598V20.5H7.22063H8.54677V14.3974V8.29487H6.27339H4V9.45726Z"
          />
        </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>
          Home
        </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>
        Home
      </div>
    </a>
  </div>
</nav>
<div class="bf-nav-mobile-overlay to-xl"></div>
<main>main content</main>

<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="24"
          height="25"
          viewBox="0 0 24 25"
          role="img"
          class="bf-it-logo"
          aria-labelledby="itLogoSvgTitle"
        >
          <title id="itLogoSvgTitle">Intility</title>
          <path
            d="M6.36516 2.97081C5.83471 3.49389 5.77787 3.84261 6.09994 4.48192C6.40305 5.06312 6.63039 5.19873 7.33136 5.19873C8.08915 5.19873 8.54383 4.67565 8.54383 3.78449C8.54383 2.5446 7.23663 2.06027 6.36516 2.97081Z"
          />
          <path
            d="M13.2822 7.13248V8.29487H12.4297H11.5771V9.3604V10.4259H12.4297H13.2822V13.6419C13.2822 17.2066 13.4338 17.9815 14.2863 19.0664C15.1577 20.1513 16.086 20.5 18.17 20.5H19.9129V19.2601V18.0202L18.5868 17.9427C16.3134 17.8265 15.9345 17.1097 15.9345 12.9832V10.4259H17.9237H19.9129V9.3604V8.29487H17.9237H15.9345V7.13248V5.97009H14.6083H13.2822V7.13248Z"
          />
          <path
            d="M4 9.45726V10.6197H4.94724H5.89449V15.5598V20.5H7.22063H8.54677V14.3974V8.29487H6.27339H4V9.45726Z"
          />
        </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>
          Home
        </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>
        Home
      </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="24"
          height="25"
          viewBox="0 0 24 25"
          role="img"
          class="bf-it-logo"
          aria-labelledby="itLogoSvgTitle"
        >
          <title id="itLogoSvgTitle">Intility</title>
          <path
            d="M6.36516 2.97081C5.83471 3.49389 5.77787 3.84261 6.09994 4.48192C6.40305 5.06312 6.63039 5.19873 7.33136 5.19873C8.08915 5.19873 8.54383 4.67565 8.54383 3.78449C8.54383 2.5446 7.23663 2.06027 6.36516 2.97081Z"
          />
          <path
            d="M13.2822 7.13248V8.29487H12.4297H11.5771V9.3604V10.4259H12.4297H13.2822V13.6419C13.2822 17.2066 13.4338 17.9815 14.2863 19.0664C15.1577 20.1513 16.086 20.5 18.17 20.5H19.9129V19.2601V18.0202L18.5868 17.9427C16.3134 17.8265 15.9345 17.1097 15.9345 12.9832V10.4259H17.9237H19.9129V9.3604V8.29487H17.9237H15.9345V7.13248V5.97009H14.6083H13.2822V7.13248Z"
          />
          <path
            d="M4 9.45726V10.6197H4.94724H5.89449V15.5598V20.5H7.22063H8.54677V14.3974V8.29487H6.27339H4V9.45726Z"
          />
        </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>
          Home
        </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>
        Home
      </div>
    </a>
  </div>
</nav>
<div class="bf-nav-mobile-overlay to-xl"></div>
<main>main content</main>
Open on CodeSandboxOpen Sandbox