DropDown Menu

A dropdown menu displays a list of options for the element that triggers it.

install	yarn add @clayui/drop-down
version
use	`import DropDown from '@clayui/drop-down';`

This page uses Bootstrap’s dropdown plugin which requires JQuery. Liferay 7.4 no longer includes JQuery by default. We have included a standalone dropdown plugin in 7.4, just replace the attribute data-toggle=“dropdown” with data-toggle=“liferay-dropdown” on the dropdown-toggle.

Variations

Default

The default dropdown is a panel that does not support scrolling of the content inside it. Use this type when the number of options you want to offer is short or the panel is big enough to contain all the elements you want to use.

Snippet

<div aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <ul className="list-unstyled">
    <li>
      <a className="active dropdown-item" href="#1">Selected Option</a>
    </li>
    <li><a className="dropdown-item" href="#3">Normal Option</a></li>
    <li>
      <a className="disabled dropdown-item" href="#4" tabindex="-1"
        >Disabled Option</a
      >
    </li>
  </ul>
</div>

Wide

Use .dropdown-wide with .dropdown to make the dropdown menu big. The default width is 500px.

Snippet

<div aria-labelledby="" className="dropdown-wide dropdown-wide-container">
  <div className="dropdown-menu">
    <div className="row">
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-subheader">By Resource</li>
          <li>
            <a className="dropdown-item" href="#1">Support Home</a>
          </li>
          <li>
            <a className="disabled dropdown-item" href="#1" tabindex="-1"
              >Disabled Link</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Chat or Call</a>
          </li>
        </ul>
        <ul className="list-unstyled">
          <li className="dropdown-subheader">By Product</li>
          <li>
            <a className="active dropdown-item" href="#1"
              >Developing for the Platform</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Mastering Fundamentals</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Styling with Themes</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Managing Content</a>
          </li>
        </ul>
      </div>
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-subheader">Popular Picks</li>
          <li>
            <a className="dropdown-item" href="#1">Error Messages</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              >Updates: Service Packs &amp; Fixes</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              >Install, Upgrade, &amp; Activate</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Regular Drivers</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Hardware Drivers</a>
          </li>
        </ul>
        <ul className="list-unstyled">
          <li className="dropdown-subheader">Security</li>
          <li>
            <a className="dropdown-item" href="#1">Security Home</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Security Essentials</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Protecting Your Data</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Securing Your Browser</a>
          </li>
        </ul>
      </div>
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-subheader">By Audience</li>
          <li>
            <a className="dropdown-item" href="#1">For Home Users</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For Small Business</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For IT Professionals</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For Developers</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Full

Use .dropdown-full to create a dropdown menu as wide as its relative parent.

Snippet

<div className="dropdown dropdown-full nav-item">
  <ul aria-labelledby="navbarDropdownMenuLink3" className="dropdown-menu">
    <div className="row">
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-header">By Resource</li>
          <li>
            <a className="dropdown-item" href="#1">Support Home</a>
          </li>
          <li>
            <a className="disabled dropdown-item" href="#1" tabindex="-1"
              >Disabled Link</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Chat or Call</a>
          </li>
        </ul>
        <ul className="list-unstyled">
          <li className="dropdown-header">By Product</li>
          <li>
            <a className="dropdown-item" href="#1"
              >Developing for the Platform</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Mastering Fundamentals</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Styling with Themes</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Managing Content</a>
          </li>
        </ul>
      </div>
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-header">Popular Picks</li>
          <li>
            <a className="dropdown-item" href="#1">Error Messages</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              >Updates: Service Packs &amp; Fixes</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1"
              >Install, Upgrade, &amp; Activate</a
            >
          </li>
          <li>
            <a className="dropdown-item" href="#1">Regular Drivers</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Hardware Drivers</a>
          </li>
        </ul>
        <ul className="list-unstyled">
          <li className="dropdown-header">Security</li>
          <li>
            <a className="dropdown-item" href="#1">Security Home</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Security Essentials</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Protecting Your Data</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">Securing Your Browser</a>
          </li>
        </ul>
      </div>
      <div className="col-sm-4">
        <ul className="list-unstyled">
          <li className="dropdown-header">By Audience</li>
          <li>
            <a className="active dropdown-item" href="#1">For Home Users</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For Small Business</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For IT Professionals</a>
          </li>
          <li>
            <a className="dropdown-item" href="#1">For Developers</a>
          </li>
        </ul>
      </div>
    </div>
  </ul>
