--- title: Navbar description: Top navigation bar visibility: guest draft: false --- # Navbar The `` component creates a responsive top navigation bar with brand area, navigation items, and action slots. It automatically collapses into a hamburger menu below the `md` breakpoint for mobile devices. > **Building a signed-in dashboard?** `navbar` is the top-nav shell for marketing sites and top-nav apps. For a sidebar dashboard layout use [App Shell](/components/app-shell) instead — and don't nest `navbar` inside the header of an app-shell that has a `sidebar` or `rail` slot, since both would then render their own mobile menu. ## Usage :::preview{title="Responsive Navbar"}

Acme Inc.

Dashboard

Projects

Team

Settings

Sign In

::: In a real Laravel app, wrap the brand content in an `` and bind each item's `:active` prop to `request()->is('dashboard')` (or similar) so the current page is highlighted automatically. ## Variants ### Default The default variant has a subtle bottom border: :::preview{title="Default Variant"}

::: ### Bordered Adds a visible border on all sides with a slight shadow: :::preview{title="Bordered Variant"}

::: ### Transparent No background, no border -- suitable for hero sections or overlaying images: :::preview{title="Transparent Variant"}

::: ## Sticky Navbar Pin the navbar to the top of the viewport on scroll: ```blade ... ``` This applies `position: sticky; top: 0; z-index: 40;` along with a backdrop blur effect. ## Brand Slot The `brand` slot renders on the left side and is always visible (both desktop and mobile): :::preview{title="Navbar with Brand and Actions"}

::: ## Active Items Mark the currently active navigation item. Active items receive accent-colored text and an underline indicator, with `aria-current="page"` set automatically: :::preview{title="Active Navigation Item"}

::: In your Blade templates, use dynamic active detection: ```blade Dashboard ``` ## Mobile Behavior Below the `md` breakpoint (768px), navigation items collapse behind a hamburger button. The hamburger button: - Uses the `menu` icon (three horizontal lines) - Toggles `aria-expanded` between `"true"` and `"false"` - Has `aria-label="Toggle navigation"` for screen readers - Reveals a vertical dropdown panel with all navigation items :::preview{title="Simulated Mobile Layout (forceMobile)"}

::: The preview above uses `:force-mobile="true"` to render the mobile layout unconditionally — the hamburger button is always visible, the desktop item row is always hidden. This is purely a preview/testing aid so the mobile state can be demonstrated without resizing the browser. In a real app, omit `force-mobile` and the navbar will collapse automatically below the `md` breakpoint (768px). Click the hamburger button to open the mobile menu. No additional markup is needed for the responsive behavior — the breakpoint-based mobile menu is fully automatic. ## With Dropdown Submenus For navigation items with dropdown sub-menus, combine the navbar with [Dropdown](/components/dropdown). Use a `ghost` button as the trigger and include a chevron icon so users recognize the item has a submenu: :::preview{title="Navbar with Dropdown Submenu"}

::: ### Multiple Dropdown Menus For a navbar with several dropdown sections, repeat the pattern for each submenu. Each chevron rotates downward to signal an expandable menu: :::preview{title="Navbar with Multiple Dropdown Menus"}

::: For rich mega-menu panels with multiple columns and descriptions, see the [Navigation Menu](/components/navigation-menu) component. ## Overflow Behavior When there are too many navigation items, they collapse into the mobile hamburger menu below the `md` breakpoint (768px). On desktop, items wrap naturally. To keep the bar on a single line, move the rarely-used items into a "More" dropdown — the example below shows four primary items followed by six more tucked behind the dropdown trigger, which is a scalable pattern even when a marketing site accumulates a long list of pages. :::preview{title="Navbar with Overflow Dropdown"}

::: For navigation trees beyond ten items or grouped categories, consider upgrading to the [Navigation Menu](/components/navigation-menu) component — it ships flyout panels that can render multi-column mega-menus with headings and descriptions. ## Width & Layout The navbar stretches to full width with internal content constrained by `max-w-7xl` and centered. This matches the standard Laravel/Tailwind layout pattern. For a full-bleed navbar, override the max-width via personalization. ## Behavior - **Auto-collapse:** navigation items are hidden behind a hamburger below the `md` breakpoint (768px) - **Brand and actions** are always visible on both desktop and mobile - **Sticky mode** uses `position: sticky` with `backdrop-filter: blur()` for a frosted glass effect - **Livewire SPA** navigation (`wire:navigate`) automatically closes the mobile menu - **Transitions** use height animation for smooth mobile menu reveal ## Props ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `variant` | `string` | `'default'` | Visual style: `'default'`, `'bordered'`, `'transparent'` | | `sticky` | `bool` | `false` | Pin to top of viewport on scroll | | `forceMobile` | `bool` | `false` | Render the mobile layout unconditionally (hamburger visible, desktop item row hidden). Useful for previews and embedded contexts narrower than the `md` breakpoint. | | `container` | `bool` | `false` | Wrap the inner row in a max-width container so the nav content aligns with page content instead of spanning the full viewport width. | | `max` | `string\|null` | `null` | Container tier when `container` is set — `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'full'` (reads `--size-wk-container-*`). | | `scope` | `string\|null` | `null` | Scoped personalization key | ### `` | Prop | Type | Default | Description | | --- | --- | --- | --- | | `href` | `string` | `'#'` | Link destination | | `active` | `bool` | `false` | Highlights as current page | | `scope` | `string\|null` | `null` | Scoped personalization key | ## Sub-Components | Component | Purpose | | --- | --- | | `navbar.item` | A single navigation link | ### Named Slots | Slot | Purpose | | --- | --- | | `brand` | Logo or brand name (left side, always visible) | | `actions` | CTA buttons or user actions (right side, always visible) | | default | Navigation items (collapse on mobile) | ## Accessibility - Navbar wrapper: `