Skip to main content
WireKit
Copy for LLM

Navbar

The <x-wirekit::navbar> 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 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

Responsive Navbar 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Dashboard</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Projects</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Team</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Settings</x-wirekit::navbar.item>
    <x-slot:actions>
        <x-wirekit::button size="sm">Sign In</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::navbar>

In a real Laravel app, wrap the brand content in an <a href="/"> 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:

Default Variant 
<x-wirekit::navbar variant="default">
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Home</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">About</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Contact</x-wirekit::navbar.item>
</x-wirekit::navbar>

Bordered

Adds a visible border on all sides with a slight shadow:

Bordered Variant 
<x-wirekit::navbar variant="bordered">
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Home</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">About</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Contact</x-wirekit::navbar.item>
</x-wirekit::navbar>

Transparent

No background, no border -- suitable for hero sections or overlaying images:

Transparent Variant 
<x-wirekit::navbar variant="transparent">
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Home</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">About</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Contact</x-wirekit::navbar.item>
</x-wirekit::navbar>

Pin the navbar to the top of the viewport on scroll:

<x-wirekit::navbar :sticky="true">
    ...
</x-wirekit::navbar>

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):

Navbar with Brand and Actions 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Dashboard</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Projects</x-wirekit::navbar.item>
    <x-slot:actions>
        <x-wirekit::button intent="neutral" surface="ghost" size="sm">Log In</x-wirekit::button>
        <x-wirekit::button size="sm">Sign Up</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::navbar>

Active Items

Mark the currently active navigation item. Active items receive accent-colored text and an underline indicator, with aria-current="page" set automatically:

Active Navigation Item 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#">Home</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#" :active="true">Dashboard</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Settings</x-wirekit::navbar.item>
</x-wirekit::navbar>

In your Blade templates, use dynamic active detection:

<x-wirekit::navbar.item href="/dashboard" :active="request()->is('dashboard')">
    Dashboard
</x-wirekit::navbar.item>

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
Simulated Mobile Layout (forceMobile) 
<x-wirekit::navbar :force-mobile="true">
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Dashboard</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">About</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Pricing</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Contact</x-wirekit::navbar.item>
    <x-slot:actions>
        <x-wirekit::button size="sm">Sign In</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::navbar>

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. Use a ghost button as the trigger and include a chevron icon so users recognize the item has a submenu:

Navbar with Dropdown Submenu 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Dashboard</x-wirekit::navbar.item>
    <x-wirekit::dropdown>
        <x-wirekit::dropdown.trigger>
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">
                Products
                <svg style="width: 1rem; height: 1rem; margin-left: 0.25rem; color: var(--color-wk-text-muted);" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </x-wirekit::button>
        </x-wirekit::dropdown.trigger>
        <x-wirekit::dropdown.panel>
            <x-wirekit::dropdown.item href="#">WireKit</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Starter Kits</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.separator />
            <x-wirekit::dropdown.item href="#">View All</x-wirekit::dropdown.item>
        </x-wirekit::dropdown.panel>
    </x-wirekit::dropdown>
    <x-wirekit::navbar.item href="#">Pricing</x-wirekit::navbar.item>
</x-wirekit::navbar>

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:

Navbar with Multiple Dropdown Menus 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::dropdown>
        <x-wirekit::dropdown.trigger>
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">
                Products
                <svg style="width: 1rem; height: 1rem; margin-left: 0.25rem; color: var(--color-wk-text-muted);" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </x-wirekit::button>
        </x-wirekit::dropdown.trigger>
        <x-wirekit::dropdown.panel>
            <x-wirekit::dropdown.item href="#">WireKit</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Starter Kits</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Livewire Pro</x-wirekit::dropdown.item>
        </x-wirekit::dropdown.panel>
    </x-wirekit::dropdown>
    <x-wirekit::dropdown>
        <x-wirekit::dropdown.trigger>
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">
                Solutions
                <svg style="width: 1rem; height: 1rem; margin-left: 0.25rem; color: var(--color-wk-text-muted);" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </x-wirekit::button>
        </x-wirekit::dropdown.trigger>
        <x-wirekit::dropdown.panel>
            <x-wirekit::dropdown.item href="#">For Startups</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">For Agencies</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">For Enterprise</x-wirekit::dropdown.item>
        </x-wirekit::dropdown.panel>
    </x-wirekit::dropdown>
    <x-wirekit::dropdown>
        <x-wirekit::dropdown.trigger>
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">
                Resources
                <svg style="width: 1rem; height: 1rem; margin-left: 0.25rem; color: var(--color-wk-text-muted);" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </x-wirekit::button>
        </x-wirekit::dropdown.trigger>
        <x-wirekit::dropdown.panel>
            <x-wirekit::dropdown.item href="#">Documentation</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Blog</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Changelog</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.separator />
            <x-wirekit::dropdown.item href="#">Support</x-wirekit::dropdown.item>
        </x-wirekit::dropdown.panel>
    </x-wirekit::dropdown>
    <x-wirekit::navbar.item href="#">Pricing</x-wirekit::navbar.item>
    <x-slot:actions>
        <x-wirekit::button size="sm">Sign In</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::navbar>

