Dropdown Menu

Examples

Basic Usage
Profile Menu
Custom Sizing

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

NeoDropdownMenu(
  isOpen: isMenuOpen.value, // Using hooks
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Profile",
          icon: (_) => PhosphorIconsRegular.user,
          onTap: () {
            // Navigate to profile
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "Settings",
          icon: (_) => PhosphorIconsRegular.gear,
          onTap: () {
            // Navigate to settings
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Sign Out",
          icon: (_) => PhosphorIconsRegular.signOut,
          onTap: () {
            // Handle sign out
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: GestureDetector(
    onTap: () => isMenuOpen.value = !isMenuOpen.value,
    child: Container(
      width: 42,
      height: 42,
      decoration: BoxDecoration(
        shape: .circle,
        color: theme.colors.bgSecondary,
        image: const DecorationImage(
          image: AssetImage('assets/images/profile_picture.png'),
          fit: .cover,
        ),
      ),
      child: Icon(
        PhosphorIconsRegular.user,
        size: 16,
        color: theme.colors.fgPrimary,
      ),
    ),
  ),
),

NeoDropdownMenu(
  isOpen: isMenuOpen.value,
  dropdownWidth: 96,
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Hey",
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: NeoButton(
    variant: .secondary,
    label: "Custom Width",
    onPressed: () => isMenuOpen.value = !isMenuOpen.value,
  ),
),

NeoDropdownMenu(
  isOpen: isMenuOpen.value,
  fitToTrigger: true,
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "PDF",
          icon: (_) => PhosphorIconsRegular.filePdf,
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "CSV",
          icon: (_) => PhosphorIconsRegular.fileCsv,
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: NeoButton(
    variant: .primary,
    label: "A long export button with text",
    onPressed: () => isMenuOpen.value = !isMenuOpen.value,
  ),
),

Properties

Required

bool

required

Whether the dropdown menu is currently visible. Control this with state management to show/hide the menu.

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.

List<NeoDropdownMenuSection>

required

A list of sections containing the menu items. Each section groups related actions together.

Widget

required

The widget that triggers the dropdown menu. Can be any widget, but typically a button or clickable element.

Layout

Fixed width for the dropdown menu. If not provided, the menu will size itself to fit the content.

bool

default:"false"

Whether the dropdown should match the width of the trigger widget.

bool

default:"false"

Whether the dropdown should have a maximum height with scrolling for large lists.

NeoPopoverPosition

default:".bottom"

Preferred side of the trigger where the menu appears. The menu may flip to the opposite side when space is tight.

NeoPopoverAlign

default:".center"

Cross-axis alignment relative to the trigger. For top / bottom, this is horizontal (start / end follow text direction). For left / right, this is vertical (start = top, end = bottom).

Section Properties

The NeoDropdownMenuSection class represents grouped sections within the dropdown:

Required

List<NeoDropdownMenuItem>

required

A list of menu items within this section.

Content

String

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

Layout

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

String

required

The text displayed for the menu item.

VoidCallback

required

Callback function executed when the item is tapped.

Content

Object Function(PhosphorIconsStyle)?

An optional icon to display before the label.

Styling

bool

default:"false"

Whether the item represents a destructive action. When true, the item appears with danger styling (typically red).

Enums

NeoPopoverPosition

Preferred side of the trigger for the menu.

bottom: Below the trigger (default)
top: Above the trigger
left: To the left of the trigger
right: To the right of the trigger

NeoPopoverAlign

Cross-axis alignment relative to the trigger.

start: Align to the start edge (leading / top depending on position)
center: Center on the cross axis (default)
end: Align to the end edge (trailing / bottom depending on position)

Best Practices

Close the menu from the item onTap by setting isOpen to false. Close it before the action if that action leaves the page.
Set isDestructive: true on an item that deletes or removes.

Behavior

Tapping an item does not close the menu.
A tap outside the menu closes it.
It uses position and align, then flips or shifts to stay on screen.

Getting Started

AI

Widgets

Layouts

Theming

Utilities

Dropdown Menu

Examples

Properties

Required

Layout

Section Properties

Required

Content

Layout

Item Properties

Required

Content

Styling

Enums

NeoPopoverPosition

NeoPopoverAlign

Best Practices

Behavior

​Examples

​Properties

​Required

​Layout

​Section Properties

​Required

​Content

​Layout

​Item Properties

​Required

​Content

​Styling

​Enums

​NeoPopoverPosition

​NeoPopoverAlign

​Best Practices

​Behavior

Examples

Properties

Required

Layout

Section Properties

Required

Content

Layout

Item Properties

Required

Content

Styling

Enums

NeoPopoverPosition

NeoPopoverAlign

Best Practices

Behavior