Header

Open source

Site headers — a navbar (bar or floating pill shape), dropdown nav, a mega-menu and a product-site header with grouped panels.

Add to page builder

3 of 8

resources/views/blocks/header-mega-menu.blade.php Blade

@props([
    'brand' => 'Acme',
    'brandHref' => '#',
    'productLabel' => 'Product',
    'resourcesLabel' => 'Resources',
    'links' => null,
    'productGroups' => null,
    'featured' => null,
    'resources' => null,
    'cta' => 'Get started',
    'ctaHref' => '#',
    'signIn' => 'Sign in',
    'signInHref' => '#',
])

@php
    $links ??= [
        ['label' => 'Pricing', 'href' => '#'],
        ['label' => 'Customers', 'href' => '#'],
        ['label' => 'Docs', 'href' => '#'],
    ];

    $productGroups ??= [
        [
            'heading' => 'Platform',
            'items' => [
                ['title' => 'Analytics', 'description' => 'Real-time metrics across every surface.', 'href' => '#', 'icon' => 'chart'],
                ['title' => 'Automation', 'description' => 'Wire up workflows without code.', 'href' => '#', 'icon' => 'bolt'],
                ['title' => 'Integrations', 'description' => 'Connect the tools your team already uses.', 'href' => '#', 'icon' => 'puzzle'],
            ],
        ],
        [
            'heading' => 'Solutions',
            'items' => [
                ['title' => 'For startups', 'description' => 'Ship faster with sensible defaults.', 'href' => '#', 'icon' => 'rocket'],
                ['title' => 'For enterprise', 'description' => 'Security, SSO, and audit logs.', 'href' => '#', 'icon' => 'shield'],
                ['title' => 'For agencies', 'description' => 'Manage every client in one place.', 'href' => '#', 'icon' => 'users'],
            ],
        ],
    ];

    $featured ??= [
        'badge' => 'New',
        'title' => 'Introducing Workspaces',
        'description' => 'Organize projects, members, and billing into isolated spaces.',
        'cta' => 'Read the announcement',
        'href' => '#',
    ];

    $resources ??= [
        ['title' => 'Documentation', 'description' => 'Guides, API references, and tutorials.', 'href' => '#', 'icon' => 'book'],
        ['title' => 'Changelog', 'description' => 'See what shipped this week.', 'href' => '#', 'icon' => 'sparkles'],
        ['title' => 'Community', 'description' => 'Join the conversation with builders.', 'href' => '#', 'icon' => 'users'],
        ['title' => 'Support', 'description' => 'Get help from our team.', 'href' => '#', 'icon' => 'lifebuoy'],
    ];

    $iconPaths = [
        'chart' => '<path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" />',
        'bolt' => '<path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z" />',
        'puzzle' => '<path d="M19.4 15a1.65 1.65 0 0 0-1.4-2.6 2 2 0 1 0-4-1A1.65 1.65 0 0 0 11 9.6 1.65 1.65 0 0 0 9 11a2 2 0 1 0-1 4 1.65 1.65 0 0 0 1.6 1.4 2 2 0 1 0 4 1A1.65 1.65 0 0 0 17 19a1.65 1.65 0 0 0 2-1.6 2 2 0 0 0 .4-2.4z" />',
        'rocket' => '<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />',
        'shield' => '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />',
        'users' => '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />',
        'book' => '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" /><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />',
        'sparkles' => '<path d="M12 3l1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9z" /><path d="M19 14l.8 2 .2.8-2-.8z" />',
        'lifebuoy' => '<circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="3" /><path d="m4.9 4.9 4.2 4.2M14.9 14.9l4.2 4.2M19.1 4.9l-4.2 4.2M9.1 14.9l-4.2 4.2" />',
    ];
@endphp

<header
    x-data="{ open: false }"
    {{ $attributes->merge(['class' => 'sticky top-0 z-40 w-full border-b border-border bg-background/90 text-foreground backdrop-blur']) }}