</div>

This is a separate component from .dropdown-full, use one or the other.

The modifier class dropdown-menu-width-full on dropdown-menu makes the menu expand the full width of the page. This should be used with the Clay Drop Down plugin which renders the dropdown-menu as a direct child of the body element.

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-width-full"
>
  <li className="dropdown-header">Dropdown Header</li>
  <li><a className="dropdown-item" href="#1">Action</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Scope</a></li>
</ul>

This is a separate component from .dropdown-wide, use one or the other.

The modifier class dropdown-menu-width-sm on dropdown-menu makes the menu 500px wide. The dropdown-menu becomes 100% wide at screen sizes 767px and below. This should be used with the Clay Drop Down plugin which renders the dropdown-menu as a direct child of the body element.

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-width-sm"
>
  <li className="dropdown-header">Dropdown Header</li>
  <li><a className="dropdown-item" href="#1">Action</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Scope</a></li>
</ul>

The modifier class dropdown-menu-width-shrink on dropdown-menu makes the menu only be as wide as the text inside and maxes out at 240px wide. This forces dropdown-item text to be on one line.

Snippet

<ul
  aria-labelledby="dropdownMenuWide1"
  className="dropdown-menu dropdown-menu-width-shrink"
>
  <li className="dropdown-header">Header</li>
  <li><a className="dropdown-item" href="#1">Action</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Scope</a></li>
</ul>

The modifier class dropdown-menu-height-auto on dropdown-menu removes the max-height on the dropdown-menu.

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-height-auto"
>
  <li className="dropdown-header">Dropdown Header</li>
  <li><a className="dropdown-item" href="#1">Action</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Scope</a></li>
</ul>

Content Types

Dividers

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-subheader">Order by</li>
  <li><a className="active dropdown-item" href="#1">Author</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1"
      >Title Entry</a
    >
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Date</a></li>
  <li><a className="dropdown-item" href="#1">Description</a></li>
  <li><a className="dropdown-item" href="#1">Status</a></li>
</ul>

Form Elements

Checkbox or Radio

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-subheader">Filter by</li>
  <li>
    <div className="active dropdown-item">
      <div className="custom-control custom-checkbox">
        <label>
          <input checked="" className="custom-control-input" type="checkbox" />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Selected Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
  <li>
    <div className="dropdown-item">
      <div className="custom-control custom-checkbox">
        <label>
          <input className="custom-control-input" type="checkbox" />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Normal Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
  <li>
    <div className="disabled dropdown-item">
      <div className="custom-control custom-checkbox">
        <label>
          <input disabled="" className="custom-control-input" type="checkbox" />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Disabled Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
</ul>
<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-subheader">Order by</li>
  <li>
    <div className="active dropdown-item">
      <div className="custom-control custom-radio">
        <label>
          <input
            checked=""
            className="custom-control-input"
            id="dropdownRadio1"
            name="dropdownRadio"
            type="radio"
          />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Selected Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
  <li>
    <div className="dropdown-item">
      <div className="custom-control custom-radio">
        <label>
          <input
            className="custom-control-input"
            id="dropdownRadio2"
            name="dropdownRadio"
            type="radio"
          />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Normal Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
  <li>
    <div className="disabled dropdown-item">
      <div className="custom-control custom-radio">
        <label>
          <input
            disabled=""
            className="custom-control-input"
            id="dropdownRadio3"
            name="dropdownRadio"
            type="radio"
          />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Disabled Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
</ul>

