Dropdown

Dropdown is a contextual menu component for exposing actions, navigation links, filters, or compact panels from a trigger. It is initialized globally by FrontAlign and uses event delegation, so no per-dropdown instance is required.

The component keeps the public API consistent with the FrontAlign attribute system: fa-toggle="dropdown" is used for delegated triggers, while optional behavior modes can be configured with fa-trigger.

Dropdown is suited for account menus, toolbar actions, navigation groups, select-like action menus, settings panels, and any interface that needs compact contextual content.

Getting Started

Add .dropdown to the root element, place a trigger inside it, and mark the trigger with fa-toggle="dropdown". The menu should use .dropdown-menu, and menu content should be wrapped with .dropdown-content.

<div class="dropdown">
  <button
    class="button is-primary"
    type="button"
    fa-toggle="dropdown"
    aria-haspopup="menu"
    aria-expanded="false">
    Options
  </button>

  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item" href="#">Profile</a>
      <a class="dropdown-item" href="#">Settings</a>
      <hr class="dropdown-divider"/>
      <a class="dropdown-item" href="#">Sign out</a>
    </div>
  </div>
</div>

Structure

Dropdown markup is intentionally small: a root, a trigger, a menu, and optional content helpers.

Element	Class / Attribute	Purpose
Root	`dropdown`	Wraps the trigger and menu. The open state is applied here.
Trigger	`fa-toggle="dropdown"`	Marks the clickable element that opens or closes the dropdown.
Menu	`dropdown-menu`	The positioned popup panel shown when the dropdown is active.
Content wrapper	`dropdown-content`	Groups links, buttons, dividers, headers, or custom interactive content.
Menu item	`dropdown-item`	Styles a selectable link or button inside the menu.
Divider	`dropdown-divider`	Visually separates groups of menu items.
Header	`dropdown-header`	Displays a non-interactive section label inside the menu.
Open state	`is-active`	Added and removed automatically by JavaScript.

Open With Hover

Use a button as the trigger when the dropdown performs an action or opens an action menu. Use links inside the menu for navigation. Add data-trigger attribute to root element.

<div className="dropdown"data-dropdown-trigger="hover">
  <button
    className="button is-primary"
    type="button"
    fa-toggle="dropdown"
    aria-haspopup="menu"
    aria-expanded="false"
  >With Hover</button>

<div className="dropdown-menu" role="menu">
  <div className="dropdown-header">Account</div>
  <div className="dropdown-item">
    <a className="link" href="#">Profile</a>
  </div>
  <div className="dropdown-header">Settings</div>
  <div className="dropdown-item">
    <a className="link" href="#">Preferences</a>
  </div>
  <div className="dropdown-item">
    <a className="link" href="#">Sign out</a>
  </div>
</div>
</div>

Alignment

Dropdown menus open below the trigger by default. Add alignment modifiers to the root .dropdown when the menu should align differently.

Class	Behavior	Use case
`dropdown`	Opens below and aligns to the start edge.	Default menus and toolbar actions.
`is-end`	Aligns the menu to the end edge of the trigger.	Account menus, navbar actions, right-side toolbars.
`is-center`	Centers the menu relative to the trigger.	Compact icon menus or centered navigation actions.

<!-- Start aligned by default -->
<div class="dropdown">...</div>

<!-- End aligned -->
<div class="dropdown is-end">...</div>

<!-- Center aligned -->
<div class="dropdown is-center">...</div>

Direction Variants

Use direction modifiers on the root .dropdown to control where the menu opens.

Class	Direction	Description
`is-drop-up`	Up	Opens above the trigger.
`is-drop-end`	End	Opens beside the trigger toward the inline end side.
`is-drop-start`	Start	Opens beside the trigger toward the inline start side.

<div class="dropdown is-drop-up">...</div>
<div class="dropdown is-drop-end">...</div>
<div class="dropdown is-drop-start">...</div>

Scrollable Content

When the menu contains many items, .dropdown-content acts as a scroll container. Set a max-height to cap the visible area and enable vertical scrolling for overflow.

  <div className="dropdown-menu" role="menu">
    <div className="dropdown-content">
      <span className="dropdown-header">Pages</span>
      <a className="dropdown-item is-active" href="#">Dashboard</a>
      <a className="dropdown-item" href="#">Analytics</a>
      <a className="dropdown-item" href="#">Projects</a>
      <a className="dropdown-item" href="#">Team</a>
      <hr className="dropdown-divider" />
      <span className="dropdown-header">Account</span>
      <a className="dropdown-item" href="#">Profile</a>
      <a className="dropdown-item" href="#">Settings</a>
      <a className="dropdown-item" href="#">Billing</a>
      <hr className="dropdown-divider" />
      <a className="dropdown-item" href="#">Sign out</a>
    </div>
  </div>
