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

<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="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">
    <!-- 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 Sandbox

Topbar dropdown

Color mode picker

Sandbox