Search

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-section">
    <div className="input-group input-group-sm">
      <div className="input-group-item">
        <input
          className="form-control input-group-inset input-group-inset-after"
          placeholder="Search for..."
          type="text"
        />
        <span className="input-group-inset-item input-group-inset-item-after">
          <button className="btn btn-unstyled" type="button">
            <svg
              className="lexicon-icon lexicon-icon-search"
              focusable="false"
              role="presentation"
            >
              <use href="/icons.svg#search"></use>
            </svg>
          </button>
        </span>
      </div>
    </div>
  </li>
  <li className="dropdown-subheader">Filter by</li>
  <li>
    <div className="active dropdown-item">
      <div className="custom-control custom-checkbox">
        <label>
          <input checked="" className="custom-control-input" type="checkbox" />
          <span className="custom-control-label">
            <span className="custom-control-label-text">Selected Option</span>
          </span>
        </label>
      </div>
    </div>
  </li>
</ul>

Form Groups

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-section form-group">
    <label for="basicInputTypeText1"> Text 1 </label>
    <input
      className="form-control form-control-sm"
      id="basicInputTypeText1"
      placeholder="Placeholder"
      type="text"
    />
  </li>
  <li className="dropdown-subheader">Form Section</li>
  <li className="dropdown-section">
    <div className="form-group">
      <label for="basicInputTypeText2"> Text 2 </label>
      <input
        className="form-control form-control-sm"
        id="basicInputTypeText2"
        placeholder="Placeholder"
        type="text"
      />
    </div>
  </li>
  <li className="dropdown-section">
    <div className="form-group">
      <label for="basicInputTypeText3"> Text 3 </label>
      <input
        className="form-control form-control-sm"
        id="basicInputTypeText3"
        placeholder="Placeholder"
        type="text"
      />
    </div>
    <div className="form-group">
      <label for="basicInputTypeTextarea">Textarea</label>
      <textarea
        className="form-control form-control-sm"
        id="basicInputTypeTextarea"
        placeholder="Placeholder"
      ></textarea>
    </div>
  </li>
  <li className="dropdown-subheader">Order by</li>
  <li><a className="active dropdown-item" href="#1">Author</a></li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1"
      >Title Entry</a
    >
  </li>
</ul>

Indicators

Start

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-indicator-start"
>
  <li className="dropdown-header">Dropdown Header</li>
  <li className="dropdown-divider"></li>
  <li className="dropdown-subheader">Dropdown Sub Header</li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator-start">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
      Ticket Buyer Information
    </a>
  </li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator-start">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
      Attendee Information
    </a>
  </li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator-start">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
      Seat Assignment
    </a>
  </li>
  <li><a className="active dropdown-item" href="#1">Dinner Preference</a></li>
  <li><a className="dropdown-item" href="#1">Submit Payment</a></li>
  <li className="dropdown-caption">Dropdown Caption</li>
</ul>

End

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-indicator-end"
>
  <li className="dropdown-header">Folder</li>
  <li className="dropdown-divider"></li>
  <li className="dropdown-subheader">Order By</li>
  <li>
    <a className="active dropdown-item" href="#1">
      Step 01
      <span className="dropdown-item-indicator-end">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">
      Step 02
      <span className="dropdown-item-indicator-end">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a className="dropdown-item" href="#1">
      Step 03
      <span className="dropdown-item-indicator-end">
        <svg
          className="lexicon-icon lexicon-icon-times"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#times"></use>
        </svg>
      </span>
    </a>
  </li>
  <li><a className="dropdown-item" href="#1">Step 04</a></li>
  <li><a className="dropdown-item" href="#1">Step 05</a></li>
  <li className="dropdown-caption">Showing 190,722 of 192,842 Things</li>
</ul>

Start and End

Snippet

<ul
  aria-labelledby="theDropdownToggleId"
  className="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start"
