<div class="dropdown is-spaced is-neutral is-right dropdown-trigger">
  <div>
    <a class="chat-nav-item is-icon">
      <i data-feather="settings"></i>
    </a>
  </div>
  <div class="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        <div class="media">
          <i data-feather="message-square"></i>
          <div class="media-content">
            <h3>Details</h3>
            <small>View this conversation's details.</small>
          </div>
        </div>
      </a>
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="settings"></i>
          <div class="media-content">
            <h3>Preferences</h3>
            <small>Define your preferences.</small>
          </div>
        </div>
      </a>
      <hr class="dropdown-divider" />
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="bell"></i>
          <div class="media-content">
            <h3>Notifications</h3>
            <small>Set notifications settings.</small>
          </div>
        </div>
      </a>
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="bell-off"></i>
          <div class="media-content">
            <h3>Silence</h3>
            <small>Disable notifications.</small>
          </div>
        </div>
      </a>
      <hr class="dropdown-divider" />
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="box"></i>
          <div class="media-content">
            <h3>Archive</h3>
            <small>Archive this conversation.</small>
          </div>
        </div>
      </a>
      <a class="dropdown-item">
        <div class="media">
          <i data-feather="trash-2"></i>
          <div class="media-content">
            <h3>Delete</h3>
            <small>Delete this conversation.</small>
          </div>
        </div>
      </a>
    </div>
  </div>
</div>
