Drop Down

yarn add @clayui/drop-down

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

Composing
- Using dropdown without a trigger
DropDownWithItems
API

Composing

DropDown's composition gives you the space to create more complex DropDowns, such as adding a form within DropDown, and creating simple DropDowns with the high-level ClayDropDownWithItems component that covers most basic Lexicon use cases.

You may want to use only the content of DropDown for other cases, such as mounting an Autocomplete, so use DropDown.Menu instead of DropDown which gives you the flexibility to only control content without a trigger.

DropDown consists of a DropDown.Menu that controls the trigger and uses it as the basis for aligning DropDown content.

You may want to create a trigger that is not necessarily in the same tree as DropDown, due to HTML markup issues, for these cases you can use <ClayDropDown.Menu />.

Using <ClayDropDown.Menu /> allows you to better control the state of DropDown but you will have to deal with visibility, focus management, and other details.

import ClayDropDown from '@clayui/drop-down';
import React, {useState, useRef} from 'react';

const Menu = ({children, hasLeftSymbols, hasRightSymbols}) => {
	const triggerElementRef = useRef(null);
	const [expand, setExpand] = useState(false);
	const menuElementRef = useRef(null);

	const handleExpand = (event) => {
		// This is not ideal for allowing you to have more than
		// one trigger for the same content but it simulates the
		// advantages of controlling `DropDown.Menu`.
		triggerElementRef.current = event.target;

		setExpand(!expand);
	};

	return (
		<div>
			<div>
				<button type="button" onClick={handleExpand}>
					Home
				</button>
			</div>
			<div>
				<button type="button" onClick={handleExpand}>
					Product
				</button>
			</div>

			<ClayDropDown.Menu
				active={expand}
				alignElementRef={triggerElementRef}
				hasLeftSymbols={hasLeftSymbols}
				hasRightSymbols={hasRightSymbols}
				onSetActive={() => setExpand(!expand)}
				ref={menuElementRef}
			>
				{children}
			</ClayDropDown.Menu>
		</div>
	);
};

DropDownWithItems

Allows you to create a simple DropDown, through its API you are able to create a Menu with groups of checkboxes and radios, links, buttons, search, caption, etc.

Code Sample (expand to see it)

API

ClayDropDown

Property	Type	Required	Default	Description
active	boolean	false	false	Flag to indicate if the DropDown menu is active or not.
alignmentPosition	React.ComponentProps<typeof Menu>['alignmentPosition']	false		Default position of menu element. Values come from `./Menu`.
containerElement	React.JSXElementConstructor<any> \| 'div' \| 'li'	false	'div'	HTML element tag that the container should render.
hasRightSymbols	boolean	false		Flag to indicate if menu contains icon symbols on the right side.
hasLeftSymbols	boolean	false		Flag to indicate if menu contains icon symbols on the left side.
menuElementAttrs	React.HTMLAttributes<HTMLDivElement>	false		Prop to pass DOM element attributes to <DropDown.Menu />.
onActiveChange	(val: boolean) => void	true		Callback for when the active state changes.
offsetFn	React.ComponentProps<typeof Menu>['offsetFn']	false		Function for setting the offset of the menu from the trigger.
trigger	React.ReactElement & { ref?: (node: HTMLButtonElement \| null) => void; }	true		Element that is used as the trigger which will activate the dropdown on click.

ClayDropDown.Action

Extends from React.HTMLAttributes<HTMLButtonElement>

ClayDropDown.Caption

Extends from React.HTMLAttributes<HTMLDivElement>

ClayDropDown.Divider

Extends from React.HTMLAttributes<HTMLLIElement>

ClayDropDown.Group

Property	Type	Required	Default	Description
header	string	false		Value provided is a display component that is a header for the items in the group.

ClayDropDown.Help

Extends from React.HTMLAttributes<HTMLDivElement>

ClayDropDown.Item

Property	Type	Required	Description
active	boolean	false	Flag that indicates if item is selected.
disabled	boolean	false	Flag that indicates if item is disabled or not.
href	string	false	Path for item to link to.
innerRef	React.Ref<any>	false
spritemap	string	false	Path to icon spritemap from clay-css.
symbolLeft	string	false	Flag that indicates if there is an icon symbol on the left side.
symbolRight	string	false	Flag that indicates if there is an icon symbol on the right side.

ClayDropDown.ItemList

Extends from React.HTMLAttributes<HTMLUListElement>

