Dropdown

Dropdown Padrão

Preview

HTML

<div class="dropdown">
   <input type="checkbox" id="dropdown" />
   <label for="dropdown" class="dropdown__label">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M7.33334 7.3335V4.66683H8.66668V7.3335H11.3333V8.66683H8.66668V11.3335H7.33334V8.66683H4.66668V7.3335H7.33334ZM8.00001 14.6668C4.31801 14.6668 1.33334 11.6822 1.33334 8.00016C1.33334 4.31816 4.31801 1.3335 8.00001 1.3335C11.682 1.3335 14.6667 4.31816 14.6667 8.00016C14.6667 11.6822 11.682 14.6668 8.00001 14.6668ZM8.00001 13.3335C9.4145 13.3335 10.7711 12.7716 11.7712 11.7714C12.7714 10.7712 13.3333 9.41465 13.3333 8.00016C13.3333 6.58567 12.7714 5.22912 11.7712 4.22893C10.7711 3.22873 9.4145 2.66683 8.00001 2.66683C6.58552 2.66683 5.22897 3.22873 4.22877 4.22893C3.22858 5.22912 2.66668 6.58567 2.66668 8.00016C2.66668 9.41465 3.22858 10.7712 4.22877 11.7714C5.22897 12.7716 6.58552 13.3335 8.00001 13.3335Z" fill="currentColor"/>
      </svg>
      Criar novo
   </label>
   <ul class="dropdown__options">
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
            <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
         </svg>
         Copiar
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.33332 13.3334L0.666656 8.00008L7.33332 2.66675V6.00008C11.0153 6.00008 14 8.98475 14 12.6667C14 12.8487 13.9933 13.0287 13.9787 13.2067C13.0033 11.3574 11.092 10.0794 8.87532 10.0034L8.66666 10.0001H7.33332V13.3334ZM5.99999 8.66675H8.68932L8.92066 8.67141C9.77732 8.70008 10.6033 8.87808 11.3713 9.18208C10.3933 8.05008 8.94666 7.33341 7.33332 7.33341H5.99999V5.44075L2.80132 8.00008L5.99999 10.5594V8.66675Z" fill="currentColor"/>
         </svg>
         Compartilhar
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.99999 8.39083L10.8287 11.2188L9.88532 12.1622L8.66666 10.9435V14.6668H7.33332V10.9422L6.11466 12.1622L5.17132 11.2188L7.99999 8.39083ZM7.99999 1.3335C9.14464 1.33355 10.2494 1.75424 11.1041 2.51558C11.9589 3.27691 12.504 4.32581 12.636 5.46283C13.4655 5.68904 14.1891 6.19957 14.6804 6.90518C15.1717 7.6108 15.3994 8.46662 15.3237 9.32309C15.248 10.1796 14.8738 10.9822 14.2664 11.5907C13.6589 12.1992 12.857 12.5749 12.0007 12.6522V11.3095C12.3074 11.2657 12.6024 11.1612 12.8684 11.0021C13.1343 10.8431 13.366 10.6326 13.5497 10.3831C13.7334 10.1336 13.8656 9.84991 13.9386 9.54872C14.0115 9.24753 14.0237 8.93483 13.9745 8.62888C13.9252 8.32292 13.8155 8.02983 13.6518 7.76673C13.4881 7.50363 13.2736 7.27577 13.0208 7.09648C12.768 6.91718 12.4821 6.79002 12.1797 6.72244C11.8772 6.65485 11.5644 6.64818 11.2593 6.70283C11.3637 6.21675 11.3581 5.71348 11.2428 5.22986C11.1275 4.74625 10.9055 4.29455 10.5931 3.90785C10.2806 3.52115 9.88559 3.20923 9.43697 2.99496C8.98835 2.78068 8.49749 2.66947 8.00032 2.66947C7.50316 2.66947 7.01229 2.78068 6.56368 2.99496C6.11506 3.20923 5.72005 3.52115 5.40759 3.90785C5.09513 4.29455 4.87313 4.74625 4.75784 5.22986C4.64256 5.71348 4.63692 6.21675 4.74132 6.70283C4.13309 6.58861 3.5044 6.72069 2.99355 7.07C2.4827 7.41932 2.13154 7.95727 2.01732 8.5655C1.9031 9.17373 2.03518 9.80242 2.3845 10.3133C2.73382 10.8241 3.27176 11.1753 3.87999 11.2895L3.99999 11.3095V12.6522C3.14362 12.575 2.34159 12.1994 1.73408 11.591C1.12656 10.9825 0.752208 10.1799 0.67644 9.32338C0.600671 8.46689 0.82831 7.61102 1.31957 6.90535C1.81083 6.19967 2.53446 5.68909 3.36399 5.46283C3.49579 4.32575 4.04093 3.27677 4.89571 2.51541C5.75049 1.75404 6.85529 1.3334 7.99999 1.3335Z" fill="currentColor"/>
         </svg>
         Atualizações
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3333 4.00016H14.6667V5.3335H13.3333V14.0002C13.3333 14.177 13.2631 14.3465 13.1381 14.4716C13.0131 14.5966 12.8435 14.6668 12.6667 14.6668H3.33334C3.15653 14.6668 2.98696 14.5966 2.86194 14.4716C2.73691 14.3465 2.66668 14.177 2.66668 14.0002V5.3335H1.33334V4.00016H4.66668V2.00016C4.66668 1.82335 4.73691 1.65378 4.86194 1.52876C4.98696 1.40373 5.15653 1.3335 5.33334 1.3335H10.6667C10.8435 1.3335 11.0131 1.40373 11.1381 1.52876C11.2631 1.65378 11.3333 1.82335 11.3333 2.00016V4.00016ZM12 5.3335H4.00001V13.3335H12V5.3335ZM6.00001 7.3335H7.33334V11.3335H6.00001V7.3335ZM8.66668 7.3335H10V11.3335H8.66668V7.3335ZM6.00001 2.66683V4.00016H10V2.66683H6.00001Z" fill="currentColor"/>
         </svg>
         Deletar
      </li>
   </ul>
