JCrafts Dropdown

What it does

The .jcrafts-dropdown component renders a compact trigger that reveals a list of navigational or selection options. It keeps the UI clean by hiding the list until it’s needed, and it gracefully handles longer option lists (like a list of states) without overwhelming the surrounding layout.

Key Features

Collapsible menu powered by the jcrafts-dropdown wrapper to keep the interface tidy.
Contextual option lists that can be swapped for regions, categories, or any ordered links.
Accessible focus states for keyboard users and hover feedback for pointer devices.
Lightweight styling that responds to surrounding tokens and can be themed through CSS variables.

How to use

Basic usage

<div class="jcrafts-dropdown">
  <button type="button">Select a region</button>
  <ul>
    <li><a href="#">Alabama</a></li>
    <li><a href="#">Alaska</a></li>
    <!-- ... -->
  </ul>
</div>

Customization tips

Override variables directly on the dropdown instance to adjust spacing or colors:

<div class="jcrafts-dropdown" style="--dropdown-bg: #111; --dropdown-spacing: 0.75rem;">
  ...
</div>

Swap out the ul > li structure for cards or grouped headings if your layout needs more context, and use modifier classes (e.g., .jcrafts-dropdown--wide) to adjust width via your pattern library tokens.

How it works

The trigger button toggles the visibility of the associated <ul> via utility JS or aria-expanded states that your design system provides.
Options are rendered as standard list items so that assistive technologies read them in order, and focus rings are controlled by the shared focus mixin.
Responsive spacing is derived from tokens such as --dropdown-spacing and --dropdown-border-radius, making it simple to adapt to new breakpoints without rewriting markup.

Example

<div class="jcrafts-dropdown">
  <button type="button">Choose a state</button>
  <ul>
    <li><a href="#">Texas</a></li>
    <li><a href="#">Washington</a></li>
    <li><a href="#">California</a></li>
  </ul>
</div>

Result:

A concise button that exposes a scrollable, accessible menu.
Consistent spacing and hover visuals courtesy of shared dropdown tokens.

Reference

SCSS partials: _jcrafts-dropdown.scss, _dropdown-menu.scss
Mixins: dropdown-toggle, focus-ring, responsive-spacing
Tokens: --dropdown-bg, --dropdown-spacing, --dropdown-border-radius

Tip: Pair .jcrafts-dropdown with the grid or stack helpers to align it with other controls, and keep option labels short for better readability on smaller screens.

HTML Code (Demo)

