DropdownMenu
OrganismAccessible dropdown using role="menu" + role="menuitem". Closes on Escape and outside click. Supports left/right alignment, icons, separators, danger and disabled items, and arrow-key navigation.
<%- include('modules/ui/DropdownMenu', {
id: 'actions-menu',
trigger: '',
items: [
{ label: 'View', icon: '' },
{ label: 'Edit', icon: '' },
{ label: 'Duplicate', icon: '' }
]
}) %><%- include('modules/ui/DropdownMenu', {
id: 'row-menu',
align: 'right',
trigger: '',
items: [
{ label: 'Open', icon: '...' },
{ label: 'Rename', icon: '...' },
{ label: 'Archive', icon: '...', disabled: true },
{ type: 'separator' },
{ label: 'Delete', icon: '...', danger: true }
]
}) %>Jane Doe
jane@example.com
<%- include('modules/ui/DropdownMenu', {
id: 'account-menu',
trigger: '',
header: '...',
items: [
{ label: 'Profile', icon: '...' },
{ label: 'Settings', icon: '...' },
{ type: 'separator' },
{ label: 'Sign out', icon: '...', danger: true }
]
}) %><%
var _id = locals.id || 'dropdown-' + Math.random().toString(36).substr(2, 9);
var _align = locals.align || 'left';
var _items = locals.items || [];
var _trigger = locals.trigger || '';
var _header = locals.header || '';
var _className = locals.className || '';
var alignClass = _align === 'right' ? 'right-0' : 'left-0';
%>
<%- _trigger %>