</div>

<script>
   document.addEventListener('click', function(event) {
      const dropdown = document.querySelector('.dropdown');
      const dropdownInput = dropdown.querySelector('input[type="checkbox"]');
      
      if (!dropdown.contains(event.target)) dropdownInput.checked = false;
   });
</script>

CSS

.dropdown {
  width: 100%;
  height: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  box-shadow: 0px 4px 16px 0px #00000014;
}

.dropdown input {
  display: none;
}

.dropdown__label {
  height: 36px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #5C5C5C;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__label svg path {
  fill: #5C5C5C;
}

.dropdown__label:hover,
.dropdown__label:hover svg path {
  color: #2C2C2C;
  fill: #2C2C2C;
}

.dropdown__options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.dropdown input:checked~.dropdown__options {
  max-height: 999px;
}

.dropdown__option:first-of-type{
  margin-top: 4px;
}

.dropdown__option {
  height: 36px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #5C5C5C;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__option svg path {
  fill: #5C5C5C;
}

.dropdown__option:hover,
.dropdown__option:hover svg path {
  background-color: #F5F5F5;
  color: #2C2C2C;
  fill: #2C2C2C;
}

.dropdown__option.disabled {
  color: #A7A7A7 !important;
  cursor: not-allowed !important;
}

.dropdown__option.disabled svg path {
  fill: #A7A7A7 !important;
}

Dropdown com barra de busca

Preview

HTML

