Dropdown

Default Dropdown

Attribute data-dropdown is required on the button. Dropdown menu must use class env-dropdown__menu and should be located inside the same parent element as the button.

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

Dropdown menu divider

Add an empty list item to menu with the class env-dropdown--divider and role="separator".

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

Split button dropdown

Use env-button-group to split buttons.

<div 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"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-controls="example2-menu"
      data-dropdown
   >
      <svg class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
      <span class="env-assistive-text">Toggle Dropdown Menu</span>
   </button>
   <ul
      id="example2-menu"
      role="menu"
      aria-labelledby="example2-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li class="env-dropdown--divider" role="separator"></li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

Optional placement

Use data-container="body" on <button> element to open dropdown as an immediate child of <body>.

<div class="env-dropdown">
   <button
      id="example3-button"
      class="env-button env-button--primary env-button--icon env-button--icon-small env-button--icon-after"
      type="button"
      aria-expanded="false"
      aria-haspopup="menu"
      aria-controls="example3-menu"
      data-container="body"
      data-dropdown
   >
      Dropdown in body
      <svg class="env-icon">
         <use href="/sitevision/envision-icons.svg#icon-angle-down"></use>
      </svg>
   </button>
   <ul
      id="example3-menu"
      role="menu"
      aria-labelledby="example3-button"
      class="env-dropdown__menu"
   >
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Properties</a>
      </li>
      <li role="presentation">
         <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
      </li>
   </ul>
</div>

Default placement is aligned to start of button. Use data-placement="end" on <button> element to open dropdown aligned to end of button.

<div class="example-dropdown-placement">
   <div class="env-dropdown">
      <button
         id="example4-button"
         class="env-button env-button--slim env-button--icon"
         type="button"
         aria-expanded="false"
         aria-haspopup="menu"
         aria-controls="example4-menu"
         data-dropdown
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-menu-dots"></use>
         </svg>
         <span class="env-assistive-text">Default aligned Dropdown Menu</span>
      </button>
      <ul
         id="example4-menu"
         role="menu"
         aria-labelledby="example4-button"
         class="env-dropdown__menu"
      >
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item"
               >Properties</a
            >
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
         </li>
      </ul>
   </div>
   <div class="env-dropdown">
      <button
         id="example5-button"
         class="env-button env-button--slim env-button--icon"
         type="button"
         aria-expanded="false"
         aria-haspopup="menu"
         aria-controls="example5-menu"
         data-placement="end"
         data-dropdown
      >
         <svg class="env-icon">
            <use href="/sitevision/envision-icons.svg#icon-menu-dots"></use>
         </svg>
         <span class="env-assistive-text">End aligned Dropdown Menu</span>
      </button>
      <ul
         id="example5-menu"
         role="menu"
         aria-labelledby="example5-button"
         class="env-dropdown__menu"
      >
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Action</a>
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item"
               >Properties</a
            >
         </li>
         <li role="presentation">
            <a href="#" role="menuitem" class="env-dropdown__item">Settings</a>
         </li>
      </ul>
   </div>
</div>