Menu

Dropdown

Essence Plus

This component is only available in the Plus version of Essence UI.

Upgrade to Plus
render Components::Dropdown.new do |dropdown|
  dropdown.button(kind: :secondary, size: :sm, icon: Phlex::Icons::Iconoir::NavArrowDown) { "My Account" }
  dropdown.content do
    dropdown.item do
      render Phlex::Icons::Iconoir::UserCircle.new(class: "p-0.5 size-5 bg-gray-950/5 text-gray-950/30")
      plain "Account Settings"
    end
    dropdown.item do
      render Phlex::Icons::Iconoir::CreditCard.new(class: "p-0.5 size-5 bg-gray-950/5 text-gray-950/30")
      plain "Billing"
    end
    dropdown.separator
    dropdown.item do
      render Phlex::Icons::Iconoir::LogOut.new(class: "p-0.5 size-5 bg-gray-950/5 text-gray-950/30")
      plain "Log out"
    end
  end
end

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add dropdown
Manually

Add the following code and libraries into your project

Essence Plus

This component is only available in the Plus version of Essence UI.

Upgrade to Plus