<div class="dropdown">
   <input type="checkbox" id="dropdown" />
   <label for="dropdown" class="dropdown__label">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12.0207 11.0782L14.876 13.9328L13.9327 14.8762L11.078 12.0208C10.0158 12.8723 8.69467 13.3354 7.33334 13.3335C4.02134 13.3335 1.33334 10.6455 1.33334 7.3335C1.33334 4.0215 4.02134 1.3335 7.33334 1.3335C10.6453 1.3335 13.3333 4.0215 13.3333 7.3335C13.3353 8.69483 12.8722 10.016 12.0207 11.0782ZM10.6833 10.5835C11.5294 9.71342 12.0019 8.54712 12 7.3335C12 4.75483 9.91134 2.66683 7.33334 2.66683C4.75467 2.66683 2.66667 4.75483 2.66667 7.3335C2.66667 9.9115 4.75467 12.0002 7.33334 12.0002C8.54696 12.0021 9.71326 11.5296 10.5833 10.6835L10.6833 10.5835Z" fill="currentColor"/>
         <path d="M12.0207 11.0782L14.876 13.9328L13.9327 14.8762L11.078 12.0208C10.0158 12.8723 8.69467 13.3354 7.33334 13.3335C4.02134 13.3335 1.33334 10.6455 1.33334 7.3335C1.33334 4.0215 4.02134 1.3335 7.33334 1.3335C10.6453 1.3335 13.3333 4.0215 13.3333 7.3335C13.3353 8.69483 12.8722 10.016 12.0207 11.0782ZM10.6833 10.5835C11.5294 9.71342 12.0019 8.54712 12 7.3335C12 4.75483 9.91134 2.66683 7.33334 2.66683C4.75467 2.66683 2.66667 4.75483 2.66667 7.3335C2.66667 9.9115 4.75467 12.0002 7.33334 12.0002C8.54696 12.0021 9.71326 11.5296 10.5833 10.6835L10.6833 10.5835Z" fill="currentColor" fill-opacity="0.2"/>
      </svg>
      <input type="text" placeholder="Buscar"/>
   </label>
   <ul class="dropdown__options">
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
            <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
         </svg>
         Copiar
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.33332 13.3334L0.666656 8.00008L7.33332 2.66675V6.00008C11.0153 6.00008 14 8.98475 14 12.6667C14 12.8487 13.9933 13.0287 13.9787 13.2067C13.0033 11.3574 11.092 10.0794 8.87532 10.0034L8.66666 10.0001H7.33332V13.3334ZM5.99999 8.66675H8.68932L8.92066 8.67141C9.77732 8.70008 10.6033 8.87808 11.3713 9.18208C10.3933 8.05008 8.94666 7.33341 7.33332 7.33341H5.99999V5.44075L2.80132 8.00008L5.99999 10.5594V8.66675Z" fill="currentColor"/>
         </svg>
         Compartilhar
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3333 4.00016H14.6667V5.3335H13.3333V14.0002C13.3333 14.177 13.2631 14.3465 13.1381 14.4716C13.0131 14.5966 12.8435 14.6668 12.6667 14.6668H3.33334C3.15653 14.6668 2.98696 14.5966 2.86194 14.4716C2.73691 14.3465 2.66668 14.177 2.66668 14.0002V5.3335H1.33334V4.00016H4.66668V2.00016C4.66668 1.82335 4.73691 1.65378 4.86194 1.52876C4.98696 1.40373 5.15653 1.3335 5.33334 1.3335H10.6667C10.8435 1.3335 11.0131 1.40373 11.1381 1.52876C11.2631 1.65378 11.3333 1.82335 11.3333 2.00016V4.00016ZM12 5.3335H4.00001V13.3335H12V5.3335ZM6.00001 7.3335H7.33334V11.3335H6.00001V7.3335ZM8.66668 7.3335H10V11.3335H8.66668V7.3335ZM6.00001 2.66683V4.00016H10V2.66683H6.00001Z" fill="currentColor"/>
         </svg>
         Deletar
      </li>
   </ul>
</div>

<script>
   document.addEventListener('click', function(event) {
      const dropdown = document.querySelector('.dropdown');
      const dropdownInput = dropdown.querySelector('input[type="checkbox"]');
      
      if (!dropdown.contains(event.target)) dropdownInput.checked = false;
   });
</script>

CSS

.dropdown {
  width: 100%;
  height: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  box-shadow: 0px 4px 16px 0px #00000014;
}

.dropdown input[type="checkbox"] {
  display: none;
}

.dropdown__label {
  height: 36px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__label:hover {
  background-color: #F5F5F5;
}

.dropdown__label svg path {
  fill: #2C2C2C;
}

.dropdown input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #5C5C5C;
}

.dropdown input[type="text"]::placeholder {
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #8E8E8E;
}

