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
/
/
/
CSS Dropdown

CSS Dropdown

Also see /react/dropdown
React component

Topbar dropdown

Using the browser-native Popover Web API, we don't have to worry about click/touch/keypress event handlers, or z-index.

The .bf-dropdown class only styles the popover container, and does not help with positioning.

Unfortunately, CSS Anchor Positioning is not supported by Firefox or Safari yet, but for dropdowns in topbar it's probably sufficient to place it manually with top and right.

<style>
  .topbar-popover {
    top: calc(var(--bf-nav-top-height) + 8px);
    right: 8px; /* or whatever makes sense for your case */
  }
</style>

<!-- demo button, yours would be placed inside .bf-nav-top-content
 (see Nav docs or sandbox below) -->
<button popovertarget="topbardropdown" class="bf-button">Toggle popover</button>

<!-- popovers can technically be placed anywhere in the DOM.
A sibling to the <button> is not a bad idea. -->
<div popover id="topbardropdown" class="bf-dropdown topbar-popover">
  Hello, world!
</div>
Hello, world!

For anchored positioning you can use a JS library like https://floating-ui.com/ until CSS anchor positioning is better supported.

Color mode picker

Also see /css/radio
Radio buttons
 
<style>
  .color-mode-picker {
    top: calc(var(--bf-nav-top-height) + 8px);
    right: 8px;
  }
</style>

<button popovertarget="colormodedropdown" class="bf-button">
  Toggle color mode picker
</button>

<div popover id="colormodedropdown" class="bf-dropdown color-mode-picker">
  <div class="bf-nav-group-dropout-content">
    <section>
      <div class="bf-nav-header">Color mode</div>
      <form id="colormodeform">
        <label class="bf-checkbox">
          <input type="radio" name="colormode" value="light" />
          <span class="bf-checkbox-icon">
            <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
            <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
          </span>
          Light
        </label>
        <label class="bf-checkbox">
          <input type="radio" name="colormode" value="dark" />
          <span class="bf-checkbox-icon">
            <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
            <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
          </span>
          Dark
        </label>
        <label class="bf-checkbox">
          <input type="radio" name="colormode" value="system" checked />
          <span class="bf-checkbox-icon">
            <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
            <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
          </span>
          System
        </label>
      </form>
    </section>
  </div>
</div>
Color mode

Sandbox

Also see /css/nav
Build a fully responsive navigation menu
 
<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">
  <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">
    <!-- dropdown toggle button -->
    <button
      popovertarget="colormodedropdown"
      aria-label="Toggle color mode picker"
    >
      <div class="bf-nav-item bf-nav-item-icon-only">
        <i class="bf-nav-item-icon fa-solid fa-circle-half-stroke"></i>
      </div>
    </button>
    <!-- dropdown content, also see styles.css -->
    <div popover id="colormodedropdown" class="bf-dropdown color-mode-picker">
      <div class="bf-nav-group-dropout-content">
        <section>
          <div class="bf-nav-header">Color mode</div>
          <form id="colormodeform">
            <label class="bf-checkbox">
              <input
                type="radio"
                name="colormode"
                onchange="applyColorMode('light')"
              />
              <span class="bf-checkbox-icon">
                <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
                <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
              </span>
              Light
            </label>
            <label class="bf-checkbox">
              <input
                type="radio"
                name="colormode"
                onchange="applyColorMode('dark')"
              />
              <span class="bf-checkbox-icon">
                <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
                <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
              </span>
              Dark
            </label>
            <label class="bf-checkbox">
              <input
                type="radio"
                name="colormode"
                onchange="applyColorMode('system')"
                checked
              />
              <span class="bf-checkbox-icon">
                <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i>
                <i class="bf-checkbox-unchecked fa-regular fa-circle"></i>
              </span>
              System
            </label>
          </form>
        </section>
      </div>
    </div>
  </div>
</header>
<main>
  <div class="bf-page-padding">
    Click the top-right icon to toggle color mode picker dropdown
  </div>
</main>

<script>
  function applyColorMode(mode) {
    document.documentElement.classList.toggle("bf-lightmode", mode === "light");
    document.documentElement.classList.toggle("bf-darkmode", mode === "dark");
  }
</script>
Open on CodeSandboxOpen Sandbox