Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Dropdown Menu

Description

A dropdown is a list of options related to the element that triggers it.

Check the Lexicon Dropdown Menu Pattern for a more in-depth look at the motivations and proper usage of this component.

Types

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.

  • Selected Option
  • Normal Option
  • Disabled Option
{call ClayDropdown.render}
	{param items: [
		[
			'active': true,
			'href': '#',
			'label': 'Selected Option'
		],
		[
			'href': '#',
			'label': 'Normal Option'
		],
		[
			'disabled': true,
			'href': '#',
			'label': 'Disabled Option'
		]
	] /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items='[{"active": true, "href": "#", "label": "Selected Option"}, {"href": "#", "label": "Normal Option"}, {"disabled": true, "href": "#", "label": "Disabled Option"}]'
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<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>

Dropdown with dividers

Dropdown menus with dividers are primarily for use in action menus. Dividing the actions by context of use makes the actions easier to find.

  • Edit
  • Preview
  • Expire
  • View History
  • Permissions
  • Copy
  • Move
  • Move to Recycle Bin
{call ClayDropdown.render}
	{param items: [
		[
			'href': '#',
			'label': 'Edit'
		],
		[
			'href': '#',
			'label': 'Preview',
			'separator': true
		],
		[
			'href': '#',
			'label': 'Expire'
		],
		[
			'href': '#',
			'label': 'View History',
			'separator': true
		],
		[
			'href': '#',
			'label': 'Permissions',
			'separator': true
		],
		[
			'href': '#',
			'label': 'Copy'
		],
		[
			'href': '#',
			'label': 'Move',
			'separator': true
		],
		[
			'href': '#',
			'label': 'Move to Recycle Bin'
		]
	] /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items='[{"href": "#", "label": "Edit"}, {"href": "#", "label": "Preview", "separator": true}, {"href": "#", "label": "Expire"}, {"href": "#", "label": "View History", "separator": true}, {"href": "#", "label": "Permissions", "separator": true}, {"href": "#", "label": "Copy"}, {"href": "#", "label": "Move", "separator": true}, {"href": "#", "label": "Move to Recycle Bin"}]'
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<ul class="list-unstyled">
		<li><a class="dropdown-item" href="#1">Edit</a></li>
		<li><a class="dropdown-item" href="#2">Preview</a></li>
		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
		<li><a class="dropdown-item" href="#3">Expire</a></li>
		<li><a class="dropdown-item" href="#4">View History</a></li>
		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
		<li><a class="dropdown-item" href="#5">Permissions</a></li>
		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
		<li><a class="dropdown-item" href="#6">Copy</a></li>
		<li><a class="dropdown-item" href="#7">Move</a></li>
		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
		<li><a class="dropdown-item" href="#8">Move to Recycle Bin</a></li>
	</ul>
</div>

Dropdown with Checkbox or Radio

Dropdowns can be configured to have checkboxes and/or radio groups. A checkbox configuration can be suitable to filter dataset elements. While, a radio configuration can be suitable to establish the order criteria in a dataset.

{call ClayDropdown.render}
	{param items: [
		[
			'active': true,
			'checked': true,
			'inputName': 'item1checkbox',
			'inputValue': '1',
			'label': 'Selected Option',
			'type': 'checkbox'
		],
		[
			'inputName': 'item2checkbox',
			'inputValue': '2',
			'label': 'Normal Option',
			'type': 'checkbox'
		],
		[
			'disabled': true,
			'inputName': 'item3checkbox',
			'inputValue': '3',
			'label': 'Disabled Option',
			'type': 'checkbox'
		]
	] /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items='[{"active": true, "checked": true, "inputName": "item1checkbox", "inputValue": "1", "label": "Selected Option", "type": "checkbox"}, {"inputName": "item2checkbox", "inputValue": "2", "label": "Normal Option", "type": "checkbox"}, {"disabled": true, "inputName": "item3checkbox", "inputValue": "3", "label": "Disabled Option", "type": "checkbox"}]'
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<ul class="list-unstyled">
		<li 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>
		</li>
		<li 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>
		</li>
		<li class="disabled dropdown-item">
			<div class="custom-control custom-checkbox">
				<label>
					<input disabled="disabled" class="custom-control-input" type="checkbox"/>
					<span class="custom-control-label">
						<span class="custom-control-label-text">Disabled Option</span>
					</span>
				</label>
			</div>
		</li>
	</ul>
</div>

Dropdown with search field

Action menus can sometimes contain multiple elements, making it a little time consuming to scroll through the entire list of options. In these cases, you can add a search field to your dropdown menu so your users can quickly find the action and move on to their next task.

  • Selected Option
  • Normal Option
  • Disabled Option
{call ClayDropdown.render}
	{param items: [
		[
			'active': true,
			'href': '#',
			'label': 'Selected Option'
		],
		[
			'href': '#',
			'label': 'Normal Option'
		],
		[
			'href': '#',
			'label': 'Disabled Option'
		]
	] /}
	{param searchable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items=""
	searchable="true"
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<form>
		<div 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" />
							</svg>
						</button>
					</span>
				</div>
			</div>
		</div>
	</form>
	<ul class="list-unstyled">
		<li><a class="active dropdown-item" href="#1">Selected Option</a></li>
		<li><a class="dropdown-item" href="#2">Normal Option</a></li>
		<li><a class="disabled dropdown-item" href="#3" tabindex="-1">Disabled Option</a></li>
	</ul>
</div>

Dropdown with left icons

Dropdown menus with left icons are suitable for process bars (wizards), when the number of steps do not fit the screen. The dropdown menu with left icons can display the remaining steps.

Warning: .dropdown-item-indicator is deprecated, use .dropdown-item-indicator-start to get icons on the left.
  • Normal Option
  • Second Option
  • Disabled Option
{call ClayDropdown.render}
	{param items: [
		[
			'href': '#1',
			'icon': 'check',
			'label': 'Normal Option'
		],
		[
			'href': '#2',
			'icon': 'check',
			'label': 'Second Option'
		],
		[
			'disabled': true,
			'href': '#3',
			'label': 'Disabled Option'
		]
	] /}
	{param itemsIconAlignment: 'left' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items='[{"href": "#1", "icon": "check", "label": "Normal Option"}, {"href": "#2", "icon": "check", "label": "Second Option"}, {"disabled": "true", "href": "#3", "label": "Disabled Option"}]'
	itemsIconAlignment="left"
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-start">
	<ul class="list-unstyled">
		<li>
			<a class="dropdown-item" href="#1">
				<div class="dropdown-item-indicator-start">
					<svg class="lexicon-icon lexicon-icon-check" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#check" />
					</svg>
				</div>
				Normal Option
			</a>
		</li>
		<li>
			<a class="dropdown-item" href="#1">
				<div class="dropdown-item-indicator-start">
					<svg class="lexicon-icon lexicon-icon-check" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#check" />
					</svg>
				</div>
				Second Option
			</a>
		</li>
		<li>
			<a class="disabled dropdown-item" href="javascript:;" tabindex="-1">Disabled Option</a>
		</li>
	</ul>
</div>

Dropdown with right icons

Dropdown menus with right icons are suitable for process bars (wizards) when the number of steps do not fit the screen. It displays the remaining steps and emphasizes the step number by placing the icon on the right side.

Warning: .dropdown-item-indicator is deprecated, use .dropdown-item-indicator-end to get icons on the right.
  • Selected Option
  • Regular Option
  • Disabled Option
{call ClayDropdown.render}
	{param items: [
		[
			'active': true,
			'href': '#1',
			'icon': 'check',
			'label': 'Selected Option'
		],
		[
			'href': '#2',
			'icon': 'check',
			'label': 'Regular Option'
		],
		[
			'disabled': true,
			'href': '#3',
			'label': 'Disabled Option'
		]
	] /}
	{param itemsIconAlignment: 'right' /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	items='[{"active": "true", "href": "#1", "icon": "check", "label": "Selected Option"}, {"href": "#2", "icon": "check", "label": "Regular Option"}, {"disabled": "true", "href": "#3", "label": "Disabled Option"}]'
	itemsIconAlignment="right"
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-end">
	<ul class="list-unstyled">
		<li>
			<a class="active dropdown-item" href="#1">
				Selected Option
				<div class="dropdown-item-indicator-end">
					<svg class="lexicon-icon lexicon-icon-check" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#check" />
					</svg>
				</div>
			</a>
		</li>
		<li>
			<a class="dropdown-item" href="#1">
				Regular Option
				<div class="dropdown-item-indicator-end">
					<svg class="lexicon-icon lexicon-icon-check" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#check" />
					</svg>
				</div>
			</a>
		</li>
		<li>
			<a class="disabled dropdown-item" href="javascript:;" tabindex="-1">Disabled Option</a>
		</li>
	</ul>
</div>

Dropdown with Left and Right Icons

  • Normal Option
  • Second Option
  • Third Option
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu dropdown-menu-indicator-end dropdown-menu-indicator-start">
	<ul class="list-unstyled">
		<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 xlink:href="/images/icons/icons.svg#pencil" />
					</svg>
				</span>
				Normal Option
				<span class="dropdown-item-indicator-end">
					<svg class="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation">
						<use xlink:href="/images/icons/icons.svg#angle-right" />
					</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 xlink:href="/images/icons/icons.svg#view" />
					</svg>
				</span>
				Second Option
				<span class="dropdown-item-indicator-end">
					<svg class="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation">
						<use xlink:href="/images/icons/icons.svg#angle-right" />
					</svg>
				</span>
			</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 xlink:href="/images/icons/icons.svg#check" />
					</svg>
				</span>
				Third Option
				<span class="dropdown-item-indicator-end">
					<svg class="lexicon-icon lexicon-icon-angle-right" focusable="false" role="presentation">
						<use xlink:href="/images/icons/icons.svg#angle-right" />
					</svg>
				</span>
			</a>
		</li>
	</ul>
</div>

Dropdown with groups

This dropdown menu variation is for use with the management bar Filter and Order dropdown button. This configuration is used to refine the management bar UI options, providing the user with more specific mechanisms to find data.

Buttons in dropdown groups can either be primary or secondary, depending on the application needs.

  • Filter by
  • Order by
{call ClayDropdown.render}
	{param button: [
		'label': 'Done',
		'style': 'primary'
	] /}
	{param items: [
		[
			'items': [
				[
					'active': true,
					'label': 'Selected Option',
					'inputValue': '1',
					'inputName': 'item1checkbox',
					'type': 'checkbox'
				],
				[
					'label': 'Normal Option',
					'inputValue': '2',
					'inputName': 'item2checkbox',
					'type': 'checkbox'
				],
				[
					'disabled': true,
					'label': 'Disabled Option',
					'inputName': 'item3checkbox',
					'inputValue': '3',
					'type': 'checkbox'
				]
			],
			'label': 'Filter by',
			'type': 'group'
		],
		[
			'items': [
				[
					'checked': true,
					'label': 'Selected Option',
					'inputValue': '1',
					'type': 'checkbox',
					'inputName': 'item1radio',
				],
				[
					'label': "Normal Option",
					'inputValue': '2',
					'type': 'checkbox',
					'inputName': 'item2radio',
				],
				[
					'disabled': true,
					'label': 'Disabled Option',
					'inputValue': '3',
					'type': 'checkbox',
					'inputName': 'item3radio',
				]
			],
			'label': 'Order by',
			'type': 'group'
		]
	] /}
	{param searchable: true /}
	{param spritemap: '/images/icons/icons.svg' /}
	{param label: 'Trigger Label' /}
{/call}
<clay-dropdown
	button='{"label": "Done", "style": "primary"}'
	items='[
		{
			"items": [
				{
					"active": true,
					"checked": true,
					"label": "Selected Option",
					"inputValue": "1",
					"type": "checkbox"
				},
				{
					"label": "Normal Option",
					"inputValue": "2",
					"type": "checkbox"
				},
				{
					"disabled": true,
					"label": "Disabled Option",
					"inputValue": "3",
					"type": "checkbox"
				}
			],
			"inputName": "item1checkbox",
			"label": "Filter by",
			"type": "group"
		},
		{
			"items": [
				{
					"checked": true,
					"label": "Selected Option",
					"inputValue": "1",
					"type": "checkbox"
				},
				{
					"label": "Normal Option",
					"inputValue": "2",
					"type": "checkbox"
				},
				{
					"disabled": true,
					"label": "Disabled Option",
					"inputValue": "3",
					"type": "checkbox"
				}
			],
			"inputName": "item1radio",
			"label": "Order by",
			"type": "group"
		}
	]'
	searchable="true"
	spritemap="/images/icons/icons.svg"
	label="Trigger Label">
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<form>
		<div 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" />
							</svg>
						</button>
					</span>
				</div>
			</div>
		</div>
	</form>
	<form>
		<div class="inline-scroller">
			<ul class="list-unstyled">
				<li class="dropdown-subheader" role="presentation">Filter by</li>
				<li 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>
				</li>
				<li 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>
				</li>
				<li class="disabled dropdown-item">
					<div class="custom-control custom-checkbox">
						<label>
							<input disabled="disabled" class="custom-control-input" type="checkbox"/>
							<span class="custom-control-label">
								<span class="custom-control-label-text">Disabled Option</span>
							</span>
						</label>
					</div>
				</li>
				<li class="dropdown-subheader" role="presentation">Order by</li>
				<li 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>
				</li>
				<li 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>
				</li>
				<li class="disabled dropdown-item">
					<div class="custom-control custom-radio">
						<label>
							<input disabled="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>
				</li>
			</ul>
		</div>
		<div class="dropdown-section">
			<button class="btn btn-block btn-primary" type="submit">Done</button>
		</div>
	</form>
</div>

Sorting actions

Dropdown menu from actions button

A monospaced dropdown-toggle element for a dropdown menu containing several actions. To use this, add the dropdown-action class to the dropdown element.

  • Edit
  • Preview
  • Expire
  • View History
  • Permissions
  • Copy
  • Move
  • Move to Recycle Bin
{call ClayActionsDropdown.render}
	{param items: [
		[
			'items': [
				[
					'href': '#1',
					'label': 'Edit'
				],
				[
					'href': '#1',
					'label': 'Preview',
				]
			],
			'separator': true,
			'type': 'group'
		],
		[
			'items': [
				[
					'href': '#1',
					'label': 'Expire'
				],
				[
					'href': '#1',
					'label': 'View History',
				]
			],
			'separator': true,
			'type': 'group'
		],
		[
			'items': [
				[
					'href': '#1',
					'label': 'Permissions'
				]
			],
			'separator': true,
			'type': 'group'
		],
		[
			'items': [
				[
					'href': '#1',
					'label': 'Copy'
				],
				[
					'href': '#1',
					'label': 'Move'
				]
			],
			'separator': true,
			'type': 'group'
		],
		[
			'items': [
				[
					'href': '#1',
					'label': 'Move to Recycle Bin'
				]
			],
			'type': 'group'
		]
	] /}
	{param spritemap: '/images/icons/icons.svg' /}
{/call}
<clay-dropdown
	items='[
		{
			"items": [
				{
					"href": '#1',
					"label": "Edit",
				},
				{
					"href": '#1',
					"label": "Preview",
				}
			],
			"separator": true,
			"type": 'group'
		},
		{
			"items": [
				{
					"href": '#1',
					"label": "Expire",
				},
				{
					"href": '#1',
					"label": "View History",
				}
			],
			"separator": true,
			"type": 'group'
		},
		{
			"items": [
				{
					"href": '#1',
					"label": "Permissions",
				}
			],
			"separator": true,
			"type": 'group'
		},
		{
			"items": [
				{
					"href": '#1',
					"label": "Copy",
				},
				{
					"href": '#1',
					"label": "Move",
				}
			],
			"separator": true,
			"type": 'group'
		},
		{
			"items": [
				{
					"href": '#1',
					"label": "Move to the Recycle Bin",
				}
			],
			"type": 'group'
		},
	]'
	spritemap="/images/icons/icons.svg"
</clay-dropdown>
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<button aria-expanded="false" aria-haspopup="true" class="dropdown-toggle btn btn-unstyled" data-toggle="dropdown" id="dropdownAction1" role="button">
		<svg class="lexicon-icon lexicon-icon-ellipsis-v" focusable="false" role="presentation">
			<use href="/images/icons/icons.svg#ellipsis-v" />
		</svg>
	</button>
	<div aria-labelledby="dropdownAction1" class="dropdown-menu">
		<ul class="list-unstyled">
			<li><a class="dropdown-item" href="#1">Edit</a></li>
			<li><a class="dropdown-item" href="#1">Preview</a></li>
			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
			<li><a class="dropdown-item" href="#1">Expire</a></li>
			<li><a class="dropdown-item" href="#1">View History</a></li>
			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
			<li><a class="dropdown-item" href="#1">Permissions</a></li>
			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
			<li><a class="dropdown-item" href="#1">Copy</a></li>
			<li><a class="dropdown-item" href="#1">Move</a></li>
			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
			<li><a class="dropdown-item" href="#1">Move to Recycle Bin</a></li>
		</ul>
	</div>
</div>

Dropdown menu from plus button

    Dropdown Header
    • Actions
    • Edit
    • View
    • Permissions
    • Actions
    • Edit
    • View
    • Permissions
    • Actions
    • Edit
    • View
    • Permissions
    • Actions
    • Edit
    • View
    • Permissions
  • Disabled
  • Scope
You can customize this menu or see all you have by pressing "more".
Folder
Favorites
  • D Structure
  • F Structure
  • H Structure
  • J Structure
  • L Structure
  • M Structure
  • P Structure
  • Q Structure
  • R Structure
  • S Structure
  • T Structure
  • U Structure
Showing 7 of 203 Structures
<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<ul class="list-unstyled">
		<div class="dropdown-header">Dropdown Header</div>
		<div class="inline-scroller">
			<ul class="list-unstyled">
				<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>
		</div>
		<li>
			<a class="disabled dropdown-item" href="#1" tabindex="-1">Disabled</a>
		</li>
		<div class="dropdown-divider"></div>
		<li>
			<a class="dropdown-item" href="#1">Scope</a>
		</li>
	</ul>
</div>

<div aria-labelledby="theDropdownToggleId" class="dropdown-menu">
	<div class="alert alert-fluid alert-info" role="alert">
		You can customize this menu or see all you have by pressing "more".
	</div>
	<div class="dropdown-header">Folder</div>
	<div class="dropdown-divider"></div>
	<div class="dropdown-subheader">Favorites</div>
	<div class="inline-scroller">
		<ul class="list-unstyled">
			<li><a class="dropdown-item" href="#1">D Structure</a></li>
			<li><a class="dropdown-item" href="#1">F Structure</a></li>
			<li><a class="disabled dropdown-item" href="#1" tabindex="-1">H Structure</a></li>
			<li><a class="dropdown-item" href="#1">J Structure</a></li>
			<li><a class="dropdown-item" href="#1">L Structure</a></li>
			<li><a class="dropdown-item" href="#1">M Structure</a></li>
			<li><a class="dropdown-item" href="#1">P Structure</a></li>
			<li><a class="dropdown-item" href="#1">Q Structure</a></li>
			<li><a class="dropdown-item" href="#1">R Structure</a></li>
			<li><a class="dropdown-item" href="#1">S Structure</a></li>
			<li><a class="dropdown-item" href="#1">T Structure</a></li>
			<li><a class="dropdown-item" href="#1">U Structure</a></li>
		</ul>
	</div>
	<div class="dropdown-caption">Showing 7 of 203 Structures</div>
	<div class="dropdown-section">
		<button class="btn btn-block btn-secondary">More</button>
	</div>
</div>

API

ClayActionsDropdown

Property Description Type Required Default
button
Button configuration to place a button at dropdown footer. string|undefined false undefined
caption
Caption text of the dropdown. html|string|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if menu is disabled bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
expanded
Flag to indicate if menu is expanded. bool false false
helpText
Help text to be shown on top of the open dropdown. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
items
List of menu items. Array true undefined
itemsIconAlignment
Position in which item icon will be placed. Needed if any item has icons. string|undefined false undefined
preferredAlign
The preferred alignment for the dropdown content. string|undefined false BottomLeft
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
triggerAriaLabel
Aria label attribute for the trigger element. string|undefined false undefined
triggerClasses
CSS classes to be applied to the trigger element. string|undefined false undefined
triggerTitle
String to be used for title attribute of action dropdown string|undefined false undefined

ClayCreationMenuDropdown

Property Description Type Required Default
button
Button configuration to place a button at dropdown footer. string|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if menu is disabled bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
expanded
Flag to indicate if menu is expanded. bool false false
helpText
Help text to be shown on top of the open dropdown. string|undefined false undefined
id
Id to be applied to the element. string|undefined false undefined
itemsIconAlignment
Position in which item icon will be placed. Needed if any item has icons. string|undefined false undefined
maxPrimaryItems
Maximum number of primary items to show. Only take in account when secondaryItems are passed, otherwise maxTotalItems is used. number|undefined false 8
maxSecondaryItems
Maximum number of secondary items to show. number|undefined false 7
maxTotalItems
Maximum number of total items to show. number|undefined false 15
preferredAlign
The preferred alignment for the dropdown content. string|undefined false BottomLeft
primaryItems
List of primary menu items. Array true undefined
secondaryItems
List of secondary menu items. Array|undefined false undefined
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
triggerAriaLabel
Aria label attribute for the trigger element. string|undefined false undefined
triggerClasses
CSS classes to be applied to the trigger element. string|undefined false undefined
triggerTitle
The title attribute of the trigger element. string|undefined false undefined
viewMoreURL
The url for the view more button in case is rendered. string|undefined false undefined

ClayDropdown

Property Description Type Required Default
button
Button configuration to place a button at dropdown footer. string|undefined false undefined
contentRenderer
Content Renderer name of items. string|undefined false undefined
data
Data to add to the element. object false undefined
defaultEventHandler
Object that wires events with default listeners object|undefined false undefined
disabled
Flag to indicate if menu is disabled bool false false
elementClasses
CSS classes to be applied to the element. string|undefined false undefined
expanded
Flag to indicate if menu is expanded. bool false false
id
Id to be applied to the element. string|undefined false undefined
icon
Icon to use in the trigger. string|undefined false undefined
items
List of menu items. Array true undefined
itemsIconAlignment
Position in which item icon will be placed. Needed if any item has icons. string|undefined false undefined
label
Label of the trigger button. html|string|undefined false undefined
preferredAlign
The preferred alignment for the dropdown content. string|undefined false BottomLeft
searchable
Flag to indicate if menu has a search field and search through elements is possible. bool false false
showToggleIcon
Flag to indicate if toggle icon should appear or not. bool false true
spritemap
The path to the SVG spritemap file containing the icons. string true undefined
style
Style of the trigger button. string false unstyled
triggerAriaLabel
Aria label attribute for the trigger element. string|undefined false undefined
triggerClasses
CSS classes to be applied to the trigger element. string|undefined false undefined
triggerTitle
The title attribute of the trigger element. string|undefined false undefined
triggerSize
Size of the trigger button. string|undefined false undefined
useSearchableWithForm
Flag to indicate whether the search element will be wrapped with bool false true

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.