.dropdown__label:hover input[type="text"]::placeholder {
  color: #5C5C5C;
}

.dropdown__options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.dropdown input:checked~.dropdown__options {
  max-height: 999px;
  border-top: 1px solid #F5F5F5;
}

.dropdown__option:first-of-type {
  margin-top: 4px;
}

.dropdown__option {
  height: 36px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #5C5C5C;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__option svg path {
  fill: #5C5C5C;
}

.dropdown__option:hover,
.dropdown__option:hover svg path {
  background-color: #F5F5F5;
  color: #2C2C2C;
  fill: #2C2C2C;
}

.dropdown__option.disabled {
  color: #A7A7A7 !important;
  cursor: not-allowed !important;
}

.dropdown__option.disabled svg path {
  fill: #A7A7A7 !important;
}

Dropdown com avatar

Preview

HTML

<div class="dropdown">
   <input type="checkbox" id="dropdown" />
   <label for="dropdown" class="dropdown__label">
      <figure class="dropdown__label--avatar">
         <svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16.5001" r="16" fill="#F5F5F5"/>
            <mask id="mask0_3097_489" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="33">
               <circle cx="16" cy="16.5001" r="16" fill="#F5F5F5"/>
            </mask>
            <g mask="url(#mask0_3097_489)">
               <ellipse opacity="0.5" cx="16" cy="28.5002" rx="12" ry="6.66667" fill="#A7A7A7"/>
               <ellipse opacity="0.5" cx="16" cy="15.8335" rx="7.33333" ry="7.33333" fill="#A7A7A7"/>
            </g>
         </svg>
      </figure>
      <div class="dropdown__label--info">
         <small class="dropdown__label--name">Increazy User</small>
         <small class="dropdown__label--description">Conta pessoal</small>
      </div>
   </label>
   <ul class="dropdown__options">
      <li class="dropdown__option">
         
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.3333 14.6667H12V13.3334C12 12.803 11.7893 12.2943 11.4142 11.9192C11.0391 11.5441 10.5304 11.3334 10 11.3334H6C5.46957 11.3334 4.96086 11.5441 4.58579 11.9192C4.21072 12.2943 4.00001 12.803 4.00001 13.3334V14.6667H2.66667V13.3334C2.66667 12.4494 3.01786 11.6015 3.64298 10.9764C4.2681 10.3513 5.11595 10.0001 6 10.0001H10C10.8841 10.0001 11.7319 10.3513 12.357 10.9764C12.9821 11.6015 13.3333 12.4494 13.3333 13.3334V14.6667ZM8 8.66675C7.47472 8.66675 6.95457 8.56328 6.46927 8.36227C5.98397 8.16125 5.54301 7.86661 5.17158 7.49518C4.80014 7.12374 4.50551 6.68278 4.30449 6.19748C4.10347 5.71218 4.00001 5.19204 4.00001 4.66675C4.00001 4.14146 4.10347 3.62132 4.30449 3.13601C4.50551 2.65071 4.80014 2.20976 5.17158 1.83832C5.54301 1.46689 5.98397 1.17225 6.46927 0.97123C6.95457 0.770211 7.47472 0.666748 8 0.666748C9.06087 0.666748 10.0783 1.08818 10.8284 1.83832C11.5786 2.58847 12 3.60588 12 4.66675C12 5.72761 11.5786 6.74503 10.8284 7.49518C10.0783 8.24532 9.06087 8.66675 8 8.66675ZM8 7.33342C8.70725 7.33342 9.38553 7.05246 9.88562 6.55237C10.3857 6.05227 10.6667 5.37399 10.6667 4.66675C10.6667 3.9595 10.3857 3.28123 9.88562 2.78113C9.38553 2.28103 8.70725 2.00008 8 2.00008C7.29276 2.00008 6.61448 2.28103 6.11439 2.78113C5.61429 3.28123 5.33334 3.9595 5.33334 4.66675C5.33334 5.37399 5.61429 6.05227 6.11439 6.55237C6.61448 7.05246 7.29276 7.33342 8 7.33342Z" fill="currentColor"/>
            <path d="M13.3333 14.6667H12V13.3334C12 12.803 11.7893 12.2943 11.4142 11.9192C11.0391 11.5441 10.5304 11.3334 10 11.3334H6C5.46957 11.3334 4.96086 11.5441 4.58579 11.9192C4.21072 12.2943 4.00001 12.803 4.00001 13.3334V14.6667H2.66667V13.3334C2.66667 12.4494 3.01786 11.6015 3.64298 10.9764C4.2681 10.3513 5.11595 10.0001 6 10.0001H10C10.8841 10.0001 11.7319 10.3513 12.357 10.9764C12.9821 11.6015 13.3333 12.4494 13.3333 13.3334V14.6667ZM8 8.66675C7.47472 8.66675 6.95457 8.56328 6.46927 8.36227C5.98397 8.16125 5.54301 7.86661 5.17158 7.49518C4.80014 7.12374 4.50551 6.68278 4.30449 6.19748C4.10347 5.71218 4.00001 5.19204 4.00001 4.66675C4.00001 4.14146 4.10347 3.62132 4.30449 3.13601C4.50551 2.65071 4.80014 2.20976 5.17158 1.83832C5.54301 1.46689 5.98397 1.17225 6.46927 0.97123C6.95457 0.770211 7.47472 0.666748 8 0.666748C9.06087 0.666748 10.0783 1.08818 10.8284 1.83832C11.5786 2.58847 12 3.60588 12 4.66675C12 5.72761 11.5786 6.74503 10.8284 7.49518C10.0783 8.24532 9.06087 8.66675 8 8.66675ZM8 7.33342C8.70725 7.33342 9.38553 7.05246 9.88562 6.55237C10.3857 6.05227 10.6667 5.37399 10.6667 4.66675C10.6667 3.9595 10.3857 3.28123 9.88562 2.78113C9.38553 2.28103 8.70725 2.00008 8 2.00008C7.29276 2.00008 6.61448 2.28103 6.11439 2.78113C5.61429 3.28123 5.33334 3.9595 5.33334 4.66675C5.33334 5.37399 5.61429 6.05227 6.11439 6.55237C6.61448 7.05246 7.29276 7.33342 8 7.33342Z" fill="currentColor" fill-opacity="0.2"/>
         </svg>
         Meus dados
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 5.33342H13.3333C13.5101 5.33342 13.6797 5.40365 13.8047 5.52868C13.9298 5.6537 14 5.82327 14 6.00008V14.0001C14 14.1769 13.9298 14.3465 13.8047 14.4715C13.6797 14.5965 13.5101 14.6667 13.3333 14.6667H2.66667C2.48986 14.6667 2.32029 14.5965 2.19526 14.4715C2.07024 14.3465 2 14.1769 2 14.0001V6.00008C2 5.82327 2.07024 5.6537 2.19526 5.52868C2.32029 5.40365 2.48986 5.33342 2.66667 5.33342H4V4.66675C4 3.60588 4.42143 2.58847 5.17157 1.83832C5.92172 1.08818 6.93913 0.666748 8 0.666748C9.06087 0.666748 10.0783 1.08818 10.8284 1.83832C11.5786 2.58847 12 3.60588 12 4.66675V5.33342ZM3.33333 6.66675V13.3334H12.6667V6.66675H3.33333ZM7.33333 9.33342H8.66667V10.6667H7.33333V9.33342ZM4.66667 9.33342H6V10.6667H4.66667V9.33342ZM10 9.33342H11.3333V10.6667H10V9.33342ZM10.6667 5.33342V4.66675C10.6667 3.9595 10.3857 3.28123 9.88562 2.78113C9.38552 2.28103 8.70724 2.00008 8 2.00008C7.29276 2.00008 6.61448 2.28103 6.11438 2.78113C5.61428 3.28123 5.33333 3.9595 5.33333 4.66675V5.33342H10.6667Z" fill="currentColor"/>
         </svg>
         Alterar senha
      </li>
      <li class="dropdown__option">
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.66667 12.0002H4V13.3335H12V2.66683H4V4.00016H2.66667V2.00016C2.66667 1.82335 2.73691 1.65378 2.86193 1.52876C2.98696 1.40373 3.15653 1.3335 3.33334 1.3335H12.6667C12.8435 1.3335 13.0131 1.40373 13.1381 1.52876C13.2631 1.65378 13.3333 1.82335 13.3333 2.00016V14.0002C13.3333 14.177 13.2631 14.3465 13.1381 14.4716C13.0131 14.5966 12.8435 14.6668 12.6667 14.6668H3.33334C3.15653 14.6668 2.98696 14.5966 2.86193 14.4716C2.73691 14.3465 2.66667 14.177 2.66667 14.0002V12.0002ZM4 7.3335H8.66667V8.66683H4V10.6668L0.666672 8.00016L4 5.3335V7.3335Z" fill="currentColor"/>
         </svg>
         Sair
      </li>
   </ul>