>
  <li className="dropdown-header">Dropdown Header</li>
  <li className="dropdown-divider"></li>
  <li className="dropdown-subheader">Dropdown Sub Header</li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator-start">
        <svg
          className="lexicon-icon lexicon-icon-pencil"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#pencil"></use>
        </svg>
      </span>
      ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
      <span className="dropdown-item-indicator-end">
        <svg
          className="lexicon-icon lexicon-icon-angle-right"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#angle-right"></use>
        </svg>
      </span>
    </a>
  </li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator-start">
        <svg
          className="lexicon-icon lexicon-icon-view"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#view"></use>
        </svg>
      </span>
      Attendee Information
    </a>
  </li>
  <li>
    <a className="dropdown-item" href="#1">
      <span className="dropdown-item-indicator">
        <svg
          className="lexicon-icon lexicon-icon-check"
          focusable="false"
          role="presentation"
        >
          <use href="/icons.svg#check"></use>
        </svg>
      </span>
      Seat Assignment
    </a>
  </li>
  <li><a className="active dropdown-item" href="#1">Dinner Preference</a></li>
  <li><a className="dropdown-item" href="#1">Submit Payment</a></li>
  <li className="dropdown-caption">Dropdown Caption</li>
</ul>

Autofit

Make content expand to fill remaining space in a dropdown-item or create equally spaced content with a nested .autofit-row, .autofit-col, .autofit-col-shrink, and .autofit-col-expand.

Snippet

<ul aria-labelled-by="theDropdownToggleId" className="dropdown-menu show">
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand">
        <span className="autofit-section">
          <span className="inline-item inline-item-before">
            <svg
              className="lexicon-icon lexicon-icon-en-us"
              focusable="false"
              role="presentation"
            >
              <use xlinkHref="/icons.svg#en-us"></use>
            </svg>
          </span>
          en-US
        </span>
      </span>
      <span className="autofit-col">
        <span className="label label-info">
          <span className="label-item label-item-expand">Default</span>
        </span>
      </span>
    </a>
  </li>
  <li>
    <a className="autofit-row disabled dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand">
        <span className="autofit-section">
          <span className="inline-item inline-item-before">
            <svg
              className="lexicon-icon lexicon-icon-en-gb"
              focusable="false"
              role="presentation"
            >
              <use xlinkHref="/icons.svg#en-gb"></use>
            </svg>
          </span>
          en-GB
        </span>
      </span>
      <span className="autofit-col">
        <span className="label label-success">
          <span className="label-item label-item-expand">Translated</span>
        </span>
      </span>
    </a>
  </li>
  <li>
    <a className="active autofit-row dropdown-item" href="#1" tabindex="-1">
      <span className="autofit-col autofit-col-expand">
        <span className="autofit-section">
          <span className="inline-item inline-item-before">
            <svg
              className="lexicon-icon lexicon-icon-es-es"
              focusable="false"
              role="presentation"
            >
              <use xlinkHref="/icons.svg#es-es"></use>
            </svg>
          </span>
          es-ES
        </span>
      </span>
      <span className="autofit-col">
        <span className="label label-success">
          <span className="label-item label-item-expand">Translated</span>
        </span>
      </span>
    </a>
  </li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand">
        <span className="autofit-section">
          <span className="inline-item inline-item-before">
            <svg
              className="lexicon-icon lexicon-icon-fr-fr"
              focusable="false"
              role="presentation"
            >
              <use xlinkHref="/icons.svg#fr-fr"></use>
            </svg>
          </span>
          fr-FR
        </span>
      </span>
      <span className="autofit-col">
        <span className="label label-warning">
          <span className="label-item label-item-expand">Not Translated</span>
        </span>
      </span>
    </a>
  </li>
</ul>

