Displays a menu to the user — such as a set of actions or functions — triggered by a button.
<x-portal::dropdown-menu>
<x-portal::dropdown-menu.trigger variant="outline">Open</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-56">
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<span class="relative flex shrink-0 overflow-hidden h-8 w-8 rounded-lg">
<span class="flex h-full w-full items-center justify-center bg-muted rounded-lg">SN</span>
</span>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">satnaing</span>
<span class="truncate text-xs">satnaingdev@gmail.com</span>
</div>
</div>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.item as="a" href="/">
<x-tabler-sparkles class="h-4 w-4" />
Upgrade to Pro
</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.item as="a" href="/">
<x-tabler-rosette-discount-check class="h-4 w-4" />
Account
</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item as="a" href="/">
<x-tabler-credit-card class="h-4 w-4" />
Billing
</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item as="a" href="/">
<x-tabler-bell class="h-4 w-4" />
Notification
</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.item as="button" type="button">
<x-tabler-logout class="h-4 w-4" />
Logout
</x-portal::dropdown-menu.item>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:dropdown-menu --force
Customize the position of the dropdown menu via the position and align props
You can first pass the base side:
bottom
top
left
right
Then an alignment modifier like
center
end
start
<x-portal::dropdown-menu>
<x-portal::dropdown-menu.trigger variant="outline">Open</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-56" align="end" side="top">
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item disabled>Billing</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.heading>Setting</x-portal::dropdown-menu.heading>
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item variant="danger">Subscription</x-portal::dropdown-menu.item>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>
<x-portal::dropdown-menu>
<x-portal::dropdown-menu.trigger variant="outline">Open</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-56" x-init="setChecked(['team'])">
<x-portal::dropdown-menu.label>My Account</x-portal::dropdown-menu.label>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.checkboxitem name="setting[]" value="profile">
Profile
</x-portal::dropdown-menu.checkboxitem>
<x-portal::dropdown-menu.checkboxitem name="setting[]" value="billing" disabled>
Billing
</x-portal::dropdown-menu.checkboxitem>
<x-portal::dropdown-menu.checkboxitem name="setting[]" value="team">
Team
</x-portal::dropdown-menu.checkboxitem>
<x-portal::dropdown-menu.checkboxitem name="setting[]" value="subscription">
Subscription
</x-portal::dropdown-menu.checkboxitem>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>
<x-portal::dropdown-menu>
<x-portal::dropdown-menu.trigger variant="outline">Open</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-56" x-init="setSelected('team')">
<x-portal::dropdown-menu.label>My Account</x-portal::dropdown-menu.label>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.radioitem name="setting_radio" value="profile">
Profile
</x-portal::dropdown-menu.radioitem>
<x-portal::dropdown-menu.radioitem name="setting_radio" value="billing" disabled>
Billing
</x-portal::dropdown-menu.radioitem>
<x-portal::dropdown-menu.radioitem name="setting_radio" value="team">
Team
</x-portal::dropdown-menu.radioitem>
<x-portal::dropdown-menu.radioitem name="setting_radio" value="subscription">
Subscription
</x-portal::dropdown-menu.radioitem>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>
<x-portal::dropdown-menu>
<x-portal::dropdown-menu.trigger variant="outline">Open</x-portal::dropdown-menu.trigger>
<x-portal::dropdown-menu.content class="w-56">
<x-portal::dropdown-menu.label>My Account</x-portal::dropdown-menu.label>
<x-portal::dropdown-menu.separator />
<x-portal::dropdown-menu.sub>
<x-portal::dropdown-menu.sub.trigger>
Invite
</x-portal::dropdown-menu.sub.trigger>
<x-portal::dropdown-menu.sub.content>
<x-portal::dropdown-menu.item>Profile</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
</x-portal::dropdown-menu.sub.content>
</x-portal::dropdown-menu.sub>
<x-portal::dropdown-menu.item variant="danger">Subscription</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item>Profile</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.sub>
<x-portal::dropdown-menu.sub.trigger>
Invite User
</x-portal::dropdown-menu.sub.trigger>
<x-portal::dropdown-menu.sub.content>
<x-portal::dropdown-menu.item>Profile</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.sub>
<x-portal::dropdown-menu.sub.trigger>
User
</x-portal::dropdown-menu.sub.trigger>
<x-portal::dropdown-menu.sub.content>
<x-portal::dropdown-menu.item>Profile</x-portal::dropdown-menu.item>
<x-portal::dropdown-menu.item>Team</x-portal::dropdown-menu.item>
</x-portal::dropdown-menu.sub.content>
</x-portal::dropdown-menu.sub>
</x-portal::dropdown-menu.sub.content>
</x-portal::dropdown-menu.sub>
</x-portal::dropdown-menu.content>
</x-portal::dropdown-menu>