</div>

<script>
   document.addEventListener('click', function(event) {
      const dropdown = document.querySelector('.dropdown');
      const dropdownInput = dropdown.querySelector('input[type="checkbox"]');
      
      if (!dropdown.contains(event.target)) dropdownInput.checked = false;
   });
</script>

CSS

.dropdown {
  width: 100%;
  height: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #F5F5F5;
  border-radius: 4px;
  box-shadow: 0px 4px 16px 0px #00000014;
}

.dropdown input[type="checkbox"] {
  display: none;
}

.dropdown__label {
  height: 53px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__label:hover {
  background-color: #F5F5F5;
}

.dropdown__label--info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.dropdown__label--name {
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 500;
  color: #5C5C5C;
}

.dropdown__label:hover .dropdown__label--name {
  color: #2C2C2C;
}

.dropdown input:checked+.dropdown__label .dropdown__label--info .dropdown__label--name {
  color: #01141E;
}

.dropdown__label--description {
  font-size: 12px;
  line-height: 16.8px;
  font-weight: 400;
  color: #A7A7A7;
}

.dropdown__options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}

.dropdown input:checked~.dropdown__options {
  max-height: 999px;
  border-top: 1px solid #F5F5F5;
}

.dropdown__option:first-of-type {
  margin-top: 4px;
}

