Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

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
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>
 
Preview Edit Copy Delete 

Variations

With disabled item
Copy Pug
Copy HTML
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>
 
Preview Edit Copy

Auto align
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

Align right
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

Align top
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

With right icon
Copy Pug
Copy HTML
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>
 
Version A
Version B
Version Long name Lorem ipsum dolor sit
Create new based on Version A

Long item name
Copy Pug
Copy HTML
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>
          In excepteur ut, reprehenderit mollit, elit, sed enim in. Consectetur, commodo commodo ullamco, ex dolor ut occaecat ut in elit? Id aliqua, amet et fugiat labore? Deserunt deserunt in qui, laboris ad, enim veniam, sint nulla, officia in nulla. Exercitation mollit id, mollit commodo sed ullamco, culpa mollit, anim magna fugiat reprehenderit. 
        </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>Aliquip est veniam qui anim duis, tempor culpa irure deserunt dolor, nostrud minim? Enim, pariatur nulla sunt ut ipsum mollit dolor ea ea? Ullamco laboris velit magna tempor sint duis. Ut, commodo reprehenderit sit cupidatat reprehenderit mollit veniam, velit magna incididunt ea enim? Nulla officia enim labore ad ea, sint qui do do esse? </a></div></e-dropdown></div></div>
 
PreviewDolore ut ut, quis mollit proident deserunt pariatur cillum duis. Commodo aliqua in sunt tempor, occaecat laboris in ad. Ullamco lorem tempor, ex consequat, mollit voluptate mollit consequat sint. Exercitation veniam, ut elit dolore excepteur ut in consectetur. In tempor anim, velit reprehenderit laborum excepteur excepteur ut aute enim?

Only icon (use in the table)
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

Rich content
Copy Pug
Copy HTML
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">
          Nostrud in dolor, elit, eiusmod minim in adipiscing fugiat dolore? Ut aute laboris, amet ut velit, tempor nisi. 
        </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">Amet aute, et, adipiscing eu, exercitation exercitation in, eu. Ea ex est duis labore ut, et eiusmod sit. </div></div></e-dropdown></div></div>
 
Fugiat dolor, dolor, anim et esse qui eu magna? Deserunt sed reprehenderit, ut cillum voluptate sit do ut culpa, incididunt aliquip.

Auto close
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

Sticky content
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

Fullwidth
Copy Pug
Copy HTML
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>
 
Preview Edit Copy Delete 

With custom handler
Copy Pug
Copy HTML
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>
 
Select allSelect noneSelect trackedSelect untracked

Colored content
Copy Pug
Copy HTML
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">
          Lorem, dolore anim ut consectetur in, veniam veniam, quis enim laboris minim velit in? Sunt, sint amet nisi. 
        </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">Nostrud dolor, non, dolore laboris enim amet do, magna sed proident lorem esse ipsum. Aliquip sit, aliquip enim in dolor velit incididunt eu non dolor ullamco, adipiscing duis? </div></div></e-dropdown></div></div>
 
In laborum pariatur ea sed laborum, sint tempor, nostrud excepteur, labore cupidatat. Proident laboris, dolore eu in proident ut in, ut ad et.

Colored content
Copy Pug
Copy HTML
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">
          Ut nulla amet, sed ullamco ipsum et irure, sint officia. Nisi fugiat reprehenderit enim adipiscing, do nulla cupidatat qui. 
        </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">Excepteur commodo consectetur esse eu in, non est et minim. Ad aliqua nisi aliqua adipiscing aute adipiscing, nisi. </div></div></e-dropdown></div></div>
 
Dolore, ad, excepteur, dolor ullamco ipsum, veniam non, aute? In aliqua ullamco sed reprehenderit amet.

With separator
Copy Pug
Copy HTML
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>
 
Select allSelect one
Select none

API Reference

Properties

NameDescriptionTypeRequiredDefault value
data-markup-contentHTML content of the trigger elementstring
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

ButtonHeader

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.

Structure

Best practices

Dropdown button should:

  • Include a visual cue that it opens an activity list
    • like a downward caret (▼) to indicate the button will open a menu,
    • or 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"