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.
<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.
<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 & Fixes</a
>
</li>
<li>
<a className="dropdown-item" href="#1"
>Install, Upgrade, & 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.
<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 & Fixes</a
>
</li>
<li>
<a className="dropdown-item" href="#1"
>Install, Upgrade, & 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>
Dropdown Menu Width Full
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.
<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>
Dropdown Menu Width Sm
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.
<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>
Dropdown Menu Width Shrink
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.
<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>
Dropdown Menu Height Auto
The modifier class dropdown-menu-height-auto on dropdown-menu removes the max-height on the dropdown-menu.
<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
<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
<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
<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="/images/icons/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
<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
<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="/images/icons/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="/images/icons/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="/images/icons/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
<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="/images/icons/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="/images/icons/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="/images/icons/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
<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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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.
<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="/images/icons/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="/images/icons/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="/images/icons/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="/images/icons/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
<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.
<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
<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="/images/icons/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
<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="/images/icons/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.
<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:
<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.
<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.
<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>
Table of Contents
- 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