Keyboard Shortcuts

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu show">
  <li>
    <a className="active autofit-row dropdown-item" href="#1" tabindex="-1">
      <span className="autofit-col autofit-col-expand"> First Option </span>
      <span className="autofit-col">
        <kbd className="c-kbd c-kbd-inline">
          <kbd className="c-kbd">⌘</kbd>
        </kbd>
      </span>
    </a>
  </li>
  <li>
    <a className="autofit-row disabled dropdown-item" href="#1" tabindex="-1">
      <span className="autofit-col autofit-col-expand"> Second Option </span>
      <span className="autofit-col">
        <kbd className="c-kbd c-kbd-inline">
          <kbd className="c-kbd">⌘</kbd><kbd className="c-kbd">K</kbd>
        </kbd>
      </span>
    </a>
  </li>
  <li className="dropdown-divider"></li>
  <li>
    <button className="autofit-row dropdown-item" type="button">
      <span className="autofit-col autofit-col-expand">
        Third Option is the Button Option
        ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
      </span>
      <span className="autofit-col">
        <kbd className="c-kbd c-kbd-inline">
          <kbd className="c-kbd">⌘</kbd
          ><span className="c-kbd-separator">+</span
          ><kbd className="c-kbd">Shift</kbd
          ><span className="c-kbd-separator">+</span
          ><kbd className="c-kbd">Y</kbd>
        </kbd>
      </span>
    </button>
  </li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand"> Fourth Option </span>
    </a>
  </li>
  <li className="dropdown-divider"></li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand"> Fifth Option </span>
    </a>
  </li>
  <li className="dropdown-divider"></li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand"> Sixth Option </span>
    </a>
  </li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand"> Seventh Option </span>
      <span className="autofit-col">
        <kbd className="c-kbd c-kbd-inline">
          <kbd className="c-kbd">⌘</kbd><kbd className="c-kbd">P</kbd>
        </kbd>
      </span>
    </a>
  </li>
  <li className="dropdown-divider"></li>
  <li>
    <a className="autofit-row dropdown-item" href="#1">
      <span className="autofit-col autofit-col-expand"> Eighth Option </span>
    </a>
  </li>
</ul>

Scrolling Content

Nest <div className="inline-scroller"></div> inside a .dropdown-menu list item to create a scrollable dropdown. The maximum height is 200px on screen sizes 768px and above, on screen sizes 767px and below the overflow is handled by .dropdown-menu.

Snippet

<ul aria-labelledby="theDropdownToggleId" className="dropdown-menu">
  <li className="dropdown-header">Dropdown Header</li>
  <li>
    <ul className="inline-scroller">
      <li><a className="dropdown-item" href="#1">Actions</a></li>
      <li><a className="dropdown-item" href="#1">Edit</a></li>
      <li><a className="dropdown-item" href="#1">View</a></li>
      <li><a className="dropdown-item" href="#1">Permissions</a></li>
      <li><a className="dropdown-item" href="#1">Actions</a></li>
      <li><a className="dropdown-item" href="#1">Edit</a></li>
      <li><a className="dropdown-item" href="#1">View</a></li>
      <li><a className="dropdown-item" href="#1">Permissions</a></li>
      <li><a className="dropdown-item" href="#1">Actions</a></li>
      <li><a className="dropdown-item" href="#1">Edit</a></li>
      <li><a className="dropdown-item" href="#1">View</a></li>
      <li><a className="dropdown-item" href="#1">Permissions</a></li>
      <li><a className="dropdown-item" href="#1">Actions</a></li>
      <li><a className="dropdown-item" href="#1">Edit</a></li>
      <li><a className="dropdown-item" href="#1">View</a></li>
      <li><a className="dropdown-item" href="#1">Permissions</a></li>
    </ul>
  </li>
  <li>
    <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
  </li>
  <li className="dropdown-divider"></li>
  <li><a className="dropdown-item" href="#1">Scope</a></li>
</ul>

Actions

A monospaced dropdown-toggle for a dropdown containing several actions, add dropdown-action to dropdown.

Anchors

Snippet

