Dropdown on hover for Laravel Breeze dropdown

Question

I have set up a project using Laravel Breeze and am using some of the default components in it. One of these is the dropdown component, used in the nav bar. By default, you need to click on the dropdown in order for the menu to appear below. However, I want to modify this component so that the menu appears on hover, and if you simply click the dropdown menu link, then it takes you to a different page.

This is the dropdown component in question:

@props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-blue-light'])

@php
switch ($align) {
    case 'left':
        $alignmentClasses = 'origin-top-left left-0';
        break;
    case 'top':
        $alignmentClasses = 'origin-top';
        break;
    case 'right':
    default:
        $alignmentClasses = 'origin-top-right right-0';
        break;
}

switch ($width) {
    case '48':
        $width = 'w-48';
        break;
}
@endphp

<div class="relative m-auto" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
    <div @click="open = ! open">
        {{ $trigger }}
    </div>

    <div x-show="open"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
            style="display: none;"
            @click="open = false">
        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
            {{ $content }}
        </div>
    </div>
</div>

Any idea how to modify it so that it behaves the way I want?

score 1 · Accepted Answer · answered Sep 28 '21 at 19:59

This can be achieved by using @mouseover and @mouseleave from Vue JS for when you want to open and close the menu respectively. The updated code looks something like this:

<div class="relative m-auto" x-data="{ open: false }" @mouseover="open = true" @mouseleave="open = false">
    <div>
        {{ $trigger }}
    </div>

    <div x-show="open"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
            style="display: none;"
            >
        <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
            {{ $content }}
        </div>
    </div>
</div>

Dropdown on hover for Laravel Breeze dropdown

1 Answers1