Dropdown Component

Live Examples

Usage Guidelines

To implement a Dropdown component, use the following semantic HTML structure. The data-component="dropdown" attribute on the parent container enables Axiom's JavaScript to initialize the component. The JavaScript will automatically assign unique IDs to the toggle button and menu for accessibility purposes.

HTML Structure

<!-- Basic Dropdown -->
<div data-component="dropdown">
<button class="button primary dropdown-toggle" aria-expanded="false" aria-haspopup="true" aria-controls="[auto-generated-id]">
    <span>Dropdown Menu</span>
</button>
<ul class="dropdown menu" role="menu" aria-labelledby="[auto-generated-id]" aria-hidden="true">
    <li><a href="#" role="menuitem">Action</a></li>
    <li><a href="#" role="menuitem">Another action</a></li>
    <li><a href="#" role="menuitem">Something else here</a></li>
    <li class="divider" role="separator"></li>
    <li><a href="#" role="menuitem">Separated link</a></li>
</ul>
</div>

<!-- Dropup Variation -->
<div data-component="dropdown" class="dropup">
<button class="button secondary dropdown-toggle" aria-expanded="false" aria-haspopup="true" aria-controls="[auto-generated-id]">
    <span>Dropup Menu</span>
</button>
<ul class="dropdown menu" role="menu" aria-labelledby="[auto-generated-id]" aria-hidden="true">
    <li><a href="#" role="menuitem">Action</a></li>
    <li><a href="#" role="menuitem">Another action</a></li>
    <li><a href="#" role="menuitem">Something else here</a></li>
    <li class="divider" role="separator"></li>
    <li><a href="#" role="menuitem">Separated link</a></li>
</ul>
</div>

<!-- Right-Aligned Dropdown -->
<div data-component="dropdown">
<button class="button tertiary dropdown-toggle" aria-expanded="false" aria-haspopup="true" aria-controls="[auto-generated-id]">
    <span>Right-Aligned</span>
</button>
<ul class="dropdown menu menu-right" role="menu" aria-labelledby="[auto-generated-id]" aria-hidden="true">
    <li><a href="#" role="menuitem">Action</a></li>
    <li><a href="#" role="menuitem">Another action</a></li>
    <li><a href="#" role="menuitem">Something else here</a></li>
    <li class="divider" role="separator"></li>
    <li><a href="#" role="menuitem">Separated link</a></li>
</ul>
</div>

For variations like "Dropup" or "Right-Aligned", apply the respective classes (.dropup on the main container, .dropdown menu menu-right on the menu list).

JavaScript Integration

The core functionality of the Dropdown (toggling visibility, handling outside clicks, and escape key dismissal) is managed by Axiom01's JavaScript. The data-component="dropdown" attribute triggers the loading and initialization of js/components/dropdown.js.

The JavaScript automatically toggles the .is-open class on the main [data-component="dropdown"] container, updates the aria-expanded attribute on the toggle button, and manages the aria-hidden attribute on the menu.

Additionally, the component now returns a destroy() method. This method cleans up event listeners and resets ARIA attributes, preventing memory leaks when the dropdown is dynamically removed from the DOM or when a page transition occurs in a Single Page Application (SPA).

Accessibility

Axiom01's Dropdown component is built with accessibility in mind:

• Semantic HTML: Uses <button> for the toggle and <ul> with <li> for menu items.
• ARIA Attributes:
  • aria-haspopup="true" on the toggle button informs assistive technologies that it controls a popup menu.
  • aria-expanded="true|false" on the toggle button indicates the current state to screen readers.
  • aria-controls="[auto-generated-id]" links the toggle button to its controlled menu.
  • role="menu" on the <ul> identifies it as a menu.
  • aria-labelledby="[auto-generated-id]" links the menu to its controlling button.
  • aria-hidden="true|false" on the menu indicates its visibility state to assistive technologies.
  • role="menuitem" on the <a> elements within the menu identifies them as selectable items.
  • role="separator" on the .divider element.
• Keyboard Navigation:
  • Users can navigate to the dropdown toggle using the Tab key.
  • Pressing Space or Enter on the toggle opens/closes the menu.
  • The Escape key closes the menu and returns focus to the toggle button.
  • Clicking outside the dropdown also closes it.
  • (Future Enhancement): Once open, Up/Down arrow keys will navigate between menu items.
• Focus Management: Focus is managed to ensure a smooth and predictable user experience, especially when closing the dropdown.

Customization

You can customize the Dropdown's appearance by overriding the following CSS variables in your site.css or a custom theme file:

• --a-color-surface, --a-color-on-surface: For menu background and text colors.
• --a-color-primary, --a-color-on-primary: For hover/focus states of menu items.
• --a-color-outline: For menu borders and dividers.
• --a-space-xs, --a-space-s, --a-space-m: For internal spacing and padding.
• --a-border-radius-medium: For rounded corners of the menu.
• --a-shadow-medium: For the menu's shadow.
• --a-font-size-base: For menu item text size.