Dropdown Menu

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: .outlined,
    icon: PhosphorIconsRegular.dotsThreeVertical,
    onPressed: () => isMenuOpen.value = !isMenuOpen.value,
  ),
),

Profile dropdown menu with actions and sections.

NeoDropdownMenu(
  isOpen: isMenuOpen.value, // Using hooks
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Profile",
          icon: PhosphorIcons.user,
          onTap: () {
            // Navigate to profile
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "Settings",
          icon: PhosphorIcons.gear,
          onTap: () {
            // Navigate to settings
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Sign Out",
          icon: PhosphorIcons.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,
      ),
    ),
  ),
),

Custom sizing dropdown menu example — Dropdown menus with custom width constraints.

NeoDropdownMenu(
  isOpen: isMenuOpen.value,
  dropdownWidth: 96,
  onOpenChanged: (value) => isMenuOpen.value = value,
  sections: [
    NeoDropdownMenuSection(
      children: [
        NeoDropdownMenuItem(
          label: "Hey",
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: NeoButton(
    variant: .outlined,
    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: PhosphorIcons.filePdf,
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
        NeoDropdownMenuItem(
          label: "CSV",
          icon: PhosphorIcons.fileCsv,
          onTap: () {
            isMenuOpen.value = false;
          },
        ),
      ],
    ),
  ],
  trigger: NeoButton(
    variant: .filled,
    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.

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

PhosphorIconData 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).

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.

Getting Started

AI

Neo CLI

Widgets

Layouts

Theming

Utilities

Dropdown Menu

Examples

Properties

Required

Layout

Section Properties

Required

Content

Layout

Item Properties

Required

Content

Styling

Best Practices

Integration Notes

​Examples

​Properties

​Required

​Layout

​Section Properties

​Required

​Content

​Layout

​Item Properties

​Required

​Content

​Styling

​Best Practices

​Integration Notes

Examples

Properties

Required

Layout

Section Properties

Required

Content

Layout

Item Properties

Required

Content

Styling

Best Practices

Integration Notes