Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Dropdown Button

Use the dropdown button to open a pre-defined piece of content, like a list of menu items or local settings. Grouping multiple related actions together under a single drop-down can save space, reduce noise, and spare the user mental overload, while still keeping the context of the interface.

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
<e-dropdown>

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Variations

With disabled item
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__item-disabled

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="files-o" type="table"></e-icon>
           Copy
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="files-o" type="table"></e-icon>
           Copy
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy

Auto align
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-dropdown-align="auto"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="auto" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="auto" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Align right
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-dropdown-align="right"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Align top
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-dropdown-align="top"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="top" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="top" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

With right icon
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__item-righticon

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__item" href="#">
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version A
          </a>
        </div>
        <div class="e-dropdown__item e-dropdown__item-righticon" href="#">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version B
          </a>
        </div>
        <div class="e-dropdown__item e-dropdown__item-righticon" href="#">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version Long name Lorem ipsum dolor sit
          </a>
        </div>
        <hr class="e-separator" style="margin-bottom: 0;">
        <a class="e-dropdown__item" href="#">
          <e-icon icon="eye" type="table"></e-icon>
           Create new based on Version A
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__item" href="#">
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version A
          </a>
        </div>
        <div class="e-dropdown__item e-dropdown__item-righticon" href="#">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version B
          </a>
        </div>
        <div class="e-dropdown__item e-dropdown__item-righticon" href="#">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version Long name Lorem ipsum dolor sit
          </a>
        </div>
        <hr class="e-separator" style="margin-bottom: 0;">
        <a class="e-dropdown__item" href="#">
          <e-icon icon="eye" type="table"></e-icon>
           Create new based on Version A
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Version A
Version B
Version Long name Lorem ipsum dolor sit
Create new based on Version A

Long item name
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__item-fixwidth

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item e-dropdown__item-fixwidth" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
          Sed aliquip nostrud enim excepteur occaecat in. Nostrud dolore, ullamco sunt. Est, pariatur ut dolore cillum dolore, incididunt eiusmod pariatur. Ut, proident ex deserunt est reprehenderit ad nisi sint. In, dolor, ut ex ex. 
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item e-dropdown__item-fixwidth" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
          Consequat dolor sunt, aliqua in ullamco voluptate, cupidatat amet laboris pariatur. Sunt aute nisi aliquip ut excepteur do nisi magna incididunt id non laboris nisi. Voluptate, deserunt consectetur, ea in sint labore nulla, ex sit dolore. Laboris, elit, qui, nulla, anim amet? Officia dolore, sint, eu lorem fugiat ad est consequat veniam, esse. 
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
PreviewEt consequat cillum labore fugiat, ea aute quis officia, elit laboris dolore velit. Ullamco consequat sint duis nulla cupidatat culpa exercitation. Deserunt excepteur in velit laboris ut, reprehenderit. In in aliquip sit dolor reprehenderit. Ullamco excepteur elit ea in dolor minim in.

Only icon (use in the table)
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-markup-content="<e-icon icon='dots' type='table'></e-icon>"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="&lt;e-icon icon='dots' type='table'&gt;&lt;/e-icon&gt;" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="&lt;e-icon icon='dots' type='table'&gt;&lt;/e-icon&gt;" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Rich content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__container

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Quis voluptate in et, sed, fugiat mollit ut mollit proident minim, adipiscing. Ut, anim nisi duis, tempor in in tempor, qui dolor laborum irure. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          In enim, ad laboris et commodo in, elit ex ut non ad. Irure deserunt adipiscing sint culpa dolor do sed velit consectetur do. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Minim, lorem labore eu laborum adipiscing, pariatur esse occaecat ut. Cupidatat in labore non adipiscing non deserunt adipiscing aliquip.

Auto close
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-autoclose

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-autoclose data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-autoclose data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Sticky content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-dropdown-sticky="true"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

Fullwidth
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
data-dropdown-fullwidth="true"

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown with a long button text" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-fullwidth="true">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown with a long button text" data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-fullwidth="true">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a class="e-dropdown__item" href="#0">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Preview Edit Copy Delete 