Property	Type	Required	Default	Description
active	boolean	false		Flag to indicate if menu is showing or not.
alignElementRef	React.RefObject<HTMLElement>	true		HTML element that the menu should be aligned to
autoBestAlign	boolean	false	true	Flag to suggest or not the best region to align menu element.
alignmentPosition	number \| TPointOptions	false	Align.BottomLeft	Default position of menu element. Values come from above. Align.TopCenter = 0; Align.TopRight = 1; Align.RightCenter = 2; Align.BottomRight = 3; Align.BottomCenter = 4; Align.BottomLeft = 5; Align.LeftCenter = 6; Align.TopLeft = 7; Defaults to BottomLeft You can also pass an array of strings, corresponding to the points of the targetNode and sourceNode, `[sourceNode, targetNode]`. Points can be 't'(top), 'b'(bottom), 'c'(center), 'l'(left), 'r'(right). For example: `['tl', 'bl']` corresponds to the bottom left alignment.
hasLeftSymbols	boolean	false		Flag to indicate if menu is displaying a clay-icon on the left.
hasRightSymbols	boolean	false		Flag to indicate if menu is displaying a clay-icon on the right.
focusRefOnEsc	React.RefObject<HTMLElement>	false		Element ref to call focus() on after menu is closed via Escape key
offsetFn	(points: TPointOptions) => [number, number]	false	(points) => OFFSET_MAP[points.join('') as keyof typeof OFFSET_MAP] as [ number, number ]	Function for setting the offset of the menu from the trigger.
onSetActive	(val: boolean) => void	true		Callback function for when active state changes.

ClayDropDown.Search

Property	Type	Required	Default	Description
formProps	React.HTMLAttributes<HTMLFormElement>	false	{}	Props to add to form element
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	true		Callback for when input value changes.
spritemap	string	false		Path to the location of the spritemap resource.
value	React.ReactText	true		Value of the searchInput

ClayDropDownWithItems

Property	Type	Required	Default	Description
spritemap	string	false		The path to the SVG spritemap file containing the icons.
items	Array<IItem>	true		List of items to display in drop down menu
alignmentPosition	React.ComponentProps< typeof ClayMenu >['alignmentPosition']	false		Default position of menu element. Values come from `./Menu`.
caption	string	false		Informational text that appears at the end or above the `footerContent` prop.
className	string	false
containerElement	React.ComponentProps< typeof ClayDropDown >['containerElement']	false		HTML element tag that the container should render.
footerContent	React.ReactElement	false		Add an action button or any other element you want to be fixed position to the footer from the DropDown.
trigger	React.ReactElement	true		Element that is used as the trigger which will activate the dropdown on click.
helpText	string	false		Add informational text at the top of DropDown.
menuElementAttrs	React.ComponentProps< typeof ClayDropDown >['menuElementAttrs']	false		Prop to pass DOM element attributes to <DropDown.Menu />.
offsetFn	React.ComponentProps<typeof ClayDropDown>['offsetFn']	false		Function for setting the offset of the menu from the trigger.
onSearchValueChange	(newValue: string) => void	false	() => {}	Callback will always be called when the user is interacting with search.
searchable	boolean	false		Flag to show search at the top of the DropDown.
searchProps	Omit< React.ComponentProps<typeof Search>, 'onChange' \| 'spritemap' \| 'value' >	false		Pass the props to the Search component.
searchValue	string	false	''	The value that will be passed to the search input element.

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.

Code Sample (expand to see it)

<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<ul class="list-unstyled">
		<li><a class="active dropdown-item" href="#1">Selected Option</a></li>
		<li><a class="dropdown-item" href="#3">Normal Option</a></li>
		<li>
			<a class="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.

Code Sample (expand to see it)

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

Code Sample (expand to see it)

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

Content Types

Dividers

Code Sample (expand to see it)

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

Form Elements

Checkbox or Radio

Code Sample (expand to see it)

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

Search

Code Sample (expand to see it)

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

Form Groups

Code Sample (expand to see it)

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

Indicators

Start

Code Sample (expand to see it)

<ul
	aria-labelledby="theDropdownToggleId"
	class="dropdown-menu dropdown-menu-indicator-start"
>
	<li class="dropdown-header">Dropdown Header</li>
	<li class="dropdown-divider"></li>
	<li class="dropdown-subheader">Dropdown Sub Header</li>
	<li>
		<a class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator-start">
				<svg
					class="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 class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator-start">
				<svg
					class="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 class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator-start">
				<svg
					class="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 class="active dropdown-item" href="#1">Dinner Preference</a></li>
	<li><a class="dropdown-item" href="#1">Submit Payment</a></li>
	<li class="dropdown-caption">Dropdown Caption</li>
</ul>

End

Code Sample (expand to see it)

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

Start and End

Code Sample (expand to see it)

