PF Next

Dropdown

Basic Dropdown (expanded)

Preview

Expanded Dropdown
<div class="pf-c-dropdown pf-m-expanded">
  <button id="dropdown-basic-example-expanded-button" class="pf-c-dropdown__toggle" aria-expanded="true">
    Expanded Dropdown
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <div class="pf-c-dropdown__menu">
    Expanded Dropdown
  </div>
</div>

The Basic Dropdown is provided for flexibility in allowing various content within a dropdown.

Dropdown with links and actions (expanded)

Preview

<div class="pf-c-dropdown pf-m-expanded">
  <button id="dropdown-example-expanded-button" class="pf-c-dropdown__toggle" aria-expanded="true">
    Expanded Dropdown
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-example-expanded-button">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Dropdown (collapsed)

Preview

<div class="pf-c-dropdown">
  <button id="dropdown-example-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
    Collapsed Dropdown
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-example-collapsed-button" hidden>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Dropdown Select (expanded)

Preview

<div class="pf-c-dropdown pf-m-expanded">
  <span id="dropdown-select-example-expanded-label" hidden>Select a fruit</span>
  <button id="dropdown-select-example-expanded-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-select-example-expanded-label dropdown-select-example-expanded-button" aria-expanded="true">
    Choose one
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-select-example-expanded-label">
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Apples</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Oranges</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false" disabled>Bananas</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Carrots</button>
    </li>
  </ul>
</div>

The Dropdown Select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and Aria tag structure is specific to a select list.

Note: The attribute aria-pressed="true" should be set programmatically to the active item.

Dropdown Select (expanded, first item selected)

Preview

<div class="pf-c-dropdown pf-m-expanded">
  <span id="dropdown-select-example-expanded-selected-label" hidden>Select a fruit</span>
  <button id="dropdown-select-example-expanded-selected-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-select-example-expanded-selected-label dropdown-select-example-expanded-selected-button" aria-expanded="true">
    Apples
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-select-example-expanded-selected-label">
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="true">Apples</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Oranges</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false" disabled>Bananas</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Carrots</button>
    </li>
  </ul>
</div>

The Dropdown Select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and Aria tag structure is specific to a select list.

Note: The attribute aria-pressed="true" should be set programmatically to the active item.

Dropdown Select (collapsed)

Preview

<div class="pf-c-dropdown">
  <span id="dropdown-select-example-label" hidden>Select a fruit</span>
  <button id="dropdown-select-example-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-select-example-label dropdown-select-example-button" aria-expanded="false">
    Apples
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-select-example-label" hidden>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="true">Apples</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Oranges</button>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false" disabled>Bananas</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <button class="pf-c-dropdown__menu-item" aria-pressed="false">Carrots</button>
    </li>
  </ul>
</div>

The Dropdown Select should be used when the user is selecting an option from a list of items. Although the presentation is similar to the basic dropdown, the underlying HTML and Aria tag structure is specific to a select list.

Note: The attribute aria-pressed="true" should be set programmatically to the active item.

Dropdown Multi-Select (expanded)

Preview

<div class="pf-c-dropdown pf-m-expanded">
  <span id="dropdown-multi-select-example-expanded-label" hidden>Select one or more fruits</span>
  <button id="dropdown-multi-select-example-expanded-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-multi-select-example-expanded-label dropdown-multi-select-example-expanded-button" aria-expanded="true">
    Choose many
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <div class="pf-c-dropdown__menu">
    <form class="pf-c-form">
      <fieldset class="pf-c-form__fieldset" aria-labelledby="dropdown-multi-select-example-expanded-label">
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-expanded-apples" name="fruit">
          <label class="pf-c-check__label" for="dropdown-multi-select-example-expanded-apples">
            Apples</label>
        </div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-expanded-oranges" name="fruit" checked>
          <label class="pf-c-check__label" for="dropdown-multi-select-example-expanded-oranges">
            Oranges</label>
        </div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-expanded-bananas" name="fruit" aria-disabled="true" disabled>
          <label class="pf-c-check__label" for="dropdown-multi-select-example-expanded-bananas">
            Bananas</label>
        </div>
        <div class="pf-c-dropdown__separator" role="separator"></div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-expanded-carrots" name="fruit">
          <label class="pf-c-check__label" for="dropdown-multi-select-example-expanded-carrots">
            Carrots</label>
        </div>
      </fieldset>
    </form>
  </div>
</div>

The Dropdown Multi Select should be used when the user is selecting multiple items from a list. Although the presentation is similar to the basic dropdown, the underlying HTML and Aria tag structure is specific to a select list.

Dropdown Multi-Select (collapsed)

Preview

<div class="pf-c-dropdown">
  <span id="dropdown-multi-select-example-label" hidden>Select one or more fruits</span>
  <button id="dropdown-multi-select-example-button" class="pf-c-dropdown__toggle" aria-labelledby="dropdown-multi-select-example-label dropdown-multi-select-example-button" aria-expanded="false">
    Apples, Oranges
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <div class="pf-c-dropdown__menu" hidden>
    <form class="pf-c-form">
      <fieldset class="pf-c-form__fieldset" aria-labelledby="dropdown-multi-select-example-label">
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-apples" name="fruit">
          <label class="pf-c-check__label" for="dropdown-multi-select-example-apples">
            Apples</label>
        </div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-oranges" name="fruit" checked>
          <label class="pf-c-check__label" for="dropdown-multi-select-example-oranges">
            Oranges</label>
        </div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-bananas" name="fruit" aria-disabled="true" disabled>
          <label class="pf-c-check__label" for="dropdown-multi-select-example-bananas">
            Bananas</label>
        </div>
        <div class="pf-c-dropdown__separator" role="separator"></div>
        <div class="pf-c-check pf-c-dropdown__menu-item">
          <input class="pf-c-check__input" type="checkbox" id="dropdown-multi-select-example-carrots" name="fruit">
          <label class="pf-c-check__label" for="dropdown-multi-select-example-carrots">
            Carrots</label>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Kebab

