Dropdown

Default Dropdown

<div id="example0" class="env-dropdown">
   <button
      id="example0-button"
      class="env-button env-button--primary env-button--large env-button--icon env-button--icon-small env-button--icon-after"
      aria-expanded="false"
      aria-haspopup="true"
      data-dropdown
      type="button"
      data-target="#example0"
   >
      Dropdown
      <svg class="env-icon">
         <use xlink:href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      class="env-dropdown__menu env-dropdown__menu--large"
      aria-labelledby="example0-button"
   >
      <li>
         <a href="#" class="env-dropdown__item">Action</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Properties</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

Dropdown divider

Add a <div> element to menu list with the class env-dropdown--divider.

<div id="example1" class="env-dropdown">
   <button
      id="example1-button"
      class="env-button env-button--primary env-button--large"
      aria-expanded="false"
      aria-haspopup="true"
      data-dropdown
      type="button"
      data-target="#example1"
   >
      Dropdown
   </button>
   <ul
      class="env-dropdown__menu env-dropdown__menu--large"
      aria-labelledby="example1-button"
   >
      <li>
         <a href="#" class="env-dropdown__item">Action</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Properties</a>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li>
         <a href="#" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

Split button dropdown

Use env-button-group to split buttons.

<div
   id="example2"
   class="env-dropdown env-button-group env_list__item"
   role="group"
>
   <button
      class="env-button env-button--ghost env-button--primary"
      type="button"
   >
      Button
   </button>
   <button
      id="example2-button"
      class="env-button env-button--icon env-button--icon-small env-button--primary env-button--ghost"
      type="button"
      data-dropdown
      aria-expanded="false"
      aria-haspopup="true"
      data-target="#example2"
   >
      <svg class="env-icon">
         <use xlink:href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
      <span class="env-assistive-text">Toggle Dropdown Menu</span>
   </button>
   <ul class="env-dropdown__menu" aria-labelledby="example2-button"
      <li>
         <a href="#" class="env-dropdown__item">Action</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Properties</a>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li>
         <a href="#" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

Dropdown with menu icons

<div id="example3" class="env-dropdown">
   <button
      id="example3-button"
      class="env-button env-button--primary env-button--large env-button--icon env-button--icon-small env-button--icon-after"
      aria-expanded="false"
      aria-haspopup="true"
      data-dropdown
      type="button"
      data-target="#example3"
   >
      Dropdown
      <svg class="env-icon">
         <use xlink:href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      class="env-dropdown__menu env-dropdown__menu--large"
      aria-labelledby="example3-button"
   >
      <li>
         <button type="button" class="env-dropdown__item">
            <svg class="env-icon">
               <use xlink:href="/sitevision/envision-icons.svg#icon-file"></use>
            </svg>
            Action
         </button>
      </li>
      <li>
         <button type="button" class="env-dropdown__item">
            <svg class="env-icon">
               <use xlink:href="/sitevision/envision-icons.svg#icon-bell"></use>
            </svg>
            Properties
         </button>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li>
         <button type="button" class="env-dropdown__item">
            <svg class="env-icon">
               <use
                  xlink:href="/sitevision/envision-icons.svg#icon-check-done"
               ></use>
            </svg>
            Settings
         </button>
      </li>
   </ul>
</div>

Optional placement 9.2

Use data-dropdown-placement-body attribute on <button> element to open dropdown as an immediate child of <body>.

<div id="example4" class="env-dropdown">
   <button
      id="example4-button"
      class="env-button env-button--primary env-button--large env-button--icon env-button--icon-small env-button--icon-after"
      aria-expanded="false"
      aria-haspopup="true"
      data-dropdown
      data-dropdown-placement-body
      type="button"
      data-target="#example4"
   >
      Dropdown in body
      <svg class="env-icon">
         <use xlink:href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      class="env-dropdown__menu env-dropdown__menu--large"
      aria-labelledby="example4-button"
   >
      <li>
         <a href="#" class="env-dropdown__item">Action</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Properties</a>
      </li>
      <li>
         <a href="#" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>