<div className="dropdown dropdown-action">
  <a
    aria-expanded="false"
    aria-haspopup="true"
    className="component-action dropdown-toggle"
    data-toggle="dropdown"
    href="#1"
    id="dropdownAction1"
    role="button"
  >
    <svg
      className="lexicon-icon lexicon-icon-ellipsis-v"
      focusable="false"
      role="presentation"
    >
      <use href="/icons.svg#ellipsis-v"></use>
    </svg>
  </a>
  <ul aria-labelledby="dropdownAction1" className="dropdown-menu">
    <li><a className="dropdown-item" href="#1">Download</a></li>
    <li><a className="dropdown-item" href="#1">Edit</a></li>
    <li><a className="dropdown-item" href="#1">Move</a></li>
    <li><a className="dropdown-item" href="#1">Checkout</a></li>
    <li><a className="dropdown-item" href="#1">Permissions</a></li>
    <li><a className="dropdown-item" href="#1">Move to Recycle Bin</a></li>
  </ul>
</div>

Buttons

Snippet

<div className="dropdown dropdown-action">
  <button
    aria-expanded="false"
    aria-haspopup="true"
    className="component-action dropdown-toggle"
    data-toggle="dropdown"
    id="dropdownBtnAction1"
    type="button"
  >
    <svg
      className="lexicon-icon lexicon-icon-ellipsis-v"
      focusable="false"
      role="presentation"
    >
      <use href="/icons.svg#ellipsis-v"></use>
    </svg>
  </button>
  <ul aria-labelledby="dropdownBtnAction1" className="dropdown-menu">
    <li><a className="dropdown-item" href="#1">Download</a></li>
    <li><a className="dropdown-item" href="#1">Edit</a></li>
    <li><a className="dropdown-item" href="#1">Move</a></li>
    <li><a className="dropdown-item" href="#1">Checkout</a></li>
    <li><a className="dropdown-item" href="#1">Permissions</a></li>
    <li><a className="dropdown-item" href="#1">Move to Recycle Bin</a></li>
  </ul>
</div>

Alignment

Corners

Align a dropdown menu on the top or bottom side with classes dropdown-menu, dropdown-menu-right, dropdown-menu-top, or dropdown-menu-top-right.

Snippet

<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment1"
		type="button"
	>
		Default
		<span aria-hidden="true" className="icon-caret-down"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment1"
		className="dropdown-menu"
		x-placement="bottom-start"
		style={{position: 'absolute', willChange: 'transform', top: '0px', left: '0px', transform: 'translate3d(0px, 40px, 0px)'}}
	>
		<li className="dropdown-header">Dropdown Header</li>
		<li><a className="dropdown-item" href="#1">Action</a></li>
		<li>
			<a className="disabled dropdown-item" href="#1" tabIndex="-1"
				>Disabled</a
			>
		</li>
		<li className="dropdown-divider"></li>
		<li><a className="dropdown-item" href="#1">Scope</a></li>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment2"
		type="button"
	>
		Right
		<span aria-hidden="true" className="icon-caret-down"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment2"
		className="dropdown-menu dropdown-menu-right"
	>
		<li className="dropdown-header">Dropdown Header</li>
		<li><a className="dropdown-item" href="#1">Action</a></li>
		<li>
			<a className="disabled dropdown-item" href="#1" tabIndex="-1"
				>Disabled</a
			>
		</li>
		<li className="dropdown-divider"></li>
		<li><a className="dropdown-item" href="#1">Scope</a></li>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment3"
		type="button"
	>
		Top
		<span aria-hidden="true" className="icon-caret-up"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment3"
		className="dropdown-menu dropdown-menu-top"
	>
		<li className="dropdown-header">Dropdown Header</li>
		<li><a className="dropdown-item" href="#1">Action</a></li>
		<li>
			<a className="disabled dropdown-item" href="#1" tabIndex="-1"
				>Disabled</a
			>
		</li>
		<li className="dropdown-divider"></li>
		<li><a className="dropdown-item" href="#1">Scope</a></li>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment4"
		type="button"
	>
		Top Right
		<span aria-hidden="true" className="icon-caret-up"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment4"
		className="dropdown-menu dropdown-menu-top-right"
	>
		<li className="dropdown-header">Dropdown Header</li>
		<li><a className="dropdown-item" href="#1">Action</a></li>
		<li>
			<a className="disabled dropdown-item" href="#1" tabIndex="-1"
				>Disabled</a
			>
		</li>
		<li className="dropdown-divider"></li>
		<li><a className="dropdown-item" href="#1">Scope</a></li>
	</ul>
