Skip to main content

​
Examples

  • Basic Usage
  • Profile Menu
  • Custom Sizing
Basic dropdown menu example

Simple dropdown menu with action items triggered by a button.

NeoDropdownMenu(
  isOpen: isMenuOpen.value, // Using hooks
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Open",
          icon: PhosphorIcons.eye,
          onTap: () {
            // Handle open action
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "Edit",
          icon: PhosphorIcons.pencil,
          onTap: () {
            // Handle edit action
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "Delete",
          icon: PhosphorIcons.trash,
          isDanger: true,
          onTap: () {
            // Handle delete action
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: NeoButton(
    variant: NeoButtonVariant.outlined,
    icon: PhosphorIconsRegular.dotsThreeVertical,
    onPressed: () => isMenuOpen.value = !isMenuOpen.value,
  ),
),

​
Properties

​
Required

​
isOpen
bool
required
Whether the dropdown menu is currently visible. Control this with state management to show/hide the menu.
​
onOpenChanged
ValueChanged<bool>
required
Callback function called when the menu’s visibility changes. Use this to update your state when the menu is dismissed by clicking outside.
​
sections
List<NeoDropdownMenuSection>
required
A list of sections containing the menu items. Each section groups related actions together.
​
trigger
Widget
required
The widget that triggers the dropdown menu. Can be any widget, but typically a button or clickable element.

​
Layout

​
dropdownWidth
double
Fixed width for the dropdown menu. If not provided, the menu will size itself to fit the content.
​
fitToTrigger
bool
default:"false"
Whether the dropdown should match the width of the trigger widget.
​
constrainedHeight
bool
default:"false"
Whether the dropdown should have a maximum height with scrolling for large lists.

​
Section Properties

The NeoDropdownMenuSection class represents grouped sections within the dropdown:

​
Required

​
children
List<NeoDropdownMenuItem>
required
A list of menu items within this section.

​
Content

​
label
String
The section header text. If not provided, the section will not display a header.

​
Layout

​
hasDivider
bool
default:"true"
Whether to show a divider line between this and other sections.

​
Item Properties

The NeoDropdownMenuItem class represents individual actionable menu items:

​
Required

​
label
String
required
The text displayed for the menu item.
​
onTap
VoidCallback
required
Callback function executed when the item is tapped.

​
Content

​
icon
PhosphorIconData Function(PhosphorIconsStyle)
An optional icon to display before the label.

​
Styling

​
isDanger
bool
default:"false"
Whether the item represents a destructive action. When true, the item appears with danger styling (typically red).

​
Best Practices

  • State Management: The menu doesn’t close automatically when items are tapped, giving you control over when to dismiss it. Typically, you’ll want to close the menu (isOpen = false) in item onTap callbacks, but you can choose to do this before or after executing your action depending on your needs.
  • Destructive Actions: Use isDanger: true for destructive actions like delete, remove, or clear operations.

​
Integration Notes

  • Auto Dismiss: The menu automatically closes when clicking outside the dropdown area.
  • Positioning: The menu intelligently positions itself relative to the trigger to stay within screen bounds.
⌘I