Preview

<div class="pf-c-dropdown pf-m-expanded pf-m-plain">
  <button id="dropdown-example-kebab-button" class="pf-c-dropdown__toggle" aria-expanded="true" aria-label="Actions">
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-example-kebab-button">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Kebab Align Right

Preview

<div class="pf-c-dropdown pf-m-expanded pf-m-plain">
  <button id="dropdown-example-kebab-right-aligned-button" class="pf-c-dropdown__toggle" aria-expanded="true" aria-label="Actions">
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="dropdown-example-kebab-right-aligned-button">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Align Right

Preview

<div class="pf-c-dropdown pf-m-expanded">
  <button id="dropdown-example-rightAligned-button" class="pf-c-dropdown__toggle" aria-expanded="true">
    Right
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="dropdown-example-rightAligned-button">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Top

Preview

<div class="pf-c-dropdown pf-m-top">
  <button id="dropdown-example-top-collapsed-button" class="pf-c-dropdown__toggle" aria-expanded="false">
    Top
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-example-top-collapsed-button" hidden>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>
<div class="pf-c-dropdown pf-m-expanded pf-m-top">
  <button id="dropdown-example-top-expanded-button" class="pf-c-dropdown__toggle" aria-expanded="true">
    Top
    <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
  </button>
  <ul class="pf-c-dropdown__menu" aria-labelledby="dropdown-example-top-expanded-button">
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item">Action</button>
    </li>
    <li>
      <a class="pf-c-dropdown__menu-item pf-m-disabled" aria-disabled="true" tabindex="-1" href="#">Disabled Link</a>
    </li>
    <li>
      <button class="pf-c-dropdown__menu-item" disabled>Disabled Action</button>
    </li>
    <li class="pf-c-dropdown__separator" role="separator"></li>
    <li>
      <a class="pf-c-dropdown__menu-item" href="#">Separated Link</a>
    </li>
  </ul>
</div>

Documentation

Overview

The dropdown menu can contain either links or buttons, depending on the expected behavior when clicking the menu item. If you are using the menu item to navigate to another page, then menu item is a link. Otherwise, use a button for the menu item.

Accessibility

Attribute Applied Outcome
aria-expanded="false" .pf-c-dropdown__toggle Indicates that the menu is hidden
aria-expanded="true" .pf-c-dropdown__toggle Indicates that the menu is visible
aria-label="Actions" .pf-c-dropdown__toggle Provides an accessible name for the dropdown when an icon is used instead of text. Required when icon is used with no supporting text
aria-hidden="true" .pf-c-dropdown__toggle-icon Hides the icon from assistive technologies
hidden .pf-c-dropdown__menu Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies
aria-expanded="true" .pf-c-dropdown__menu Indicates that the menu is visible
role="separator" .pf-c-dropdown__separator Indicates that the separator is a separator
disabled button.pf-c-dropdown__menu-item When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus
aria-disabled="true" a.pf-c-dropdown__menu-item When the menu item uses a link element, indicates that it is unavailable
tabindex="-1" a.pf-c-dropdown__menu-item When the menu item uses a link element, removes it from keyboard focus
aria-pressed="true" button.pf-c-dropdown__menu-item Select only The attribute aria-pressed="true" should be set programmatically to the active item. Value should be false when not selected.

Usage

Class Applied Outcome
.pf-c-dropdown <div> Defines the parent wrapper of the dropdown.
.pf-c-dropdown__toggle <button> Defines the dropdown toggle
.pf-c-dropdown__toggle-icon <i> Defines the dropdown toggle icon
.pf-c-dropdown__menu <div> Defines the parent wrapper of the menu items
.pf-c-dropdown__menu-item <a> Defines a menu item that navigates to another page
.pf-c-dropdown__menu-item <button> Defines a menu item that performs an action on the current page
.pf-c-dropdown__separator <div> Defines a separator within the menu
.pf-m-expanded .pf-c-dropdown Modifies for the expanded state
.pf-m-plain .pf-c-dropdown Modifies to display the toggle with no border or background
.pf-m-top .pf-c-dropdown Modifies to display the menu above the toggle
.pf-m-align-right .pf-c-dropdown__menu Modifies to display the menu aligned to the right edge of the toggle
.pf-m-hover .pf-c-dropdown__menu-item, .pf-c-dropdown__toggle Forces display of the hover state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.
.pf-m-focus .pf-c-dropdown__menu-item Forces display of the focus state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.
.pf-m-active .pf-c-dropdown__toggle Forces display of the active state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :active pseudo-class.
.pf-m-disabled a.pf-c-dropdown__menu-item Modifies to display the menu item as disabled. This applies to a.pf-c-dropdown__menu-item and should not be used in lieu of the :disabled attribute on button.pf-c-dropdown__menu-item