.dropdown__option {
  height: 36px;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 19.6px;
  font-weight: 400;
  color: #5C5C5C;
  background-color: #fff;
  cursor: pointer;
}

.dropdown__option svg path {
  fill: #5C5C5C;
}

.dropdown__option:hover,
.dropdown__option:hover svg path {
  background-color: #F5F5F5;
  color: #2C2C2C;
  fill: #2C2C2C;
}

.dropdown__option.disabled {
  color: #A7A7A7 !important;
  cursor: not-allowed !important;
}

.dropdown__option.disabled svg path {
  fill: #A7A7A7 !important;
}

Opções para o dropdown

Opção padrão

Informação importante

O 'svg' e o 'texto' do elemento podem ser alterados de acordo com a sua necessidade. Para adicionar uma opção padrão ao seu dropdown não é necessário fazer nenhuma alteração no CSS.

Preview

HTML

<li class="dropdown__option">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
</li>


<!-- Para desabilitar a opção do seu dropdown aplique a classe "disabled" ao lado da classe "dropdown__option" 
em seu elemento <li> como no exemplo a seguir:

<li class="dropdown__option disabled">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
</li>

-->

Opção com bullet de notificação

Informação importante

O 'svg' e o 'texto' do elemento podem ser alterados de acordo com a sua necessidade. Para adicionar uma opção com bullet de notificação é necessário acrescentar o código da aba 'CSS' ao seu dropdown.

Preview

HTML

<li class="dropdown__option">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
    <span class="dropdown__option--bullet"></span>
</li>

<!-- Para desabilitar a opção do seu dropdown aplique a classe "disabled" ao lado da classe "dropdown__option" 
em seu elemento <li> como no exemplo a seguir:

<li class="dropdown__option disabled">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
    <span class="dropdown__option--bullet"></span>
</li>

-->

CSS

.dropdown__option--bullet{
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background-color: #FF3939;
  margin-left: auto;
  margin-right: 14px;
}

Opção com counter

Informação importante

