Dropdowns recommended

Contextual dropdown menus for actions and navigation with flexible positioning options.

Simple API

Control dropdowns with Dropdown.toggle('#myDropdown'), Dropdown.open(), and Dropdown.close().

Quick Start

Create a dropdown with HTML structure, then toggle it with JavaScript.

JavaScript

// Toggle on button click
document.querySelector('.focus-dropdown-toggle').addEventListener('click', () => {
  Dropdown.toggle('#dropdown1')
})

// Or use open/close directly
Dropdown.open('#dropdown1')
Dropdown.close('#dropdown1')

Show HTML Structure

<div class="focus-dropdown" id="dropdown1">
  <button class="focus-btn focus-btn-primary focus-dropdown-toggle">
    Actions <i class="fa fa-chevron-down"></i>
  </button>
  <div class="focus-dropdown-menu">
    <button class="focus-dropdown-item"><i class="fa fa-edit"></i> Edit</button>
    <button class="focus-dropdown-item"><i class="fa fa-copy"></i> Duplicate</button>
    <button class="focus-dropdown-item"><i class="fa fa-share"></i> Share</button>
    <div class="focus-dropdown-divider"></div>
    <button class="focus-dropdown-item"><i class="fa fa-trash"></i> Delete</button>
  </div>
</div>

Positioning

Control dropdown position with CSS modifier classes.

HTML

<!-- Right Aligned -->
<div class="focus-dropdown-menu focus-dropdown-menu-right">
  ...
</div>

<!-- Top Aligned (opens upward) -->
<div class="focus-dropdown-menu focus-dropdown-menu-top">
  ...
</div>

Headers and Dividers

Organize dropdown items into groups with headers and dividers.

HTML

<div class="focus-dropdown-menu">
  <div class="focus-dropdown-header">Profile</div>
  <button class="focus-dropdown-item">My Profile</button>
  <button class="focus-dropdown-item">Favorites</button>
  <div class="focus-dropdown-divider"></div>
  <div class="focus-dropdown-header">Settings</div>
  <button class="focus-dropdown-item">Preferences</button>
</div>

Disabled Items

Disable specific items with the disabled attribute.

HTML

<button class="focus-dropdown-item" disabled>
  Save (Disabled)
</button>

JavaScript API

Control dropdowns programmatically. Dropdowns automatically close when clicking outside.

Toggle, Open, Close

JavaScript

Dropdown.toggle('#myDropdown')
Dropdown.open('#myDropdown')
Dropdown.close('#myDropdown')

Setup Toggle Button

JavaScript

document.querySelectorAll('.focus-dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', (e) => {
    e.stopPropagation()
    const dropdown = toggle.closest('.focus-dropdown')
    FocusUI.Dropdown.toggle(dropdown)
  })
})

Close on Item Select

JavaScript

document.querySelectorAll('.focus-dropdown-item').forEach(item => {
  item.addEventListener('click', () => {
    const dropdown = item.closest('.focus-dropdown')
    FocusUI.Dropdown.close(dropdown)
  })
})

Methods

Method	Description
`Dropdown.toggle(selector)`	Toggle dropdown open/closed. Closes other open dropdowns.
`Dropdown.open(selector)`	Open a dropdown. Adds click-outside-to-close behavior.
`Dropdown.close(selector)`	Close a dropdown

CSS Classes Reference

Class	Description
`.focus-dropdown`	Container element
`.focus-dropdown-toggle`	Toggle button
`.focus-dropdown-menu`	Menu container (hidden by default)
`.focus-dropdown-open`	Added to container when open (shows menu)
`.focus-dropdown-menu-right`	Align menu to right edge
`.focus-dropdown-menu-top`	Open menu above toggle
`.focus-dropdown-item`	Menu item button
`.focus-dropdown-header`	Section header (non-clickable)
`.focus-dropdown-divider`	Horizontal separator