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>
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>
The table below shows a comprehensive list of all the attributes available for the Dropmenu component.
Option | Default | Available Values |
---|---|---|
trigger | an SVG | The element that should trigger the dropmenu. This could be text or HTML elements. |
<x-bladewind.dropmenu
trigger="Filters" />
resources > views > components > bladewind > dropmenu.blade.php
,
resources > views > components > bladewind > dropmenu-item.blade.php