<script type="application/json" class="joomla-script-options loaded">
{ "jcrafts-dropdown-options": [ { "label": "Alabama", "link": "#" }, { "label": "Alaska", "link": "#" }, { "label": "Arizona", "link": "#" }, { "label": "Arkansas", "link": "#" }, { "label": "California", "link": "#" }, { "label": "Colorado", "link": "#" }, { "label": "Connecticut", "link": "#" }, { "label": "Delaware", "link": "#" }, { "label": "Florida", "link": "#" }, { "label": "Georgia", "link": "#" }, { "label": "Hawaii", "link": "#" }, { "label": "Idaho", "link": "#" }, { "label": "Illinois", "link": "#" }, { "label": "Indiana", "link": "#" }, { "label": "Iowa", "link": "#" }, { "label": "Kansas", "link": "#" }, { "label": "Kentucky", "link": "#" }, { "label": "Louisiana", "link": "#" }, { "label": "Maine", "link": "#" }, { "label": "Maryland", "link": "#" }, { "label": "Massachusetts", "link": "#" }, { "label": "Michigan", "link": "#" }, { "label": "Minnesota", "link": "#" }, { "label": "Mississippi", "link": "#" }, { "label": "Missouri", "link": "#" }, { "label": "Montana", "link": "#" }, { "label": "Nebraska", "link": "#" }, { "label": "Nevada", "link": "#" }, { "label": "New Hampshire", "link": "#" }, { "label": "New Jersey", "link": "#" }, { "label": "New Mexico", "link": "#" }, { "label": "New York", "link": "#" }, { "label": "North Carolina", "link": "#" }, { "label": "North Dakota", "link": "#" }, { "label": "Ohio", "link": "#" }, { "label": "Oklahoma", "link": "#" }, { "label": "Oregon", "link": "#" }, { "label": "Pennsylvania", "link": "#" }, { "label": "Rhode Island", "link": "#" }, { "label": "South Carolina", "link": "#" }, { "label": "South Dakota", "link": "#" }, { "label": "Tennessee", "link": "#" }, { "label": "Texas", "link": "#" }, { "label": "Utah", "link": "#" }, { "label": "Vermont", "link": "#" }, { "label": "Virginia", "link": "#" }, { "label": "Washington", "link": "#" }, { "label": "West Virginia", "link": "#" }, { "label": "Wisconsin", "link": "#" }, { "label": "Wyoming", "link": "#" } ] }</script>
<jcrafts-dropdown id="jcrafts-dropdown" class="jcrafts-dropdown">
  <input type="text" value placeholder="Type to filter" class="chosen-value">
  <ul class="value-list">
    <li>
      <a href="#">Alabama</a>
    </li>
    <li>
      <a href="#">Alaska</a>
    </li>
    <li>
      <a href="#">Arizona</a>
    </li>
    <li>
      <a href="#">Arkansas</a>
    </li>
    <li>
      <a href="#">California</a>
    </li>
    <li>
      <a href="#">Colorado</a>
    </li>
    <li>
      <a href="#">Connecticut</a>
    </li>
    <li>
      <a href="#">Delaware</a>
    </li>
    <li>
      <a href="#">Florida</a>
    </li>
    <li>
      <a href="#">Georgia</a>
    </li>
    <li>
      <a href="#">Hawaii</a>
    </li>
    <li>
      <a href="#">Idaho</a>
    </li>
    <li>
      <a href="#">Illinois</a>
    </li>
    <li>
      <a href="#">Indiana</a>
    </li>
    <li>
      <a href="#">Iowa</a>
    </li>
    <li>
      <a href="#">Kansas</a>
    </li>
    <li>
      <a href="#">Kentucky</a>
    </li>
    <li>
      <a href="#">Louisiana</a>
    </li>
    <li>
      <a href="#">Maine</a>
    </li>
    <li>
      <a href="#">Maryland</a>
    </li>
    <li>
      <a href="#">Massachusetts</a>
    </li>
    <li>
      <a href="#">Michigan</a>
    </li>
    <li>
      <a href="#">Minnesota</a>
    </li>
    <li>
      <a href="#">Mississippi</a>
    </li>
    <li>
      <a href="#">Missouri</a>
    </li>
    <li>
      <a href="#">Montana</a>
    </li>
    <li>
      <a href="#">Nebraska</a>
    </li>
    <li>
      <a href="#">Nevada</a>
    </li>
    <li>
      <a href="#">New Hampshire</a>
    </li>
    <li>
      <a href="#">New Jersey</a>
    </li>
    <li>
      <a href="#">New Mexico</a>
    </li>
    <li>
      <a href="#">New York</a>
    </li>
    <li>
      <a href="#">North Carolina</a>
    </li>
    <li>
      <a href="#">North Dakota</a>
    </li>
    <li>
      <a href="#">Ohio</a>
    </li>
    <li>
      <a href="#">Oklahoma</a>
    </li>
    <li>
      <a href="#">Oregon</a>
    </li>
    <li>
      <a href="#">Pennsylvania</a>
    </li>
    <li>
      <a href="#">Rhode Island</a>
    </li>
    <li>
      <a href="#">South Carolina</a>
    </li>
    <li>
      <a href="#">South Dakota</a>
    </li>
    <li>
      <a href="#">Tennessee</a>
    </li>
    <li>
      <a href="#">Texas</a>
    </li>
    <li>
      <a href="#">Utah</a>
    </li>
    <li>
      <a href="#">Vermont</a>
    </li>
    <li>
      <a href="#">Virginia</a>
    </li>
    <li>
      <a href="#">Washington</a>
    </li>
    <li>
      <a href="#">West Virginia</a>
    </li>
    <li>
      <a href="#">Wisconsin</a>
    </li>
    <li>
      <a href="#">Wyoming</a>
    </li>
  </ul>