</div>

Sides

Add the dropdown-menu-right-side, dropdown-menu-left-side, dropdown-menu-right-side-bottom, or dropdown-menu-left-side-bottom class to a dropdown menu to align it with the right side, left side, bottom-right side, or bottom-left side of the dropdown menu trigger, respectively:

Snippet

<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment5"
		type="button"
	>
		Right Side
		<span className="icon-caret-right"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment5"
		className="dropdown-menu dropdown-menu-right-side"
	>
		<li className="dropdown-header">Dropdown Header</li>
		<li><a className="dropdown-item" href="#1">Action</a></li>
		<li>
			<a className="disabled dropdown-item" href="#1" tabIndex="-1"
				>Disabled</a
			>
		</li>
		<li className="dropdown-divider"></li>
		<li><a className="dropdown-item" href="#1">Scope</a></li>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment6"
		type="button"
	>
		<span className="icon-caret-left"></span>
		Left Side
	</button>
	<ul
		aria-labelledby="dropdownAlignment6"
		className="dropdown-menu dropdown-menu-left-side"
	>
		<li className="dropdown-header">Dropdown Header</li>
		<ul className="inline-scroller">
			<li><a className="dropdown-item" href="#1">Action</a></li>
			<li>
				<a className="disabled dropdown-item" href="#1" tabIndex="-1"
					>Disabled</a
				>
			</li>
			<li className="dropdown-divider"></li>
			<li><a className="dropdown-item" href="#1">Scope</a></li>
			<li><a className="dropdown-item" href="#1">Scope</a></li>
			<li><a className="dropdown-item" href="#1">Scope</a></li>
		</ul>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment7"
		type="button"
	>
		Right Side Bottom
		<span className="icon-caret-right"></span>
	</button>
	<ul
		aria-labelledby="dropdownAlignment7"
		className="dropdown-menu dropdown-menu-right-side-bottom"
	>
		<li>
			<ul className="inline-scroller">
				<li className="dropdown-header">Dropdown Header</li>
				<li><a className="dropdown-item" href="#1">Action</a></li>
				<li>
					<a className="disabled dropdown-item" href="#1" tabIndex="-1"
						>Disabled</a
					>
				</li>
				<li className="dropdown-divider"></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
			</ul>
		</li>
	</ul>
</div>
<div className="dropdown" style={{display: 'inline-block'}}>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		className="btn btn-secondary dropdown-toggle"
		data-toggle="dropdown"
		id="dropdownAlignment8"
		type="button"
	>
		<span className="icon-caret-left"></span>
		Left Side Bottom
	</button>
	<ul
		aria-labelledby="dropdownAlignment8"
		className="dropdown-menu dropdown-menu-left-side-bottom"
	>
		<li>
			<ul className="inline-scroller">
				<li className="dropdown-header">Dropdown Header</li>
				<li><a className="dropdown-item" href="#1">Action</a></li>
				<li>
					<a className="disabled dropdown-item" href="#1" tabIndex="-1"
						>Disabled</a
					>
				</li>
				<li className="dropdown-divider"></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
				<li><a className="dropdown-item" href="#1">Scope</a></li>
			</ul>
		</li>
	</ul>
</div>

Middle

You can also center the dropdown menu to its trigger with these four helper classes: dropdown-menu-center, dropdown-menu-top-center, dropdown-menu-left-side-middle, or dropdown-menu-right-side-middle.

Snippet