>
    <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
        <x-ui.brand :href="$brandHref" :label="$brand" class="shrink-0" />

        <div class="hidden min-w-0 lg:block">
            <x-ui.navigation-menu>
                <x-ui.navigation-menu.list>
                    <x-ui.navigation-menu.item>
                        <x-ui.navigation-menu.trigger class="[&>svg]:-me-2">{{ __($productLabel) }}</x-ui.navigation-menu.trigger>
                        <x-ui.navigation-menu.content class="w-[min(46rem,90vw)] p-0">
                            <div class="grid gap-0 md:grid-cols-3">
                                <div class="grid gap-6 p-4 md:col-span-2 md:grid-cols-2">
                                    @foreach ($productGroups as $group)
                                        <div>
                                            <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ __($group['heading']) }}</p>
                                            <ul class="space-y-2">
                                                @foreach ($group['items'] as $item)
                                                    <li>
                                                        <a href="{{ $item['href'] }}" class="group flex items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                                            <span class="grid size-9 shrink-0 place-items-center rounded-md border border-border bg-muted text-muted-foreground transition-colors group-hover:text-foreground">
                                                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $iconPaths[$item['icon']] ?? $iconPaths['bolt'] !!}</svg>
                                                            </span>
                                                            <span class="min-w-0">
                                                                <span class="block text-sm font-medium text-foreground">{{ __($item['title']) }}</span>
                                                                <span class="mt-0.5 block text-sm text-muted-foreground">{{ __($item['description']) }}</span>
                                                            </span>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endforeach
                                </div>

                                @if (! empty($featured))
                                    <div class="flex flex-col justify-between gap-4 rounded-md bg-muted p-4 md:m-2 md:ms-0">
                                        <div>
                                            @if (! empty($featured['badge']))
                                                <x-ui.badge variant="secondary" class="mb-4">{{ __($featured['badge']) }}</x-ui.badge>
                                            @endif
                                            <div class="mb-4 aspect-video w-full rounded-md border border-border bg-gradient-to-br from-primary/20 via-background to-background" aria-hidden="true"></div>
                                            <p class="text-sm font-semibold text-foreground">{{ __($featured['title']) }}</p>
                                            <p class="mt-2 text-sm text-muted-foreground">{{ __($featured['description']) }}</p>
                                        </div>
                                        <x-ui.button :href="$featured['href']" variant="link" :with-arrow="true">{{ __($featured['cta']) }}</x-ui.button>
                                    </div>
                                @endif
                            </div>
                        </x-ui.navigation-menu.content>
                    </x-ui.navigation-menu.item>

                    <x-ui.navigation-menu.item>
                        <x-ui.navigation-menu.trigger class="[&>svg]:-me-2">{{ __($resourcesLabel) }}</x-ui.navigation-menu.trigger>
                        <x-ui.navigation-menu.content class="w-[min(34rem,90vw)] p-2">
                            <ul class="grid gap-2 sm:grid-cols-2">
                                @foreach ($resources as $resource)
                                    <li>
                                        <a href="{{ $resource['href'] }}" class="group flex items-start gap-4 rounded-md p-2 transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                            <span class="grid size-9 shrink-0 place-items-center rounded-md border border-border bg-muted text-muted-foreground transition-colors group-hover:text-foreground">
                                                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $iconPaths[$resource['icon']] ?? $iconPaths['book'] !!}</svg>
                                            </span>
                                            <span class="min-w-0">
                                                <span class="block text-sm font-medium text-foreground">{{ __($resource['title']) }}</span>
                                                <span class="mt-0.5 block text-sm text-muted-foreground">{{ __($resource['description']) }}</span>
                                            </span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </x-ui.navigation-menu.content>
                    </x-ui.navigation-menu.item>

                    @foreach ($links as $link)
                        <x-ui.navigation-menu.item>
                            <x-ui.navigation-menu.link :href="$link['href']" class="h-9 px-4 leading-9">{{ __($link['label']) }}</x-ui.navigation-menu.link>
                        </x-ui.navigation-menu.item>
                    @endforeach
                </x-ui.navigation-menu.list>
            </x-ui.navigation-menu>
        </div>

        <div class="hidden shrink-0 items-center gap-2 lg:flex">
            <x-ui.button :href="$signInHref" variant="ghost" size="sm" class="whitespace-nowrap">{{ __($signIn) }}</x-ui.button>
            <x-ui.button :href="$ctaHref" size="sm" class="whitespace-nowrap">{{ __($cta) }}</x-ui.button>
        </div>

        <button
            type="button"
            class="inline-flex size-10 items-center justify-center rounded-md text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring lg:hidden"
            :aria-expanded="open.toString()"
            aria-controls="header-mega-mobile"
            @click="open = ! open"
        >
            <span class="sr-only">{{ __('Toggle menu') }}</span>
            <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path x-show="! open" d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" />
                <path x-show="open" x-cloak d="M6 6l12 12M18 6L6 18" stroke-linecap="round" />
            </svg>
        </button>
    </div>

    <div id="header-mega-mobile" x-show="open" x-cloak @click.outside="open = false" class="border-t border-border lg:hidden">
        <div class="space-y-6 px-4 py-4 sm:px-6">
            @foreach ($productGroups as $group)
                <div>
                    <p class="pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ __($group['heading']) }}</p>
                    <ul class="space-y-2">
                        @foreach ($group['items'] as $item)
                            <li>
                                <a href="{{ $item['href'] }}" class="flex items-start gap-4 rounded-md p-2 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                    <span class="grid size-9 shrink-0 place-items-center rounded-md border border-border bg-muted text-muted-foreground">
                                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{!! $iconPaths[$item['icon']] ?? $iconPaths['bolt'] !!}</svg>
                                    </span>
                                    <span class="min-w-0">
                                        <span class="block text-sm font-medium text-foreground">{{ __($item['title']) }}</span>
                                        <span class="mt-0.5 block text-sm text-muted-foreground">{{ __($item['description']) }}</span>
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endforeach

            <div>
                <p class="pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ __($resourcesLabel) }}</p>
                <ul class="space-y-2">
                    @foreach ($resources as $resource)
                        <li>
                            <a href="{{ $resource['href'] }}" class="block rounded-md p-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ __($resource['title']) }}</a>
                        </li>
                    @endforeach
                </ul>
            </div>

            @if (! empty($links))
                <ul class="space-y-2 border-t border-border pt-4">
                    @foreach ($links as $link)
                        <li>
                            <a href="{{ $link['href'] }}" class="block rounded-md p-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">{{ __($link['label']) }}</a>
                        </li>
                    @endforeach
                </ul>
            @endif

            <div class="flex flex-col gap-2 border-t border-border pt-4">
                <x-ui.button :href="$signInHref" variant="outline" class="w-full">{{ __($signIn) }}</x-ui.button>
                <x-ui.button :href="$ctaHref" class="w-full">{{ __($cta) }}</x-ui.button>
            </div>
        </div>
    </div>