</jcrafts-dropdown>

Configuration

Component Config: Interactive/jcrafts-dropdown/jcrafts-dropdown.config.js

{
  "options": [
    {
      "label": "Alabama",
      "link": "#"
    },
    {
      "label": "Alaska",
      "link": "#"
    },
    {
      "label": "Arizona",
      "link": "#"
    },
    {
      "label": "Arkansas",
      "link": "#"
    },
    {
      "label": "California",
      "link": "#"
    },
    {
      "label": "Colorado",
      "link": "#"
    },
    {
      "label": "Connecticut",
      "link": "#"
    },
    {
      "label": "Delaware",
      "link": "#"
    },
    {
      "label": "Florida",
      "link": "#"
    },
    {
      "label": "Georgia",
      "link": "#"
    },
    {
      "label": "Hawaii",
      "link": "#"
    },
    {
      "label": "Idaho",
      "link": "#"
    },
    {
      "label": "Illinois",
      "link": "#"
    },
    {
      "label": "Indiana",
      "link": "#"
    },
    {
      "label": "Iowa",
      "link": "#"
    },
    {
      "label": "Kansas",
      "link": "#"
    },
    {
      "label": "Kentucky",
      "link": "#"
    },
    {
      "label": "Louisiana",
      "link": "#"
    },
    {
      "label": "Maine",
      "link": "#"
    },
    {
      "label": "Maryland",
      "link": "#"
    },
    {
      "label": "Massachusetts",
      "link": "#"
    },
    {
      "label": "Michigan",
      "link": "#"
    },
    {
      "label": "Minnesota",
      "link": "#"
    },
    {
      "label": "Mississippi",
      "link": "#"
    },
    {
      "label": "Missouri",
      "link": "#"
    },
    {
      "label": "Montana",
      "link": "#"
    },
    {
      "label": "Nebraska",
      "link": "#"
    },
    {
      "label": "Nevada",
      "link": "#"
    },
    {
      "label": "New Hampshire",
      "link": "#"
    },
    {
      "label": "New Jersey",
      "link": "#"
    },
    {
      "label": "New Mexico",
      "link": "#"
    },
    {
      "label": "New York",
      "link": "#"
    },
    {
      "label": "North Carolina",
      "link": "#"
    },
    {
      "label": "North Dakota",
      "link": "#"
    },
    {
      "label": "Ohio",
      "link": "#"
    },
    {
      "label": "Oklahoma",
      "link": "#"
    },
    {
      "label": "Oregon",
      "link": "#"
    },
    {
      "label": "Pennsylvania",
      "link": "#"
    },
    {
      "label": "Rhode Island",
      "link": "#"
    },
    {
      "label": "South Carolina",
      "link": "#"
    },
    {
      "label": "South Dakota",
      "link": "#"
    },
    {
      "label": "Tennessee",
      "link": "#"
    },
    {
      "label": "Texas",
      "link": "#"
    },
    {
      "label": "Utah",
      "link": "#"
    },
    {
      "label": "Vermont",
      "link": "#"
    },
    {
      "label": "Virginia",
      "link": "#"
    },
    {
      "label": "Washington",
      "link": "#"
    },
    {
      "label": "West Virginia",
      "link": "#"
    },
    {
      "label": "Wisconsin",
      "link": "#"
    },
    {
      "label": "Wyoming",
      "link": "#"
    }
  ],
  "class": "jcrafts-dropdown",
  "id": "jcrafts-dropdown"
}