Portal UI : Dropdown

Dropdown

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

satnaing satnaingdev@gmail.com

Upgrade to Pro

Account

Billing

Notification

<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>

Publishing Component

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

Positioning

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

Team

Billing

Setting
Team

Subscription

<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>

Checkboxes

My Account
Profile
Billing
Team
Subscription

<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>

Radio Group

My Account
Profile
Billing
Team
Subscription

<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>

Submenus

My Account
Invite
- Profile
- Team
Subscription

Profile

Team

Invite User
- Profile
- Team
- User
  - Profile
  - Team

<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>