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

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

2. 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": "Option 1", "link": "#" }, { "label": "Option 2", "link": "#" }, { "label": "Option 3", "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="#">Option 1</a>
    </li>
    <li>
      <a href="#">Option 2</a>
    </li>
    <li>
      <a href="#">Option 3</a>
    </li>
  </ul>
</jcrafts-dropdown>

Configuration

{
  "options": [
    {
      "label": "Option 1",
      "link": "#"
    },
    {
      "label": "Option 2",
      "link": "#"
    },
    {
      "label": "Option 3",
      "link": "#"
    }
  ],
  "class": "jcrafts-dropdown",
  "id": "jcrafts-dropdown"
}