Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Dropdown

Dropdown menu component for displaying contextual actions and options

Basic Usage

Le dropdown le plus basique avec un bouton et des items de menu: 
<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 les items comme des liens avec 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 des séparateurs pour organiser les 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

Organisez les items en groupes avec des 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

JD

Actions Menu

Best Practices

Keep menus concise

Limit the number of items to avoid overwhelming the user

Use des séparateurs pour organiser

Group similar actions with separators

Use des icônes pour clarifier

Icons help users quickly identify actions

Use danger pour les actions destructives

Marquez clairement les actions irréversibles avec 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