CSS reference - Bifrost

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

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>

Sandbox

Also see /css/nav

Build a fully responsive navigation menu

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

Topbar dropdown

Color mode picker

Sandbox