</header>

Installation

terminal

php artisan ui:add blocks/header-mega-menu

Installs these dependencies automatically:

badge brand button navigation-menu

Registry contract

Install confidence

php artisan ui:add blocks/header-mega-menu writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.7
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/header-mega-menu.blade.php

Registry dependencies

badge brand button navigation-menu

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

header-mega-menu.md

# Brok UI block: Header Mega (`header-mega-menu`)

A sticky site header with a multi-column mega-menu, a featured promo card, secondary nav links, and a mobile hamburger panel.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/header-mega-menu
```

## Render it

```blade
<x-blocks.header-mega-menu />
```

## Props

- `brand` (string, default `Acme`) — Brand wordmark text.
- `brand-href` (string, default `#`) — URL the brand mark links to.
- `product-label` (string, default `Product`) — Label for the Product mega-menu trigger.
- `resources-label` (string, default `Resources`) — Label for the Resources dropdown trigger.
- `links` (mixed|null, default `null`) — Array of plain inline nav links ({label, href}); defaults to Pricing, Customers, Docs.
- `product-groups` (mixed|null, default `null`) — Array of grouped product link columns ({heading, items}) rendered in the mega-menu; defaults to a built-in Platform/Solutions set.
- `featured` (mixed|null, default `null`) — Featured promo card content ({badge, title, description, cta, href}) shown in the mega-menu.
- `resources` (mixed|null, default `null`) — Array of resource links ({title, description, href, icon}) shown in the Resources dropdown.
- `cta` (string, default `Get started`) — Text for the primary call-to-action button.
- `cta-href` (string, default `#`) — URL the call-to-action button points to.
- `sign-in` (string, default `Sign in`) — Text for the sign-in link/button.
- `sign-in-href` (string, default `#`) — URL the sign-in action points to.

## Use when

- Building a sticky header whose Product dropdown is a multi-column mega-menu with a featured promo card.
- Grouping a large set of product and resource links under labelled dropdown triggers with icons and descriptions.

## Avoid when

- Use header-dropdown instead for a single simple dropdown without multiple columns or a featured card.

## Rules

- Render the installed block with `<x-blocks.header-mega-menu />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/header-mega-menu
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/header-mega-menu.json

Ask about Header Mega in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Building a sticky header whose Product dropdown is a multi-column mega-menu with a featured promo card.
Grouping a large set of product and resource links under labelled dropdown triggers with icons and descriptions.

Avoid when

Use header-dropdown instead for a single simple dropdown without multiple columns or a featured card.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: brand mark mega-menu dropdown featured promo card resources dropdown mobile menu panel

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.header-mega-menu />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.