Dropmenu

This Dropdown component can still do what this component is intended to achieve. A dropmenu for quickly performing page actions. These actions could be navigating other portions of a page, filtering content on dashboards or quickly performing actions like edits, deletes. The main difference between this and the BladewindUI Dropdown component is aesthetics and maybe simplicity.

        
            <x-bladewind.table hover_effect="false" divider="thin">
                <tr>
                    <td>John C. Doe</td>
                    <td>john@doe.com</td>
                    <td>Sales</td>
                    <td>

                        <x-bladewind.dropmenu>
                            <x-bladewind.dropmenu-item>
                                Edit
                            </x-bladewind.dropmenu-item>
                            <x-bladewind.dropmenu-item>
                                Invite John to Marketing
                            </x-bladewind.dropmenu-item>
                        </x-bladewind.dropmenu>

                    </td>
                </tr>
            </x-bladewind.table>
        
    

By default the dropmenu is accessed via the dots-circle-horizontal icon found on Heroicons. You can specify the default text or element to access your menu via, by specifying the trigger. You can either specify trigger as an attribute on the component or as a slot.

<x-bladewind.dropmenu trigger="FILTERS"> ... </x-bladewind.dropmenu>

        
        <x-bladewind.dropmenu>
          <x-slot name="trigger">
             <x-bladewind.button type="secondary">Actions</x-bladewind.button>
          </x-slot>
         ...
         </x-bladewind.dropmenu>
    

        
            <x-bladewind.table hover_effect="false" divider="thin">
                <tr>
                    <td>John C. Doe</td>
                    <td>john@doe.com</td>
                    <td>Sales</td>
                    <td>
                        <x-bladewind.dropmenu>

                            <x-slot name="trigger">
                                <x-bladewind::button
                                    type="secondary" size="tiny">
                                    Options
                                </x-bladewind::button>
                            </x-slot>

                            <x-bladewind.dropmenu-item>
                                Edit
                            </x-bladewind.dropmenu-item>
                            <x-bladewind.dropmenu-item>
                                Invite John to Marketing
                            </x-bladewind.dropmenu-item>
                        </x-bladewind.dropmenu>

                    </td>
                </tr>
            </x-bladewind.table>
        
    

With Icons

The x-bladewind::dropmenu-item component takes pretty much any HTML code so you are free to throw anything in there and style them as you want. The example below shows the dropmenu with icons in the dropmenu items.

        
            <x-bladewind::table hover_effect="false" divider="thin">
                <tr>
                    <td>John C. Doe</td>
                    <td>john@doe.com</td>
                    <td>Sales</td>
                    <td class="text-right">
                        <x-bladewind::dropmenu>
                            <x-bladewind::dropmenu-item>
                                <div class="flex align-middle">
                                    <svg...>
                                    ...
                                    </svg>
                                    <span>Edit</span>
                                </div>
                            </x-bladewind::dropmenu-item>
                            <x-bladewind::dropmenu-item>
                                <div class="flex align-middle whitespace-nowrap">
                                    <svg...>
                                    ...
                                    </svg>
                                    <span>Invite Other Team Members</span>
                                </div>
                            </x-bladewind::dropmenu-item>
                        </x-bladewind::dropmenu>
                    </td>
                </tr>
            </x-bladewind::table>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Dropmenu component.

Dropmenu with all attributes defined

        
            <x-bladewind.dropmenu
                trigger="Filters" />