<ul
	aria-labelledby="theDropdownToggleId"
	class="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start"
>
	<li class="dropdown-header">Dropdown Header</li>
	<li class="dropdown-divider"></li>
	<li class="dropdown-subheader">Dropdown Sub Header</li>
	<li>
		<a class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator-start">
				<svg
					class="lexicon-icon lexicon-icon-pencil"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#pencil"></use>
				</svg>
			</span>
			ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
			<span class="dropdown-item-indicator-end">
				<svg
					class="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 class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator-start">
				<svg
					class="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 class="dropdown-item" href="#1">
			<span class="dropdown-item-indicator">
				<svg
					class="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 class="active dropdown-item" href="#1">Dinner Preference</a></li>
	<li><a class="dropdown-item" href="#1">Submit Payment</a></li>
	<li class="dropdown-caption">Dropdown Caption</li>
</ul>

Keyboard Shortcuts

Code Sample (expand to see it)

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

Scrolling Content

Nest <div class="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.

Code Sample (expand to see it)

<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<li class="dropdown-header">Dropdown Header</li>
	<li>
		<ul class="inline-scroller">
			<li><a class="dropdown-item" href="#1">Actions</a></li>
			<li><a class="dropdown-item" href="#1">Edit</a></li>
			<li><a class="dropdown-item" href="#1">View</a></li>
			<li><a class="dropdown-item" href="#1">Permissions</a></li>
			<li><a class="dropdown-item" href="#1">Actions</a></li>
			<li><a class="dropdown-item" href="#1">Edit</a></li>
			<li><a class="dropdown-item" href="#1">View</a></li>
			<li><a class="dropdown-item" href="#1">Permissions</a></li>
			<li><a class="dropdown-item" href="#1">Actions</a></li>
			<li><a class="dropdown-item" href="#1">Edit</a></li>
			<li><a class="dropdown-item" href="#1">View</a></li>
			<li><a class="dropdown-item" href="#1">Permissions</a></li>
			<li><a class="dropdown-item" href="#1">Actions</a></li>
			<li><a class="dropdown-item" href="#1">Edit</a></li>
			<li><a class="dropdown-item" href="#1">View</a></li>
			<li><a class="dropdown-item" href="#1">Permissions</a></li>
		</ul>
	</li>
	<li>
		<a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
	</li>
	<li class="dropdown-divider"></li>
	<li><a class="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

Code Sample (expand to see it)

<div class="dropdown dropdown-action">
	<a
		aria-expanded="false"
		aria-haspopup="true"
		class="component-action dropdown-toggle"
		href="#1"
		id="dropdownAction1"
		role="button"
	>
		<svg
			class="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" class="dropdown-menu">
		<li><a class="dropdown-item" href="#1">Download</a></li>
		<li><a class="dropdown-item" href="#1">Edit</a></li>
		<li><a class="dropdown-item" href="#1">Move</a></li>
		<li><a class="dropdown-item" href="#1">Checkout</a></li>
		<li><a class="dropdown-item" href="#1">Permissions</a></li>
		<li><a class="dropdown-item" href="#1">Move to Recycle Bin</a></li>
	</ul>
</div>

Buttons

Code Sample (expand to see it)

<div class="dropdown dropdown-action">
	<button
		aria-expanded="false"
		aria-haspopup="true"
		class="component-action dropdown-toggle"
		id="dropdownBtnAction1"
		type="button"
	>
		<svg
			class="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" class="dropdown-menu">
		<li><a class="dropdown-item" href="#1">Download</a></li>
		<li><a class="dropdown-item" href="#1">Edit</a></li>
		<li><a class="dropdown-item" href="#1">Move</a></li>
		<li><a class="dropdown-item" href="#1">Checkout</a></li>
		<li><a class="dropdown-item" href="#1">Permissions</a></li>
		<li><a class="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.

Code Sample (expand to see it)

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

Code Sample (expand to see it)

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

Code Sample (expand to see it)

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

Code Sample (expand to see it)

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

Composing

Using dropdown without a trigger

DropDownWithItems

API

ClayDropDown

ClayDropDown.Action

ClayDropDown.Caption

ClayDropDown.Divider

ClayDropDown.Group

ClayDropDown.Help

ClayDropDown.Item

ClayDropDown.ItemList

ClayDropDown.Menu

ClayDropDown.Search

ClayDropDownWithItems

Variations

Default

Wide

Full

Content Types

Dividers

Form Elements

Checkbox or Radio

Search

Form Groups

Indicators

Start

End

Start and End

Keyboard Shortcuts

Scrolling Content

Actions

Anchors

Buttons

Alignment

Corners

Sides

Middle

Center