Dropdown

Dropdowns present a list of actions or options to the user.

Usage

<button className="c-button c-button--white c-button--sm space-x-2">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
</div>

Implementation

Name	Type
Elements
Item	`.c-dropdown__item`
Item label	`.c-dropdown__item-label`
Item icon	`.c-dropdown__item-icon`	Optional
Title	`.c-dropdown__title`	Optional
Group	`.c-dropdown__group`	Optional
Group	`.c-dropdown__footer`	Optional
Modifiers
Item status	`.c-dropdown__item--active`	Optional
Item height	`.c-dropdown__item--lg`	Optional
States	None

Elements

Use a dropdown title if the dropdown needs for further explanation before a user is able to properly make use of the options in the dropdown.

<button className="c-button c-button--white c-button--sm space-x-2">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <div className="c-dropdown__title">
    <h5 className="font-semibold mb-1">Dropdown title</h5>
    <p className="text-gray-700">This is a description with a <a href="#" className="c-link">link</a>.</p>
  </div>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
</div>

Use the table footer if there's just a small note that is optional to read.

<button className="c-button c-button--white c-button--sm space-x-2">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
  <hr className="c-dropdown__divider" />
  <p className="c-dropdown__footer">Learn about notification settings on our <a href="#" className="c-link">docs</a>.</p>
</div>

Item group

Use item groups to bundle together related elements.

<button className="c-button c-button--white c-button--sm space-x-3">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <div className="c-dropdown__group">
    <h5 className="c-heading--caps text-ms text-gray-700">Group</h5>
  </div>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <div className="c-dropdown__group">
    <h5 className="c-heading--caps text-ms text-gray-700">Group</h5>
  </div>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 04</span>
  </button>
</div>

Item divider

Use dividers to split content that does not need a group title.

<button className="c-button c-button--white c-button--sm space-x-3">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown w-64">
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <hr className="c-dropdown__divider" />
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 04</span>
  </button>
</div>

Item status

Use the item state to indicate which element is selected. Item states should be used when a dropdown has a persistent state. There are two ways to indicate the item status:

Label with icon: If the item label has an icon, the item status is indicated with a checkmark on the right side
Label without icon: In all other cases, the item status is indicated using a checkbox or radio icon on the left

<button className="c-button c-button--white c-button--sm space-x-3">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button href="#" className="c-dropdown__item c-dropdown__item--active">
    <FontAwesomeIcon icon={faCheckSquare} className="c-dropdown__item-icon text-blue-500" fixedWidth />
    <span className="c-dropdown__item-label">Option 01</span>
  </button>
  <button href="#" className="c-dropdown__item">
    <FontAwesomeIcon icon={faSquare} className="c-dropdown__item-icon" fixedWidth />
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button href="#" className="c-dropdown__item">
    <FontAwesomeIcon icon={faSquare} className="c-dropdown__item-icon" fixedWidth />
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
</div>

<button className="c-button c-button--white c-button--sm space-x-3">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button href="#" className="c-dropdown__item c-dropdown__item--active">
    <FontAwesomeIcon icon={faStroopwafel} className="c-dropdown__item-icon" fixedWidth />
    <span className="c-dropdown__item-label">Option 01</span>
    <FontAwesomeIcon icon={faCheck} className="c-dropdown__item-icon text-blue-500" fixedWidth />
  </button>
  <button href="#" className="c-dropdown__item">
    <FontAwesomeIcon icon={faStroopwafel} className="c-dropdown__item-icon" fixedWidth />
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button href="#" className="c-dropdown__item">
    <FontAwesomeIcon icon={faStroopwafel} className="c-dropdown__item-icon" fixedWidth />
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
</div>

With inline input

<button className="c-button c-button--white c-button--sm space-x-2">
  <span>Dropdown</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">
      Every
      <label className="c-textfield c-textfield--inline w-16 mx-2">
        <input type="number" className="c-textfield__input c-textfield__input--xs" placeholder="100" />
      </label>
      th per hour
    </span>
  </button>
  <button className="c-dropdown__item c-dropdown__item--active">
    <span className="c-dropdown__item-label">
      Every
      <label className="c-textfield c-textfield--inline w-16 mx-2">
        <input type="number" className="c-textfield__input c-textfield__input--xs" placeholder="100" />
      </label>
      th per day
    </span>
    <FontAwesomeIcon icon={faCheck} className="c-dropdown__item-icon text-blue-500" fixedWidth />
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 02</span>
  </button>
  <button className="c-dropdown__item">
    <span className="c-dropdown__item-label">Option 03</span>
  </button>
</div>

Modifiers

Item height

Use .c-dropdown__item--lg for items with multiple lines.

<button className="c-button c-button--white c-button--sm space-x-3">
  <span>Option 01</span>
  <FontAwesomeIcon icon={faAngleDown} className="c-button__icon text-gray-600" />
</button>
<div className="c-dropdown max-w-xs">
  <button className="c-dropdown__item c-dropdown__item--lg">
    <div className="c-dropdown__item-label">
      <h5 className="font-semibold mb-1">Option 01</h5>
      <p className="text-gray-700">This is a description.</p>
    </div>
  </button>
  <button className="c-dropdown__item c-dropdown__item--lg">
    <div className="c-dropdown__item-label">
      <h5 className="font-semibold mb-1">Option 02</h5>
      <p className="text-gray-700">This is a description.</p>
    </div>
  </button>
  <button className="c-dropdown__item c-dropdown__item--lg">
    <div className="c-dropdown__item-label">
      <h5 className="font-semibold mb-1">Option 03</h5>
      <p className="text-gray-700">This is a description.</p>
    </div>
  </button>
</div>

Dropdown

Usage

Implementation

Elements

Dropdown title

Dropdown title

With a footer

Item group

Group

Group

Item divider

Item status

With inline input

Modifiers

Item height

Option 01

Option 02

Option 03