Dropdown

Dropdown menu component for displaying contextual actions and options

Basic Usage

The most basic dropdown with a button and menu items:

<neura::dropdown>
    <x-slot:button>
        <neura::button variant="ghost" iconAfter="chevron-down">
            Options
        </neura::button>
    </x-slot:button>
    
    <x-slot:menu>
        <neura::dropdown.item>Edit</neura::dropdown.item>
        <neura::dropdown.item>Duplicate</neura::dropdown.item>
        <neura::dropdown.item>Delete</neura::dropdown.item>
    </x-slot:menu>
</neura::dropdown>

With Icons

Add icons to menu items:

<neura::dropdown>
    <x-slot:button>...</x-slot:button>
    <x-slot:menu>
        <neura::dropdown.item icon="pencil">Edit</neura::dropdown.item>
        <neura::dropdown.item icon="document-duplicate">Duplicate</neura::dropdown.item>
        <neura::dropdown.item icon="trash">Delete</neura::dropdown.item>
    </x-slot:menu>
</neura::dropdown>

With Links

Use items as links with href:

<neura::dropdown.item href="/home" icon="home">
    Home
</neura::dropdown.item>

<neura::dropdown.item href="/profile" icon="user">
    Profile
</neura::dropdown.item>

With Separators

Use separators to organize items:

<neura::dropdown>
    <x-slot:button>...</x-slot:button>
    <x-slot:menu>
        <neura::dropdown.item>Edit</neura::dropdown.item>
        <neura::dropdown.separator />
        <neura::dropdown.item>Export</neura::dropdown.item>
        <neura::dropdown.item>Import</neura::dropdown.item>
        <neura::dropdown.separator />
        <neura::dropdown.item variant="danger">Delete</neura::dropdown.item>
    </x-slot:menu>
</neura::dropdown>

With Groups

Organize items into groups with labels:

<neura::dropdown>
    <x-slot:button>...</x-slot:button>
    <x-slot:menu>
        <neura::dropdown.group label="File">
            <neura::dropdown.item icon="document-plus">New</neura::dropdown.item>
            <neura::dropdown.item icon="folder-open">Open</neura::dropdown.item>
        </neura::dropdown.group>
        <neura::dropdown.separator />
        <neura::dropdown.group label="Edit">
            <neura::dropdown.item icon="pencil">Edit</neura::dropdown.item>
        </neura::dropdown.group>
    </x-slot:menu>
</neura::dropdown>

With Submenu

Create submenus with dropdown.submenu:

<neura::dropdown>
    <x-slot:button>...</x-slot:button>
    <x-slot:menu>
        <neura::dropdown.item>Edit</neura::dropdown.item>
        <neura::dropdown.submenu label="Share">
            <neura::dropdown.item icon="envelope">Email</neura::dropdown.item>
            <neura::dropdown.item icon="link">Copy Link</neura::dropdown.item>
        </neura::dropdown.submenu>
    </x-slot:menu>
</neura::dropdown>

Positions

The dropdown can be positioned in different ways:

<neura::dropdown position="bottom-center">...</neura::dropdown>
<neura::dropdown position="bottom-start">...</neura::dropdown>
<neura::dropdown position="bottom-end">...</neura::dropdown>
<neura::dropdown position="top-center">...</neura::dropdown>
<neura::dropdown position="top-start">...</neura::dropdown>
<neura::dropdown position="top-end">...</neura::dropdown>

Disabled Items

Disable certain menu items:

<neura::dropdown.item :disabled="true">
    Duplicate (Disabled)
</neura::dropdown.item>

Danger Variant

Use the danger variant for destructive actions:

<neura::dropdown.item variant="danger" icon="trash">
    Delete
</neura::dropdown.item>

Use Cases

Common usage examples:

User Menu

Actions Menu

Best Practices

Keep menus concise

Limit the number of items to avoid overwhelming the user

Use separators to organize

Group similar actions with separators

Use icons to clarify

Icons help users quickly identify actions

Use danger for destructive actions

Clearly mark irreversible actions with variant="danger"

Properties

Property	Type	Default	Description
position	string	bottom-center	Dropdown position (bottom-center, bottom-start, bottom-end, top-center, etc.)
teleport	string	body	Teleport target when portal is enabled
portal	boolean	false	Enable teleporting dropdown to body
button	slot	required	Button trigger for dropdown
menu	slot	required	Menu content with dropdown items

Dropdown Item Properties

Property	Type	Default	Description
variant	string	soft	Item variant (soft, danger)
icon	string\|null	null	Icon name before text
iconAfter	string\|null	null	Icon name after text
disabled	boolean	false	Disable the item
href	string\|null	null	Link URL if item should be a link