Link copied!

Dropdown Examples

<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" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>
<e-dropdown data-markup-content="Dropdown Align Auto" 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="eye" type="table"></e-icon>
      Preview
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>

<e-dropdown data-markup-content="Dropdown Align Top" 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="eye" type="table"></e-icon>
      Preview
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>
<e-dropdown data-markup-content="Dropdown Align Left" data-dropdown-align="left" 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" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>

<e-dropdown data-markup-content="Dropdown Align Right" 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="eye" type="table"></e-icon>
      Preview
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>
<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>
        Menu Item 1
      </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>
        Menu Item 2
      </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>
        Menu Item 3 Has a Very Long Name
      </a>
    </div>
    <hr class="e-separator" style="margin-bottom: 0;">
    <a class="e-dropdown__item" href="#">
      <e-icon icon="plus" type="table"></e-icon>
      Create Document
    </a>
  </div>
</e-dropdown>
<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>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-fixwidth" href="#0">
      <e-icon icon="e-smile" type="table"></e-icon>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor. Nam luctus enim eget nibh porta, et porttitor ipsum accumsan. Nam dictum augue vitae est efficitur, sed interdum eros rhoncus. Sed id libero elit.
    </a>
  </div>
</e-dropdown>
<e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
  <div class="e-dropdown__content">
    <div class="e-dropdown__container">
      Tempor non velit <b>deserunt et</b>, amet. Officia magna sit laborum aute et amet proident consectetur deserunt nulla lorem.
    </div>
  </div>
</e-dropdown>
<e-dropdown data-markup-content="Dropdown With Auto-Close" 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="eye" type="table"></e-icon>
      Preview
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>
<e-dropdown data-markup-content="Full-width Dropdown Lorem Ipsum Dolor Sit" data-dropdown-fullwidth="true" 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" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>
<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">
      Dropdown with Custom Handler
    </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>
<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" href="#0">
      <e-icon icon="pencil" type="table"></e-icon>
      Edit
    </a>
    <a class="e-dropdown__item e-dropdown__item-disabled" href="#0">
      <e-icon icon="copy-block" type="table"></e-icon>
      Copy
    </a>
    <hr class="e-separator">
    <a class="e-dropdown__item" href="#0">
      <e-icon icon="trash-o" type="table"></e-icon>
      Delete
    </a>
  </div>
</e-dropdown>