Attributes

• id (:string) (required)
• Global attributes are accepted.

Slots

• inner_block (required)

A heading for a group of menu items within a dropdown.

This component provides a semantic heading for sections of menu items with proper ARIA labeling. When used as the first child of a dropdown_section, the JavaScript hook automatically establishes the aria-labelledby relationship.

Attributes

• id - Unique identifier for the heading, required for ARIA relationships.
• class - CSS classes for styling the heading

Examples

<.dropdown_section>
  <.dropdown_heading id="recent-files-heading">Recent Files</.dropdown_heading>
  <.dropdown_item id="doc-item">Document.pdf</.dropdown_item>
  <.dropdown_item id="sheet-item">Spreadsheet.xlsx</.dropdown_item>
</.dropdown_section>

Accessibility

The heading uses role="presentation" to prevent it from being treated as a menu item while still providing semantic structure. When used as the first child of a section, the JavaScript hook sets the section's aria-labelledby to reference the heading's ID.

Attributes

• id (:string) (required)
• class (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)

A menu item component for use within a dropdown menu.

This component represents an individual item in a dropdown menu with proper ARIA attributes and keyboard navigation support. By default, it renders as a div element, but can be customized to render as any component using the as attribute.

Attributes

• id - Unique identifier for the menu item, required for ARIA relationships
• class - CSS classes for styling the menu item
• disabled - Boolean to mark the item as disabled (default: false)
• as - Custom function component to render instead of the default div element

Examples

# Basic menu item
<.dropdown_item id="save-item">
  Save
</.dropdown_item>

# Disabled menu item
<.dropdown_item id="delete-item" disabled={true}>
  Delete (unavailable)
</.dropdown_item>

# With custom component (e.g., a link)
<.dropdown_item id="profile-item" as={&my_link_component/1}>
  View Profile
</.dropdown_item>

# With Phoenix.Component.link
<.dropdown_item id="profile-item" as={&link/1} navigate={~p"/profile"}>
  View Profile
</.dropdown_item>

Custom Component Requirements

When using the as attribute, the custom component receives all the standard attributes including role="menuitem", tabindex="-1", and accessibility attributes like aria-disabled when appropriate.

IMPORTANT: Custom components must accept and pass through global attributes using the :global attribute type (commonly via @rest). This ensures that Prima's accessibility attributes are properly applied to the rendered element.

Example of a properly configured custom component:

attr :rest, :global
slot :inner_block, required: true

def my_custom_item(assigns) do
  ~H"""
  <a {@rest}>
    {

ender_slot(@inner_block)}

  </a>
  """
end

Without {@rest}, accessibility attributes will not be applied and the component will not function correctly with keyboard navigation and screen readers.

Attributes

• id (:string) (required)
• class (:string) - Defaults to "".
• disabled (:boolean) - Defaults to false.
• as (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["navigate", "patch", "href"].

Slots

• inner_block (required)

The dropdown menu.

CSS variables

• --reference-width: Width of the trigger, or the element selected by reference. Updates automatically while open.

Apply min-width: var(--reference-width) for a minimum width, or width: var(--reference-width) for an exact match.

Attributes

• id (:string) (required)
• transition_enter (:any) - Defaults to nil.
• transition_leave (:any) - Defaults to nil.
• class (:string) - Defaults to "".
• reference (:string) - Defaults to nil.
• placement (:string) - Defaults to "bottom-end". Must be one of "top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", or "left-end".
• flip (:boolean) - Defaults to true.
• offset (:integer) - Defaults to 4.
• Global attributes are accepted.

Slots

• inner_block (required)

A container for grouping related menu items within a dropdown.

This component provides semantic grouping of related menu items with proper ARIA structure. Use this to create logical sections within your dropdown menu.

Attributes

• class - CSS classes for styling the section container

Examples

# Basic section grouping
<.dropdown_section>
  <.dropdown_item>Profile</.dropdown_item>
  <.dropdown_item>Settings</.dropdown_item>
</.dropdown_section>

# Section with heading
<.dropdown_section>
  <.dropdown_heading>Account</.dropdown_heading>
  <.dropdown_item>Profile</.dropdown_item>
  <.dropdown_item>Settings</.dropdown_item>
</.dropdown_section>

Accessibility

The section uses role="group" to indicate a logical grouping of menu items to assistive technologies. When used with a heading as the first child, the JavaScript hook automatically establishes the aria-labelledby relationship between the section and the heading.

Attributes

• class (:string) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)

A visual separator for grouping related menu items.

This component renders a separator line between groups of menu items to create visual organization within the dropdown menu. It uses the separator ARIA role for proper accessibility.

Attributes

• class - CSS classes for styling the separator

Examples

<.dropdown_separator class="my-1 border-t border-gray-200" />

Accessibility

The separator uses role="separator" which is properly announced by screen readers as a divider between menu sections.

Attributes

• class (:string) - Defaults to "".
• Global attributes are accepted.

The trigger button/element for a dropdown menu.

This component renders the clickable element that opens and closes the dropdown menu. By default, it renders as a button element, but can be customized to render as any component using the as attribute.

Attributes

• id - Unique identifier for the trigger, required for ARIA relationships
• class - CSS classes for styling the trigger
• as - Custom function component to render instead of the default button element

Examples

# Basic trigger
<.dropdown_trigger id="my-dropdown-trigger">
  Open Menu
</.dropdown_trigger>

# With custom component
<.dropdown_trigger id="my-dropdown-trigger" as={&my_custom_button/1}>
  Open Menu
</.dropdown_trigger>

Custom Component Requirements

When using the as attribute, the custom component receives accessibility attributes including aria-haspopup="menu" and aria-expanded.

IMPORTANT: Custom components must accept and pass through global attributes using the :global attribute type (commonly via @rest). This ensures that Prima's accessibility attributes are properly applied to the rendered element.

Example of a properly configured custom component:

attr :rest, :global
slot :inner_block, required: true

def my_custom_button(assigns) do
  ~H"""
  <button type="button" {@rest}>
    {

ender_slot(@inner_block)}

  </button>
  """
end

Without {@rest}, accessibility attributes will not be applied and the dropdown will not function correctly with keyboard navigation and screen readers.

Attributes

• id (:string) (required)
• class (:string) - Defaults to "".
• as (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)