Dropdown

Reusable disclosure panel: a trigger and a menu, revealed on click, hover (opt-in), or aria-expanded="true". Hidden-checkbox pattern by default, zero JavaScript. Compose inside a navbar, on a card, or anywhere a panel needs to anchor to a control.

Live

<div class="dropdown">
  <input id="dd-1" type="checkbox" class="dropdown__toggle" hidden>
  <label for="dd-1" class="dropdown__trigger">Menu</label>
  <ul class="dropdown__menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Sign out</a></li>
  </ul>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-dropdown')
);

<div class="dropdown is-hoverable">
  <input id="dd-h" type="checkbox" class="dropdown__toggle" hidden>
  <label for="dd-h" class="dropdown__trigger">Products</label>
  <ul class="dropdown__menu">
    <li><a href="#">Framework</a></li>
    <li><a href="#">Adapters</a></li>
  </ul>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-dropdown')
);

<div class="dropdown is-right">
  <input id="dd-r" type="checkbox" class="dropdown__toggle" hidden>
  <label for="dd-r" class="dropdown__trigger">Account</label>
  <ul class="dropdown__menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Sign out</a></li>
  </ul>
</div>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-dropdown')
);

<nav class="navbar" aria-label="Primary">
  <a class="navbar__brand" href="/">Krysalicss</a>
  <ul class="navbar__menu">
    <li class="navbar__item">
      <a class="navbar__link" href="/docs">Docs</a>
    </li>
    <li class="navbar__item">
      <div class="dropdown">
        <input id="nav-more" type="checkbox" class="dropdown__toggle" hidden>
        <label for="nav-more" class="dropdown__trigger navbar__link">More</label>
        <ul class="dropdown__menu">
          <li><a href="/explanation">Explanation</a></li>
          <li><a href="/reference">Reference</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'module-dropdown')
);

Markup

The trigger automatically paints a CSS chevron ::after its label — no glyph in the markup, no font dependency. The chevron flips upward when the .is-up modifier is set. To suppress it (e.g. the label already carries an icon), set $arrow: false at compile time.

The default JS-free markup pairs a hidden <input type="checkbox"> with a <label for>: clicking the label toggles the checkbox, and :has(.dropdown__toggle:checked) on the parent reveals the menu. The input is visually clipped but stays focusable so keyboard users can Tab to it and toggle with Space.

<div class="dropdown">
  <input id="dd-1" type="checkbox" class="dropdown__toggle" hidden>
  <label for="dd-1" class="dropdown__trigger">Menu</label>
  <ul class="dropdown__menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Sign out</a></li>
  </ul>
</div>

Add .is-hoverable to the root to also reveal the panel on hover and focus-within. The toggle keeps working — the modifier is additive.

Renamed from .hoverable in this release to align with the framework's .is-* state-prefix convention.

<div class="dropdown is-hoverable">
  <input id="dd-h" type="checkbox" class="dropdown__toggle" hidden>
  <label for="dd-h" class="dropdown__trigger">Products</label>
  <ul class="dropdown__menu">
    <li><a href="#">Framework</a></li>
    <li><a href="#">Adapters</a></li>
  </ul>
</div>

Add .is-right to anchor the panel to the trigger's inline-end edge instead of the inline-start (use near viewport edges). .is-up opens the panel above the trigger.

Composing inside a navbar

module/dropdown slots cleanly into a navbar__item. The navbar flattens the panel (drops the absolute position and shadow) below $mobile-breakpoint so the menu stacks with the rest of the items.

<nav class="navbar" aria-label="Primary">
  <a class="navbar__brand" href="/">Krysalicss</a>
  <ul class="navbar__menu">
    <li class="navbar__item">
      <a class="navbar__link" href="/docs">Docs</a>
    </li>
    <li class="navbar__item">
      <div class="dropdown">
        <input id="nav-more" type="checkbox" class="dropdown__toggle" hidden>
        <label for="nav-more" class="dropdown__trigger navbar__link">More</label>
        <ul class="dropdown__menu">
          <li><a href="/explanation">Explanation</a></li>
          <li><a href="/reference">Reference</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Modes

The component supports two reveal modes, both emitted by default. Pick either, both, or strip one at compile time via $controls.

CSS-only mode

Hidden <input type="checkbox" class="dropdown__toggle"> paired with a <label for> trigger. Clicking the label toggles the checkbox, and :has(.dropdown__toggle:checked) reveals the menu. Zero JavaScript. The .is-hoverable modifier is part of this mode — it layers :hover / :focus-within reveal on top.

To ship the CSS branch only and strip the JS hooks from the compiled output:

@use '@adnap/krysalicss/module/dropdown' with (
$controls: ('css'),
);

JS mode

When $controls includes 'js', the framework also reveals the menu for any .dropdown containing [aria-expanded="true"] or carrying .is-active on the root. Two hooks, pick the one that fits your state model:

• aria-expanded on the trigger — accessibility-correct; screen readers announce the open/closed state.
• .is-active on the root — Bulma-compatible class-toggle pattern; cheap to wire from a framework that prefers class-state.

<div class="dropdown">
  <button class="dropdown__trigger" type="button" aria-expanded="false" aria-controls="dd-aria-panel">
    Menu
  </button>
  <ul id="dd-aria-panel" class="dropdown__menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Sign out</a></li>
  </ul>
</div>

<div class="dropdown is-active">
  <button class="dropdown__trigger" type="button">Menu</button>
  <ul class="dropdown__menu">
    <li><a href="#">Profile</a></li>
    <li><a href="#">Sign out</a></li>
  </ul>
</div>

To ship the JS branch only and strip the hidden-checkbox CSS reveal:

@use '@adnap/krysalicss/module/dropdown' with (
$controls: ('js'),
);

Either JS hook lets consumer code add focus management, click-outside dismissal, and Esc-to-close — none of which the CSS-only path provides.

Reveal matrix

Keyboard accessibility

• The JS-free dropdown reveals on click and (with .is-hoverable) hover / focus-within. Tabbing into the hidden checkbox or any link inside the panel keeps it open.
• A fully keyboard-complete dropdown (arrow-key navigation, Esc to dismiss, roving tabindex, outside-click closure) requires JS that toggles aria-expanded and manages focus. CSS cannot move focus or listen for keys.
• The framework ships both hooks. $controls defaults to ('css', 'js') so the same SCSS emits a CSS-only reveal and a :has([aria-expanded='true']) reveal driven by your script.

Variables

See Combinations and light variants for $enable-light, $default-combination, and $controls — cross-cutting plumbing common to every theme-aware component.

Override example

@use '@adnap/krysalicss/module/dropdown' with (
  $min-width: 16rem,
  $offset: 4px,
);

Tokens consumed