Navbar

Horizontal site navigation with a click-toggle dropdown by default and a <details>-driven mobile toggle. Zero JavaScript.

Live

<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 has-dropdown">
      <input id="nav-more" type="checkbox" class="navbar__dropdown-toggle" hidden>
      <label for="nav-more" class="navbar__link">More ▾</label>
      <ul class="navbar__dropdown">
        <li><a class="navbar__link" href="/explanation">Explanation</a></li>
        <li><a class="navbar__link" href="/reference">Reference</a></li>
      </ul>
    </li>
  </ul>
</nav>

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

<nav class="navbar" aria-label="Primary">
  <a class="navbar__brand" href="/">Krysalicss</a>
  <ul class="navbar__menu">
    <li class="navbar__item has-dropdown is-hoverable">
      <input id="nav-products" type="checkbox" class="navbar__dropdown-toggle" hidden>
      <label for="nav-products" class="navbar__link">Products ▾</label>
      <ul class="navbar__dropdown">
        <li><a class="navbar__link" href="#">Framework</a></li>
        <li><a class="navbar__link" href="#">Adapters</a></li>
      </ul>
    </li>
  </ul>
</nav>

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

<nav class="navbar is-primary" aria-label="Primary demo (primary)">
  <a class="navbar__brand" href="#">Krysalicss</a>
  <ul class="navbar__menu">
    <li class="navbar__item"><a class="navbar__link" href="#">Docs</a></li>
    <li class="navbar__item"><a class="navbar__link" href="#">Source</a></li>
  </ul>
</nav>

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

Markup

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

<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 has-dropdown">
      <input id="nav-more" type="checkbox" class="navbar__dropdown-toggle" hidden>
      <label for="nav-more" class="navbar__link">More ▾</label>
      <ul class="navbar__dropdown">
        <li><a class="navbar__link" href="/explanation">Explanation</a></li>
        <li><a class="navbar__link" href="/reference">Reference</a></li>
      </ul>
    </li>
  </ul>
</nav>

Add class="is-hoverable" next to has-dropdown to also reveal the panel on hover and focus-within (the legacy desktop behaviour). The toggle keeps working — hoverable is additive.

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

<nav class="navbar" aria-label="Primary">
  <a class="navbar__brand" href="/">Krysalicss</a>
  <ul class="navbar__menu">
    <li class="navbar__item has-dropdown is-hoverable">
      <input id="nav-products" type="checkbox" class="navbar__dropdown-toggle" hidden>
      <label for="nav-products" class="navbar__link">Products ▾</label>
      <ul class="navbar__dropdown">
        <li><a class="navbar__link" href="#">Framework</a></li>
        <li><a class="navbar__link" href="#">Adapters</a></li>
      </ul>
    </li>
  </ul>
</nav>

Mobile pattern

Below $mobile-breakpoint, the framework hides the inline menu and exposes a .navbar__toggle slot. Wrap the menu in <details> so the <summary> acts as a JS-free open/close trigger.

<nav class="navbar" aria-label="Primary">
  <a class="navbar__brand" href="/">Krysalicss</a>
  <details class="navbar__toggle">
    <summary>Menu</summary>
    <ul class="navbar__menu">
      <li class="navbar__item"><a class="navbar__link" href="/docs">Docs</a></li>
      <li class="navbar__item"><a class="navbar__link" href="/about">About</a></li>
    </ul>
  </details>
</nav>

Wiring with consumer JS

When $controls includes 'js' (the default), the framework also reveals the dropdown for any .has-dropdown item containing [aria-expanded="true"]. Swap the hidden-checkbox markup for a <button aria-expanded> trigger and have your JS flip the attribute:

<nav class="navbar" aria-label="Primary">
  <ul class="navbar__menu">
    <li class="navbar__item has-dropdown">
      <button class="navbar__link" type="button" aria-expanded="false" aria-controls="nav-more-panel">
        More ▾
      </button>
      <ul id="nav-more-panel" class="navbar__dropdown">
        <li><a class="navbar__link" href="#">Explanation</a></li>
      </ul>
    </li>
  </ul>
</nav>

This path lets you add focus management, click-outside dismissal, and Esc-to-close — none of which the JS-free path provides.

Behaviour matrix

See Design philosophy for the JS-free rationale.

Keyboard accessibility

• The CSS-only dropdown reveals on click, hover (when .is-hoverable is set), and focus-within the parent .has-dropdown item. Tabbing into the hidden checkbox or any link inside the panel keeps it open.
• A fully keyboard-complete dropdown (arrow-key navigation between items, Escape to dismiss, roving tabindex, outside-click closure) requires JS that toggles aria-expanded on the trigger and manages focus inside the menu. 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. Wiring the JS — attribute toggle, focus management, dismissal — is the consumer's responsibility; see the Wiring with consumer JS snippet above.

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/navbar' with (
  $mobile-breakpoint: desktop,
  $gap: 1.5rem,
);

Tokens consumed