<div className="dropdown">
  <button
    aria-expanded="false"
    aria-haspopup="true"
    className="btn btn-secondary dropdown-toggle"
    data-toggle="dropdown"
    id="dropdownAlignment11"
    type="button"
  >
    <span className="icon-caret-left"></span>
    Left Side Middle
  </button>
  <ul
    aria-labelledby="dropdownAlignment11"
    className="dropdown-menu dropdown-menu-left-side-middle"
  >
    <li className="dropdown-header">Dropdown Header</li>
    <ul className="inline-scroller">
      <li><a className="dropdown-item" href="#1">Action</a></li>
      <li>
        <a className="disabled dropdown-item" href="#1" tabindex="-1"
          >Disabled</a
        >
      </li>
      <li className="dropdown-divider"></li>
      <li><a className="dropdown-item" href="#1">Scope</a></li>
      <li><a className="dropdown-item" href="#1">Scope</a></li>
      <li><a className="dropdown-item" href="#1">Scope</a></li>
    </ul>
  </ul>
</div>
<div className="dropdown">
  <button
    aria-expanded="false"
    aria-haspopup="true"
    className="btn btn-secondary dropdown-toggle"
    data-toggle="dropdown"
    id="dropdownAlignment12"
    type="button"
  >
    Right Side Middle
    <span className="icon-caret-right"></span>
  </button>
  <ul
    aria-labelledby="dropdownAlignment12"
    className="dropdown-menu dropdown-menu-right-side-middle"
  >
    <li className="dropdown-header">Dropdown Header</li>
    <li><a className="dropdown-item" href="#1">Action</a></li>
    <li>
      <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
    </li>
    <li className="dropdown-divider"></li>
    <li><a className="dropdown-item" href="#1">Scope</a></li>
  </ul>
</div>

Center

To center the dropdown menu in browsers that don’t support CSS transforms, set a negative margin-left equal to the width of the dropdown-menu divided by two. To vertically align left-side and right-side dropdown-menus, set a negative margin-top equal to the height of the dropdown-menu divided by two.

Snippet

<div className="dropdown">
  <button
    aria-expanded="false"
    aria-haspopup="true"
    className="btn btn-secondary dropdown-toggle"
    data-toggle="dropdown"
    id="dropdownAlignment9"
    type="button"
  >
    Center
    <span className="icon-caret-down"></span>
  </button>
  <ul
    aria-labelledby="dropdownAlignment9"
    className="dropdown-menu dropdown-menu-center"
  >
    <li className="dropdown-header">dropdown-menu-center</li>
    <li><a className="dropdown-item" href="#1">Action</a></li>
    <li>
      <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
    </li>
    <li className="dropdown-divider"></li>
    <li><a className="dropdown-item" href="#1">Scope</a></li>
  </ul>
</div>
<div className="dropdown">
  <button
    aria-expanded="false"
    aria-haspopup="true"
    className="btn btn-secondary dropdown-toggle"
    data-toggle="dropdown"
    id="dropdownAlignment10"
    type="button"
  >
    Top Center
    <span className="icon-caret-up"></span>
  </button>
  <ul
    aria-labelledby="dropdownAlignment10"
    className="dropdown-menu dropdown-menu-top-center"
  >
    <li className="dropdown-header">dropdown-menu-top-center</li>
    <li><a className="dropdown-item" href="#1">Action</a></li>
    <li>
      <a className="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
    </li>
    <li className="dropdown-divider"></li>
    <li><a className="dropdown-item" href="#1">Scope</a></li>
  </ul>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

DropDown Menu

Variations

Default

Wide

Full

Dropdown Menu Width Full

Dropdown Menu Width Sm

Dropdown Menu Width Shrink

Dropdown Menu Height Auto

Content Types

Dividers

Form Elements

Checkbox or Radio

Search

Form Groups

Indicators

Start

End

Start and End

Autofit

Keyboard Shortcuts

Scrolling Content

Actions

Anchors

Buttons

Alignment

Corners

Sides

Middle

Center