> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.
# Dropdown Menu
> A contextual action menu that appears when triggered, containing organized sections.
## Examples
```dart Simple Menu lines focus={1-35, 40} theme={null}
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,
),
),
```
```dart Profile Menu lines focus={1-38, 58} theme={null}
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,
),
),
),
),
```
```dart Custom Width lines focus={1-17, 22} theme={null}
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,
),
),
```
```dart Fit to Trigger lines focus={1-25, 30} theme={null}
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
Whether the dropdown menu is currently visible. Control this with state management to show/hide the menu.
Callback function called when the menu's visibility changes. Use this to update your state when the menu is dismissed by clicking outside.
A list of sections containing the menu items. Each section groups related actions together.
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.
Whether the dropdown should match the width of the trigger widget.
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
A list of menu items within this section.
### Content
The section header text. If not provided, the section will not display a header.
### Layout
Whether to show a divider line between this and other sections.
## Item Properties
The `NeoDropdownMenuItem` class represents individual actionable menu items:
### Required
The text displayed for the menu item.
Callback function executed when the item is tapped.
### Content
An optional icon to display before the label.
### Styling
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.