Components Dropdowns

Dropdowns

A dropdown is a compact UI element that allows a user to select from different options.
Basic dropdown
heex 
          <.dropdown label="Dropdown">
  <.dropdown_menu_item>
    <.icon name="hero-home" class="w-5 h-5 text-gray-500" />
    Button item with icon
  </.dropdown_menu_item>
  <.dropdown_menu_item link_type="button" label="button item" />
  <.dropdown_menu_item link_type="a" to="/" label="Link" />
  <.dropdown_menu_item link_type="a" to="/" label="Link with method" method={:put} />
  <.dropdown_menu_item link_type="live_patch" to="/" label="Live Patch" />
  <.dropdown_menu_item link_type="live_redirect" to="/" label="Live Redirect" />
  <.dropdown_menu_item phx-click="some_phoenix_click_event" label="Phoenix click event" />
</.dropdown>
Log in to view
Unlabelled dropdown
heex 
          <.dropdown>
  <.dropdown_menu_item label="Item 1" />
  <.dropdown_menu_item label="Item 2" />
</.dropdown>
Log in to view
Custom dropdown trigger
heex 
          <.dropdown>
  <:trigger_element>
    <div class="inline-flex items-center justify-center w-full align-middle focus:outline-none">
      <.avatar
        size="sm"
        src="https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
      />
      <.icon
        name="hero-chevron-down"
        class="w-4 h-4 ml-1 -mr-1 text-gray-400 dark:text-gray-100"
      />
    </div>
  </:trigger_element>
  <.dropdown_menu_item label="Item 1" />
  <.dropdown_menu_item label="Item 2" />
</.dropdown>
Log in to view
Properties
elixir 
          # <.dropdown>
attr(:options_container_id, :string)
attr(:label, :string, default: nil, doc: "labels your dropdown option")
attr(:class, :string, default: "", doc: "any extra CSS class for the parent container")

attr(:menu_items_wrapper_class, :string,
  default: "",
  doc: "any extra CSS class for menu item wrapper container"
)

attr(:js_lib, :string,
  default: "alpine_js",
  values: ["alpine_js", "live_view_js"],
  doc: "javascript library used for toggling"
)

attr(:placement, :string, default: "left", values: ["left", "right"])
attr(:rest, :global)
slot(:trigger_element)
slot(:inner_block, required: false)

# <.dropdown_menu_item>
attr(:to, :string, default: nil, doc: "link path")
attr(:label, :string, doc: "link label")
attr(:class, :string, default: "", doc: "any additional CSS classes")

attr(:link_type, :string,
  default: "button",
  values: ["a", "live_patch", "live_redirect", "button"]
)

attr(:rest, :global, include: ~w(method download hreflang ping referrerpolicy rel target type))
slot(:inner_block, required: false)