Dropdowns JS Required

Contextual dropdown menus for actions and navigation with flexible positioning options. See JavaScript implementation →

Basic Dropdown

Default dropdown menu that appears below the toggle button.

HTML 
<div class="focus-dropdown">
  <button class="focus-btn focus-btn-primary focus-dropdown-toggle">
    Actions <i class="fa fa-chevron-down"></i>
  </button>
  <div class="focus-dropdown-menu" style="display: none;">
    <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>

Control dropdown position with .focus-dropdown-menu-right and .focus-dropdown-menu-top classes.

HTML 
<!-- Right Aligned -->
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">Right Aligned</button>
  <div class="focus-dropdown-menu focus-dropdown-menu-right">
    <button class="focus-dropdown-item">Profile</button>
    <button class="focus-dropdown-item">Settings</button>
  </div>
</div>

<!-- Top Aligned -->
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">Top Aligned</button>
  <div class="focus-dropdown-menu focus-dropdown-menu-top">
    <button class="focus-dropdown-item">Move Up</button>
    <button class="focus-dropdown-item">Move Down</button>
  </div>
</div>

Organize dropdown items with headers using .focus-dropdown-header and dividers.

HTML 
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle">
    Account <i class="fa fa-chevron-down"></i>
  </button>
  <div class="focus-dropdown-menu">
    <div class="focus-dropdown-header">Profile</div>
    <button class="focus-dropdown-item">
      <i class="fa fa-user"></i> My Profile
    </button>
    <button class="focus-dropdown-item">
      <i class="fa fa-star"></i> Favorites
    </button>
    <div class="focus-dropdown-divider"></div>
    <div class="focus-dropdown-header">Settings</div>
    <button class="focus-dropdown-item">
      <i class="fa fa-cog"></i> Preferences
    </button>
  </div>
</div>

Disable specific dropdown items using the disabled attribute.

HTML 
<div class="focus-dropdown-menu">
  <button class="focus-dropdown-item">New File</button>
  <button class="focus-dropdown-item">Open</button>
  <button class="focus-dropdown-item" disabled>Save (Disabled)</button>
  <button class="focus-dropdown-item">Print</button>
</div>

JavaScript API

Auto-Initialized

Dropdowns with data-focus-dropdown attribute on the toggle button work automatically! Or control them with the simple API below.

Control dropdowns programmatically with the JavaScript API:

JavaScript 
// Toggle a dropdown
Dropdown.toggle('#myDropdown')

// Open a dropdown
Dropdown.open('.focus-dropdown')

// Close a dropdown
Dropdown.close('#myDropdown')

Dropdown.toggle(element)

Toggle dropdown open/closed state.

Dropdown.toggle('#myDropdown')  // By ID
Dropdown.toggle('.focus-dropdown')  // By selector

Dropdown.open(element)

Open a dropdown.

Dropdown.open('#myDropdown')

Dropdown.close(element)

Close a dropdown.

Dropdown.close('#myDropdown')

Auto-Initialization

Add data-focus-dropdown to your toggle button for automatic behavior:

HTML 
<div class="focus-dropdown">
  <button class="focus-btn focus-dropdown-toggle" data-focus-dropdown>
    Actions
  </button>
  <div class="focus-dropdown-menu">
    <!-- Items automatically close dropdown on click -->
    <button class="focus-dropdown-item">Edit</button>
    <button class="focus-dropdown-item">Delete</button>
  </div>
</div>

CSS Classes Reference

Class Description
.focus-dropdown Main dropdown container
.focus-dropdown-toggle Dropdown toggle button
.focus-dropdown-menu Dropdown menu container
.focus-dropdown-menu-right Align menu to the right
.focus-dropdown-menu-top Position menu above toggle
.focus-dropdown-item Individual dropdown item
.focus-dropdown-header Dropdown section header
.focus-dropdown-divider Horizontal divider between items