bladewindUI

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.


John C. Doe john@doe.com Sales

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

John C. Doe john@doe.com Sales

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

John C. Doe john@doe.com Sales

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

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
trigger an SVG The element that should trigger the dropmenu. This could be text or HTML elements.

 

Dropmenu with all attributes defined

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

 

The source file for this component is available in resources > views > components > bladewind > dropmenu.blade.php, resources > views > components > bladewind > dropmenu-item.blade.php