Dropdown

        <%= ui.dropdown do |dropdown| %>
  <%= dropdown.trigger 'Open' %>

  <%= dropdown.content  class: 'w-48' do %>
    <%= dropdown.title 'My Account' %>
    <%= dropdown.separator %>

    <%= dropdown.group do %>
      <% [['user', 'profile'], ['credit-card', 'billing'], ['settings', 'settings'], ['keyboard', 'keyboard shortcuts']].each do |entry| %>
        <%= dropdown.link '/', class: 'flex items-center gap-2' do %>
          <%= lucide_icon(entry[0]) %>
          <span><%= entry[1].titleize %></span>
        <% end %>
      <% end %>
    <% end %>

    <%= dropdown.separator %>

    <%= dropdown.group do %>
      <%= dropdown.link '/', class: 'flex items-center gap-2' do %>
        <%= lucide_icon('users') %>
        <span>Team</span>
      <% end %>

      <%= dropdown.submenu do %>
        <%= dropdown.submenu_trigger class: 'flex items-center justify-between' do %>
          <div class="flex items-center gap-2">
            <%= lucide_icon('user-plus') %>
            <span>Invite Users</span>
          </div>

          <%= lucide_icon('chevron-right') %>
        <% end %>

        <%= dropdown.submenu_content do %>
          <%= dropdown.button class: 'flex items-center gap-2', close: false do %>
            <%= lucide_icon('mail') %>
            <span>Email</span>
          <% end %>

          <%= dropdown.button class: 'flex items-center gap-2' do %>
            <%= lucide_icon('message-square') %>
            <span>Message</span>
          <% end %>

          <%= dropdown.separator %>

          <%= dropdown.button class: 'flex items-center gap-2' do %>
            <%= lucide_icon('circle-plus') %>
            <span>More...</span>
          <% end %>
        <% end %>
      <% end %>
    <% end %>

    <%= dropdown.separator %>

    <%= dropdown.link '/', class: 'flex items-center gap-2' do %>
      <%= lucide_icon('log-out') %>
      <span>Log Out</span>
    <% end %>
  <% end %>
<% end %>