With custom handler
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
      <e-dropdown-handler>
        <input class="e-checkbox e-checkbox-onlycheckbox" id="chb_dropdown" type="checkbox">
        <label for="chb_dropdown">
          &nbsp;Custom
        </label>
      </e-dropdown-handler>
      <div class="e-dropdown__content">
        <a class="e-dropdown__item">
          Select all
        </a>
        <a class="e-dropdown__item">
          Select none
        </a>
        <a class="e-dropdown__item">
          Select tracked
        </a>
        <a class="e-dropdown__item">
          Select untracked
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-class="e-btn e-btn-dropdown e-btn-no_minwidth" data-dropdown-sticky="true">
      <e-dropdown-handler>
        <input class="e-checkbox e-checkbox-onlycheckbox" id="chb_dropdown" type="checkbox">
        <label for="chb_dropdown">
          &nbsp;Custom
        </label>
      </e-dropdown-handler>
      <div class="e-dropdown__content">
        <a class="e-dropdown__item">
          Select all
        </a>
        <a class="e-dropdown__item">
          Select none
        </a>
        <a class="e-dropdown__item">
          Select tracked
        </a>
        <a class="e-dropdown__item">
          Select untracked
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Select allSelect noneSelect trackedSelect untracked

Colored content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__inner-danger

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Aliquip, anim, labore ex ullamco et excepteur anim eu in ex, laboris ex. Commodo aute, non et in et aliqua incididunt? 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Reprehenderit amet quis deserunt sit in, aliqua occaecat, incididunt quis id amet fugiat. In mollit culpa nostrud mollit exercitation ipsum tempor, magna in occaecat. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Ut quis consectetur mollit magna nostrud ad? Exercitation irure cillum occaecat excepteur laboris officia pariatur laboris pariatur eu.

Colored content
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
.e-dropdown__inner-success

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Do sunt mollit labore, duis, velit cillum. Anim eiusmod sint, cillum ut, cupidatat labore cupidatat in nostrud enim, mollit. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Eiusmod et reprehenderit ut nostrud ad, do, laborum? Officia, dolore, culpa irure veniam qui exercitation excepteur elit ut ut labore mollit. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Labore, tempor cillum cillum proident occaecat, aute, adipiscing, nisi? Ipsum sunt non do pariatur tempor, incididunt duis quis, deserunt eiusmod ad.

With separator
Copy Pug
Copy HTML
Open in playground
Show code
Hide code

<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item">
          Select all
        </a>
        <a class="e-dropdown__item">
          Select one
        </a>
        <hr class="e-separator">
        <a class="e-dropdown__item">
          Select none
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a class="e-dropdown__item">
          Select all
        </a>
        <a class="e-dropdown__item">
          Select one
        </a>
        <hr class="e-separator">
        <a class="e-dropdown__item">
          Select none
        </a>
      </div>
    </e-dropdown>
  </div>
</div>
JavaScript
Copy JavaScript
 
Select allSelect one
Select none

API Reference

Properties

NameDescriptionTypeRequiredDefault value
data-markup-contentHTML content of the trigger elementhtml
data-markup-classClass of the trigger elementstring
data-dropdown-alignAlignment of the dropdown component['auto', 'right']
data-autocloseIf set, dropdown won't close after clicking an item in itboolean-
data-dropdown-stickyRemoves the arrow and strech the size of the dropdown to 100%booleanfalse

Events

EventDescriptionReturns
statusFires on open/close{ detail: { status: ['opened', 'closed'] } }

Related components

ButtonHeading

Dropdown Button

Use the dropdown button to open a pre-defined piece of content, like a list of menu items or local settings. Grouping multiple related actions together under a single drop-down can save space, reduce noise, and spare the user mental overload, while still keeping the context of the interface.

Best practices

Dropdown button should:

  • Include a visual cue that it opens an activity list:
    • A downward caret (▼) to indicate the button will open a menu.
    • Three dots indicating a "more options" list.
  • Have a label associated with the content of the drop-down.
  • Close the activity list if the user clicks outside.
  • Order items by user importance (action impact and frequency of usage).
  • Group similar items together and visually separate groups with horizontal lines.
  • Open the activity list under the button, unless there's a reason it cannot be done. In that case, the list should open above the button.

Try to avoid:

  • Too long lists (more than 10 items).
  • Multiple actions for each activity list item.
  • Alphabetic ordering of items when there is a more logical ordering possible based on meaning.
  • To have only a very few menu items to show. Instead, make discrete buttons for those actions.
  • Making a drop-down with multiple levels of depth: the user shouldn't have to use further drop-downs inside a drop-down content.
  • Making the drop-down content too big, too bloated "mega drop-down". Instead try to organise the content in different drop-downs on the same level.
  • Including actions in the drop-down out of place based on the label of the drop-down button.

Content guidelines

Dropdown button label should:

  • Have a clear and descriptive text, avoid too vague words, like "More".