Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Navigation Menu

A site navigation component with hover and click dropdown panels. Requires Alpine.js.

Usage
example.blade.php 
<x-slate::navigation-menu>
    <x-slate::navigation-menu-list>
        <x-slate::navigation-menu-item>
            <x-slate::navigation-menu-trigger>Getting started</x-slate::navigation-menu-trigger>
            <x-slate::navigation-menu-content>
                <ul class="grid gap-2 md:w-96">
                    <li>
                        <x-slate::navigation-menu-link href="#">
                            <div class="font-medium">Introduction</div>
                            <p class="text-sm text-muted-foreground">Overview of Slate components.</p>
                        </x-slate::navigation-menu-link>
                    </li>
                    <li>
                        <x-slate::navigation-menu-link href="#">
                            <div class="font-medium">Installation</div>
                            <p class="text-sm text-muted-foreground">Add Slate to your Laravel app.</p>
                        </x-slate::navigation-menu-link>
                    </li>
                </ul>
            </x-slate::navigation-menu-content>
        </x-slate::navigation-menu-item>
        <x-slate::navigation-menu-item>
            <x-slate::navigation-menu-link href="#">Docs</x-slate::navigation-menu-link>
        </x-slate::navigation-menu-item>
    </x-slate::navigation-menu-list>
</x-slate::navigation-menu>

Composition
code 
NavigationMenu
└── NavigationMenuList
    └── NavigationMenuItem
        ├── NavigationMenuTrigger
        ├── NavigationMenuContent
        └── NavigationMenuLink
Last updated .