<.dropdown label="Dropdown">

<.dropdown_menu_item link_type="button">
  <.icon name="hero-home" class="w-5 h-5 text-gray-500" />
  Button item with icon
</.dropdown_menu_item>
<.dropdown_menu_item link_type="a" to="/" label="a item" />
<.dropdown_menu_item link_type="a" to="/" disabled label="disabled item" />
<.dropdown_menu_item link_type="live_patch" to="/" label="Live Patch item" />
<.dropdown_menu_item link_type="live_redirect" to="/" label="Live Redirect item" />

</.dropdown>

Attributes

• options_container_id (:string)
• label (:string) - labels your dropdown option. Defaults to nil.
• class (:any) - any extra CSS class for the parent container. Defaults to nil.
• trigger_class (:string) - additional classes for the trigger button. Defaults to nil.
• menu_items_wrapper_class (:any) - any extra CSS class for menu item wrapper container. Defaults to nil.
• on_close (Phoenix.LiveView.JS) - additional JS commands to run when the dropdown closes (LiveView.JS only). Defaults to %Phoenix.LiveView.JS{ops: []}.
• side (:string) - which side of the trigger the panel opens on. "bottom" is the ordinary menu and "top" opens it upward. "left" and "right" open it BESIDE the trigger, over whatever is next to it rather than over the thing it belongs to - the account panel a sidebar pushes out into the content area. Left out, the panel opens downward and measures on every open, flipping upward when the viewport leaves no room below (the PetalDropdown hook). Naming a side skips the hook: you have already answered the question it existed to ask. Defaults to nil. Must be one of nil, "bottom", "top", "left", or "right".
• align (:string) - how the panel lines up along the other axis: leading edges flush ("start") or trailing edges flush ("end"). Above or below the trigger that is horizontal - "start" aligns the left edges so the panel grows rightward, "end" aligns the right edges so it grows leftward, which is what a menu in a right-hand corner wants. Beside the trigger it is vertical - "start" aligns the tops, "end" aligns the bottoms, which is what a user menu at the bottom of a sidebar wants. Left out it falls back to placement above and below (so "end" by default), and to "start" beside. Defaults to nil. Must be one of nil, "start", or "end".
• placement (:string) - the legacy spelling of align, kept working: "left" is align="end" (the panel grows leftward, right edges aligned, the way a menu in the right-hand corner of a navbar wants) and "right" is align="start" (it grows rightward from the trigger's left edge). Prefer align in new code, and note that placement only has an opinion about a panel above or below - beside the trigger, side already answers the horizontal question. Defaults to "left". Must be one of "left", or "right".
• direction (:string) - the legacy spelling of side on the vertical axis, kept working: "up" is side="top", "down" is side="bottom", and "auto" is the measured default you get by naming neither - it flips upward when the viewport leaves no room below (needs the PetalDropdown hook). Prefer side in new code. Defaults to "auto". Must be one of "auto", "up", or "down".
• Global attributes are accepted.

Slots

• trigger_element - custom trigger content. Rendered INSIDE the dropdown's own <button>, so never nest interactive elements (<.button>, links) here - browsers split nested buttons and the toggle binding breaks. Style the built-in trigger via trigger_class instead, e.g. trigger_class="pc-button pc-button--primary pc-button--md".
• inner_block

Attributes

• to (:string) - link path. Defaults to nil.
• label (:string) - link label.
• class (:any) - any additional CSS classes. Defaults to nil.
• disabled (:boolean) - Defaults to false.
• link_type (:string) - Defaults to "button". Must be one of "a", "live_patch", "live_redirect", or "button".
• Global attributes are accepted. Supports all globals plus: ["method", "download", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"].

Slots

• inner_block

A non-interactive heading for a group of menu items.

<.dropdown_menu_label>Signed in as matt@petal.build</.dropdown_menu_label>

Attributes

• class (:any) - any additional CSS classes. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A row of panel content that is a control rather than a command - a theme switcher, a plan badge, a storage meter. Same padding and type scale as a menu item, but it never behaves like one.

<.dropdown_menu_row>
  <span>Theme</span>
  <.color_scheme_switch id="menu-scheme" variant="segmented" class="ml-auto" />
</.dropdown_menu_row>

The ARIA call

role="none" is deliberate. The panel is a role="menu", whose only valid children are menu items, groups and separators, so a widget parked straight underneath it is out of spec whichever way you slice it. The two ways round that both cost something: re-express the control as menuitemradio items (conformant, but then it is a list of commands, not a switch), or wrap it in a menuitem and cancel the activation (what a lot of React menus do, and a menuitem containing focusable controls is its own violation). This row takes the third road: it opts out of the menu with role="none" - the same marker the panel already puts on its own inner wrapper - and lets whatever you put inside keep its native semantics. A radio group stays a radio group, reachable by Tab and announced as one.

The honest caveat: a screen reader driving the panel in menu mode may skip the row, because as far as the menu is concerned it isn't there. Put nothing in it that has no other home in your UI. If the choice really belongs in the menu, express it as menu items instead - color_scheme_switch's "dropdown" variant is exactly that shape.

Attributes

• class (:any) - any additional CSS classes. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

A thin divider between groups of menu items.

Attributes

• class (:any) - any additional CSS classes. Defaults to nil.
• Global attributes are accepted.