A responsive top navigation layout with mobile menu and action slot support.
A fixed top navbar with a logo on the left and navigation links on the right.
<div>
<!-- Navbar -->
<header class="fixed top-0 inset-x-0 z-50
bg-white dark:bg-gray-900
border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<a href="/" class="flex items-center gap-2">
<x-ui::icon name="bolt" variant="solid" class="text-primary-500 size-5" />
<span class="font-semibold text-gray-900 dark:text-white">App Name</span>
</a>
<!-- Nav Links -->
<x-ui::navbar>
<x-ui::navbar-item href="/">Home</x-ui::navbar-item>
<x-ui::navbar-item href="/about">About</x-ui::navbar-item>
<x-ui::navbar-item href="/pricing">Pricing</x-ui::navbar-item>
<x-ui::navbar-item href="/contact">Contact</x-ui::navbar-item>
</x-ui::navbar>
</div>
</div>
</header>
<!-- Content -->
<main class="pt-16">
{{ $slot }}
</main>
</div>Add right-side action slots — theme toggle, a primary CTA, and a user dropdown — alongside the nav links.
<div x-data="{ menuOpen: false, userOpen: false }">
<!-- Navbar -->
<header class="fixed top-0 inset-x-0 z-50
bg-white dark:bg-gray-900
border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4">
<div class="flex items-center justify-between h-16 gap-4">
<!-- Logo -->
<a href="/" class="flex items-center gap-2 shrink-0">
<x-ui::icon name="bolt" variant="solid" class="text-primary-500 size-5" />
<span class="font-semibold text-gray-900 dark:text-white">App Name</span>
</a>
<!-- Desktop Nav -->
<x-ui::navbar class="hidden md:flex flex-1 justify-center">
<x-ui::navbar-item href="/">Home</x-ui::navbar-item>
<x-ui::navbar-item href="/about">About</x-ui::navbar-item>
<x-ui::navbar-item href="/pricing">Pricing</x-ui::navbar-item>
<x-ui::navbar-item href="/contact">Contact</x-ui::navbar-item>
</x-ui::navbar>
<!-- Right Actions -->
<div class="flex items-center gap-2 shrink-0">
<x-ui::theme-toggle />
<x-ui::button variant="primary" href="/get-started" class="hidden md:inline-flex">
Get Started
</x-ui::button>
<!-- User Dropdown -->
<x-ui::dropdown align="right">
<x-slot:trigger>
<button class="size-8 rounded-full bg-gray-200 dark:bg-gray-700
ring-2 ring-transparent hover:ring-primary-500 transition-all
overflow-hidden">
<x-ui::icon name="user" size="sm" class="w-full h-full p-1.5 text-gray-500 dark:text-gray-400" />
</button>
</x-slot:trigger>
<x-ui::dropdown-item icon="user">Profile</x-ui::dropdown-item>
<x-ui::dropdown-item icon="cog-6-tooth">Settings</x-ui::dropdown-item>
<x-ui::separator />
<x-ui::dropdown-item icon="arrow-right-on-rectangle">Sign out</x-ui::dropdown-item>
</x-ui::dropdown>
<!-- Hamburger (mobile only) -->
<button
@click="menuOpen = !menuOpen"
class="md:hidden p-2 rounded-lg text-gray-500
hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
>
<x-ui::icon name="bars-3" />
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div x-show="menuOpen" x-collapse class="md:hidden border-t border-gray-200 dark:border-gray-800">
<nav class="px-4 py-3 space-y-1">
<x-ui::navlist-item href="/" icon="home">Home</x-ui::navlist-item>
<x-ui::navlist-item href="/about" icon="information-circle">About</x-ui::navlist-item>
<x-ui::navlist-item href="/pricing" icon="tag">Pricing</x-ui::navlist-item>
<x-ui::navlist-item href="/contact" icon="envelope">Contact</x-ui::navlist-item>
<div class="pt-2 border-t border-gray-200 dark:border-gray-800 mt-2">
<x-ui::button variant="primary" href="/get-started" class="w-full justify-center">
Get Started
</x-ui::button>
</div>
</nav>
</div>
</header>
<!-- Content -->
<main class="pt-16">
{{ $slot }}
</main>
</div>Complete ready-to-use navbar layout combining desktop nav, mobile hamburger menu, and right-side actions.
<div x-data="{ menuOpen: false }">
<!-- Navbar -->
<header class="fixed top-0 inset-x-0 z-50
bg-white dark:bg-gray-900
border-b border-gray-200 dark:border-gray-800">
<div class="max-w-7xl mx-auto px-4">
<div class="flex items-center justify-between h-16 gap-4">
<!-- Logo -->
<a href="/" class="flex items-center gap-2 shrink-0">
<x-ui::icon name="bolt" variant="solid" class="text-primary-500 size-5" />
<span class="font-semibold text-gray-900 dark:text-white">App Name</span>
</a>
<!-- Desktop Nav (hidden on mobile) -->
<x-ui::navbar class="hidden md:flex flex-1 justify-center">
<x-ui::navbar-item href="/">Home</x-ui::navbar-item>
<x-ui::navbar-item href="/about">About</x-ui::navbar-item>
<x-ui::navbar-item href="/pricing">Pricing</x-ui::navbar-item>
<x-ui::navbar-item href="/contact">Contact</x-ui::navbar-item>
</x-ui::navbar>
<!-- Right Actions -->
<div class="flex items-center gap-2 shrink-0">
<x-ui::theme-toggle />
<x-ui::button variant="outline" href="/login" class="hidden md:inline-flex">
Login
</x-ui::button>
<x-ui::button variant="primary" href="/get-started" class="hidden md:inline-flex">
Get Started
</x-ui::button>
<!-- Hamburger (mobile only) -->
<button
@click="menuOpen = !menuOpen"
class="md:hidden p-2 rounded-lg text-gray-500
hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
:aria-expanded="menuOpen"
aria-label="Toggle menu"
>
<x-ui::icon name="bars-3" x-show="!menuOpen" />
<x-ui::icon name="x-mark" x-show="menuOpen" />
</button>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div x-show="menuOpen" x-collapse class="md:hidden border-t border-gray-200 dark:border-gray-800">
<nav class="px-4 py-3 space-y-1">
<x-ui::navlist-item href="/" icon="home">Home</x-ui::navlist-item>
<x-ui::navlist-item href="/about" icon="information-circle">About</x-ui::navlist-item>
<x-ui::navlist-item href="/pricing" icon="tag">Pricing</x-ui::navlist-item>
<x-ui::navlist-item href="/contact" icon="envelope">Contact</x-ui::navlist-item>
</nav>
<div class="px-4 pb-4 flex flex-col gap-2">
<x-ui::button variant="outline" href="/login" class="w-full justify-center">
Login
</x-ui::button>
<x-ui::button variant="primary" href="/get-started" class="w-full justify-center">
Get Started
</x-ui::button>
</div>
</div>
</header>
<!-- Page Content (offset by navbar height) -->
<main class="pt-16">
{{ $slot }}
</main>
</div>
menuOpen drives both the hamburger icon swap (bars-3 ↔ x-mark) and the x-collapse animation on the mobile panel.
hidden md:flex / hidden md:inline-flex hides nav links and action buttons on mobile; only the hamburger is visible below the md breakpoint.
pt-16 on <main> offsets the content by the navbar height so nothing is hidden behind the fixed header.