BlatUI

Components

Dropdown Menu

Displays a menu of actions or functions, triggered by a button.

php artisan blatui:add dropdown-menu 
<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>My Account</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-group>
            <x-ui.dropdown-menu-item>
                Profile
                <x-ui.dropdown-menu-shortcut>⇧⌘P</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item>
                Billing
                <x-ui.dropdown-menu-shortcut>⌘B</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
            <x-ui.dropdown-menu-item>
                Settings
                <x-ui.dropdown-menu-shortcut>⌘S</x-ui.dropdown-menu-shortcut>
            </x-ui.dropdown-menu-item>
        </x-ui.dropdown-menu-group>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-item>
            Log out
            <x-ui.dropdown-menu-shortcut>⇧⌘Q</x-ui.dropdown-menu-shortcut>
        </x-ui.dropdown-menu-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Checkboxes

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>Appearance</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-checkbox-item :checked="true">Status Bar</x-ui.dropdown-menu-checkbox-item>
        <x-ui.dropdown-menu-checkbox-item disabled>Activity Bar</x-ui.dropdown-menu-checkbox-item>
        <x-ui.dropdown-menu-checkbox-item>Panel</x-ui.dropdown-menu-checkbox-item>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>

Radio Group

<x-ui.dropdown-menu>
    <x-ui.dropdown-menu-trigger>
        <x-ui.button variant="outline">Open</x-ui.button>
    </x-ui.dropdown-menu-trigger>
    <x-ui.dropdown-menu-content class="w-56" align="start">
        <x-ui.dropdown-menu-label>Panel Position</x-ui.dropdown-menu-label>
        <x-ui.dropdown-menu-separator />
        <x-ui.dropdown-menu-radio-group value="bottom">
            <x-ui.dropdown-menu-radio-item value="top">Top</x-ui.dropdown-menu-radio-item>
            <x-ui.dropdown-menu-radio-item value="bottom">Bottom</x-ui.dropdown-menu-radio-item>
            <x-ui.dropdown-menu-radio-item value="right">Right</x-ui.dropdown-menu-radio-item>
        </x-ui.dropdown-menu-radio-group>
    </x-ui.dropdown-menu-content>
</x-ui.dropdown-menu>