</div>

Arrow Indicator

Add .has-arrow to .dropdown-trigger when you want a CSS-only arrow next to the trigger. The arrow direction follows the dropdown placement modifiers.

<div class="dropdown is-end">
  <div class="dropdown-trigger has-arrow">
    <button
      class="button"
      type="button"
      fa-toggle="dropdown"
      aria-haspopup="menu"
      aria-expanded="false"
    >
      More
    </button>
  </div>

  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item" href="#">Edit</a>
      <a class="dropdown-item" href="#">Duplicate</a>
      <a class="dropdown-item" href="#">Archive</a>
    </div>
  </div>
</div>

Placement	Arrow direction
`dropdown` / `is-end` / `is-center`	Down
`is-drop-up`	Up
`is-drop-end`	End
`is-drop-start`	Start

Runtime Behavior

Dropdown is a delegated component. One global listener handles every dropdown trigger on the page.

Interaction	Behavior
Trigger click	Closes other dropdowns, then toggles the clicked dropdown.
Outside click	Closes all open dropdowns.
Menu click	Keeps the dropdown open, except when the clicked target is an `<a>`.
Escape key	Closes all active dropdowns.
Hover mode	Opens on hover only on devices matching `(hover: hover) and (pointer: fine)`.
ARIA sync	Updates `aria-expanded` on the trigger whenever the dropdown opens or closes.

React Usage

For most React and Next.js projects, initialize FrontAlign once in a client component and use the same markup in MDX or JSX. The dropdown behavior is delegated, so dynamically rendered dropdowns still work.

'use client';

import { useEffect } from 'react';
import { useDropdown } from 'frontalign';

export default function Navbar(){
  useDropdown();
  return (

  )
}

Accessibility

Dropdown manages aria-expanded automatically, but the trigger should still include popup semantics. For the strongest accessibility, connect the menu to the trigger with aria-labelledby.

<div class="dropdown">
  <button
    id="account-dropdown-trigger"
    class="button"
    type="button"
    fa-toggle="dropdown"
    aria-haspopup="menu"
    aria-expanded="false"
  >
    Account
  </button>

  <div
    class="dropdown-menu"
    role="menu"
    aria-labelledby="account-dropdown-trigger"
  >
    <div class="dropdown-content">
      <a class="dropdown-item" role="menuitem" href="/profile">Profile</a>
      <a class="dropdown-item" role="menuitem" href="/settings">Settings</a>
    </div>
  </div>
</div>

Attribute	Required	Purpose
`aria-expanded`	Recommended	Automatically updated by FrontAlign to reflect open or closed state.
`aria-haspopup="menu"`	Recommended	Tells assistive technology that the trigger opens a menu popup.
`aria-labelledby`	Optional	Labels the menu using the trigger text. Useful, but not required for runtime behavior.
`role="menu"`	Optional	Use when the dropdown represents an application-style action menu.

Class Reference

Class / Attribute	Type	Description
`dropdown`	Root	Base dropdown wrapper.
`dropdown-menu`	Element	Popup container.
`dropdown-content`	Element	Inner content surface for items and groups.
`dropdown-item`	Element	Menu item class for links or buttons.
`dropdown-header`	Element	Non-interactive group label.
`dropdown-divider`	Element	Visual separator.
`has-arrow`	Modifier	Adds a CSS-only arrow to the trigger wrapper.
`is-active`	State	Open state managed by JavaScript.
`is-end`	Modifier	Aligns the menu to the end side.
`is-center`	Modifier	Centers the menu relative to the trigger.
`is-drop-up`	Modifier	Opens the menu upward.
`is-drop-end`	Modifier	Opens the menu toward the inline end side.
`is-drop-start`	Modifier	Opens the menu toward the inline start side.
`fa-toggle="dropdown"`	Attribute	Delegated dropdown trigger marker.
`data-trigger="hover"`	Attribute	Optional root behavior mode for hover-open dropdowns.

Notes

Use fa-toggle="dropdown" instead of data-toggle="dropdown" to keep the FrontAlign API consistent with fa-component, fa-theme, and other framework-level attributes.

aria-labelledby is not required for the dropdown to work, but it is recommended when the menu should be announced using the trigger label. Keep aria-expanded on the trigger because FrontAlign updates it automatically.