Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Dropdown & listbox
Collections

Dropdown & listbox

Dropdown & listbox patterns built with StyloftCSS and native HTML.

CSS only2 examplesKeyboard friendly HTML

Dropdown

A disclosure containing ordinary navigation links. Use Tab, Enter and Space; this does not claim the ARIA menu arrow-key model.

Live preview
Browse library ⌄
View HTML / PlaygroundHTML source
example.htmlHTML
<details class="sl-dropdown">
  <summary class="sl-btn">Browse library ⌄</summary>
  <nav class="sl-dropdown__items" aria-label="Library destinations">
    <a href="/components/">All components</a><a href="/layouts/">Layout patterns</a
    ><a href="/themes/">Theme gallery</a>
  </nav>
</details>
HTML source · enable JavaScript for the playground7 lines · UTF-8

ListBox

A styled native listbox with real keyboard and multiple-selection behavior.

Live preview

Use Ctrl/Command or Shift for multiple selection.

View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-field">
  <label class="sl-label" for="ref-listbox">Select frameworks</label
  ><select class="sl-listbox" id="ref-listbox" multiple size="4">
    <option>StyloftCSS</option>
    <option>Plain CSS</option>
    <option>Astro</option>
    <option>HTML</option>
  </select>
  <p class="sl-help">Use Ctrl/Command or Shift for multiple selection.</p>
</div>
HTML source · enable JavaScript for the playground10 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.