# Navigation Menu

A collection of links for navigating websites.

- Install: `php artisan blatui:add navigation-menu`
- Source: https://blatui.remix-it.com/r/navigation-menu.json
- Composer: `composer require mallardduck/blade-lucide-icons gehrisandro/tailwind-merge-laravel`
- npm: `npm install -D @alpinejs/anchor`

## resources/views/components/ui/navigation-menu.blade.php

```blade
<nav
    data-slot="navigation-menu"
    x-data="{ active: null }"
    @mouseleave="active = null"
    {{ $attributes->twMerge('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center') }}
>
    {{ $slot }}
</nav>
```

## resources/views/components/ui/navigation-menu-content.blade.php

```blade
<div
    x-show="active === id"
    x-cloak
    x-anchor.bottom-start.offset.8="$refs.trigger"
    @mouseenter="active = id"
    @click.outside="if (active === id) active = null"
    @keydown.escape.window="active = null"
    :id="id"
    :aria-labelledby="id + '-trigger'"
    data-slot="navigation-menu-content"
    :data-state="active === id ? 'open' : 'closed'"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    {{ $attributes->twMerge('bg-popover text-popover-foreground z-50 origin-top overflow-hidden rounded-md border p-2 shadow-md') }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/navigation-menu-item.blade.php

```blade
@php $navId = 'nav-'.\Illuminate\Support\Str::random(8); @endphp

<li data-slot="navigation-menu-item" x-data="{ id: @js($navId) }" {{ $attributes->twMerge('relative') }}>
    {{ $slot }}
</li>
```

## resources/views/components/ui/navigation-menu-link.blade.php

```blade
@props([
    'href' => '#',
    'active' => false,
])

<a
    href="{{ $href }}"
    data-slot="navigation-menu-link"
    @if ($active) data-active="true" aria-current="page" @endif
    {{ $attributes->twMerge("data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] [&_svg:not([class*='size-'])]:size-4") }}
>{{ $slot }}</a>
```

## resources/views/components/ui/navigation-menu-list.blade.php

```blade
<ul data-slot="navigation-menu-list" {{ $attributes->twMerge('group flex flex-1 list-none items-center justify-center gap-1') }}>
    {{ $slot }}
</ul>
```

## resources/views/components/ui/navigation-menu-trigger.blade.php

```blade
<button
    type="button"
    x-ref="trigger"
    :id="id + '-trigger'"
    :aria-expanded="active === id"
    :aria-controls="id"
    @mouseenter="active = id"
    @click="active = (active === id ? null : id)"
    @keydown.down.prevent="active = id"
    @keydown.escape.prevent="active = null"
    :data-state="active === id ? 'open' : 'closed'"
    data-slot="navigation-menu-trigger"
    {{ $attributes->twMerge('group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring/50 focus-visible:ring-[3px]') }}
>
    {{ $slot }}
    <x-lucide-chevron-down class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" aria-hidden="true" />
</button>
```