O 'svg' e o 'texto' do elemento podem ser alterados de acordo com a sua necessidade. Para adicionar uma opção com counter é necessário acrescentar o código da aba 'CSS' ao seu dropdown.

Preview

HTML

<li class="dropdown__option">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
    <span class="dropdown__option--counter">321</span>
</li>

<!-- Para desabilitar a opção do seu dropdown aplique a classe "disabled" ao lado da classe "dropdown__option" 
em seu elemento <li> como no exemplo a seguir:

<li class="dropdown__option disabled">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor"/>
        <path d="M4.66667 4.00016V2.00016C4.66667 1.82335 4.7369 1.65378 4.86193 1.52876C4.98695 1.40373 5.15652 1.3335 5.33333 1.3335H13.3333C13.5101 1.3335 13.6797 1.40373 13.8047 1.52876C13.9298 1.65378 14 1.82335 14 2.00016V11.3335C14 11.5103 13.9298 11.6799 13.8047 11.8049C13.6797 11.9299 13.5101 12.0002 13.3333 12.0002H11.3333V14.0002C11.3333 14.3682 11.0333 14.6668 10.662 14.6668H2.67133C2.58342 14.6674 2.49626 14.6505 2.41488 14.6172C2.3335 14.584 2.25949 14.535 2.19711 14.473C2.13472 14.4111 2.0852 14.3374 2.05137 14.2563C2.01754 14.1751 2.00009 14.0881 2 14.0002L2.002 4.66683C2.002 4.29883 2.302 4.00016 2.67333 4.00016H4.66667ZM3.33533 5.3335L3.33333 13.3335H10V5.3335H3.33533ZM6 4.00016H11.3333V10.6668H12.6667V2.66683H6V4.00016Z" fill="currentColor" fill-opacity="0.2"/>
    </svg>
    Copiar
    <span class="dropdown__option--counter">321</span>
</li>

-->

CSS

.dropdown__option--counter{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  padding: 0px 4px;
  color: #2C2C2C;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  margin-right: 12px;
  margin-left: auto;
}

Opção com checkbox e sem ícone

Informação importante

O 'texto' do elemento pode ser alterado de acordo com a sua necessidade. Para adicionar uma opção com checkbox é necessário acrescentar o código da aba 'CSS' ao seu dropdown.

Preview

HTML

<li>
    <label class="dropdown__option" for="checkbox">
        <div class="checkbox__content">
            <input type="checkbox" name="checkbox" id="checkbox">
            <span class="checkbox__checker"></span>
        </div>
        Copiar
    </label>
</li>


<!-- Para desabilitar a opção do seu dropdown aplique a classe "disabled" ao lado da classe "dropdown__option" 
em seu elemento <label> e o atributo disabled no seu elemento <input> como no exemplo a seguir:

<li>
    <label class="dropdown__option disabled" for="checkbox">
        <div class="checkbox__content">
            <input type="checkbox" name="checkbox" id="checkbox" disabled>
            <span class="checkbox__checker"></span>
        </div>
        Copiar
    </label>
</li>

-->

CSS

.dropdown__option .checkbox__content {
  display: flex;
}

.dropdown__option .checkbox__content input[type="checkbox"] {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  appearance: none;
  cursor: pointer;
}

.dropdown__option .checkbox__content input[type="checkbox"]:checked+.checkbox__checker:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 5.6px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: all 150ms linear;
}

.dropdown__option .checkbox__content input[type="checkbox"]:checked+.checkbox__checker:before {
  background-color: #01141E;
  border: 1.5px solid #01141E;
}

.dropdown__option .checkbox__content .checkbox__checker {
  position: relative;
  cursor: pointer;
  transition: all 150ms linear;
  display: flex;
  align-items: center;
}

.dropdown__option .checkbox__content .checkbox__checker:before {
  content: '';
  -webkit-appearance: none;
  background-color: transparent;
  border-radius: 2px;
  border: 1.5px solid #A7A7A7;
  padding: 6.7px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  transition: all 150ms linear;
}

.dropdown__option .checkbox__content input[type="checkbox"]:disabled+.checkbox__checker::before {
  cursor: not-allowed;
}