For rich mega-menu panels with multiple columns and descriptions, see the 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.

Navbar with Overflow Dropdown 
<x-wirekit::navbar>
    <x-slot:brand>
        Acme Inc.
    </x-slot:brand>
    <x-wirekit::navbar.item href="#" :active="true">Home</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Features</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Pricing</x-wirekit::navbar.item>
    <x-wirekit::navbar.item href="#">Docs</x-wirekit::navbar.item>
    <x-wirekit::dropdown>
        <x-wirekit::dropdown.trigger>
            <x-wirekit::button intent="neutral" surface="ghost" size="sm">
                More
                <svg style="width: 1rem; height: 1rem; margin-left: 0.25rem; color: var(--color-wk-text-muted);" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                </svg>
            </x-wirekit::button>
        </x-wirekit::dropdown.trigger>
        <x-wirekit::dropdown.panel>
            <x-wirekit::dropdown.item href="#">Blog</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Changelog</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Roadmap</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Customers</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Integrations</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.separator />
            <x-wirekit::dropdown.item href="#">Support</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Community</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Status</x-wirekit::dropdown.item>
            <x-wirekit::dropdown.item href="#">Contact</x-wirekit::dropdown.item>
        </x-wirekit::dropdown.panel>
    </x-wirekit::dropdown>
    <x-slot:actions>
        <x-wirekit::button intent="neutral" surface="ghost" size="sm">Log In</x-wirekit::button>
        <x-wirekit::button size="sm">Sign Up</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::navbar>

For navigation trees beyond ten items or grouped categories, consider upgrading to the 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

<x-wirekit::navbar>

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

<x-wirekit::navbar.item>

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: <nav aria-label="Main"> semantic landmark
  • Active item: aria-current="page"
  • Hamburger button: aria-label="Toggle navigation", aria-expanded (dynamic), aria-controls (linked to collapsible menu ID)
  • Mobile menu: unique id (auto-generated), hidden via hidden attribute when collapsed
  • All items are standard <a> elements -- fully accessible by default
  • Focus ring visible on all focusable elements via focus-visible:ring-[length:var(--ring-wk-width)]

Keyboard Interaction

The navbar is a layout wrapper; keyboard interaction is delegated to its children (links, buttons, and the mobile-menu toggle):

Key Action
Tab Move focus through navbar items sequentially
Enter / Space Activate the focused link or toggle the mobile menu button
Escape Close the mobile menu (when open)

Pitfalls

  • Don't put a <x-wirekit::dropdown> inside a <x-wirekit::navbar.item>. The dropdown's portal-based rendering escapes the navbar's flex context and the trigger's keyboard handlers conflict with the navbar item's. Use <x-wirekit::navigation-menu> for nested navigation.
  • Don't render a navbar without a <x-wirekit::brand> for screen readers. The brand acts as the page-level wayfinding landmark — without it, the navbar's <nav aria-label="Main"> is unmoored.

Design Tokens

Element Token
Bar background --color-wk-bg-elevated
Bar border --color-wk-border / --border-wk-width
Bar shadow (bordered variant) --shadow-wk-sm
Bar padding --padding-wk-x-md
Item text --color-wk-text
Item hover text --color-wk-accent
Item active text --color-wk-accent
Active indicator --color-wk-accent
Mobile menu background --color-wk-bg-elevated
Mobile menu border --color-wk-border-subtle
Hamburger icon color --color-wk-text
Font family --font-wk-sans
Font size --text-wk-md
Transition --transition-wk-duration
Sticky backdrop blur --color-wk-bg-elevated (with opacity)

Personalization

Override defaults in config/wirekit.php:

'components' => [
    'navbar' => [
        'variant' => 'bordered',
        'sticky' => true,
    ],
],

Scoped Personalization

<x-wirekit::navbar scope="marketing">
    ...
</x-wirekit::navbar>

'personalizations' => [
    'navbar' => [
        'marketing' => [
            'base' => 'max-w-7xl mx-auto',
        ],
    ],
],

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.

Further Reading

Was this page helpful?

Thanks — that helps.

Voting requires cookies or local storage. What we store