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

2 of 8

resources/views/blocks/header-dropdown.blade.php Blade

@props([
    'brand' => 'Acme',
    'brandHref' => '#',
    'productLabel' => 'Product',
    'productLinks' => null,
    'links' => null,
    'loginLabel' => 'Log in',
    'loginHref' => '#',
    'cta' => 'Get started',
    'ctaHref' => '#',
])

@php
    $productLinks ??= [
        ['label' => 'Overview', 'description' => 'See how everything fits together.', 'href' => '#'],
        ['label' => 'Features', 'description' => 'Explore what the platform can do.', 'href' => '#'],
        ['label' => 'Integrations', 'description' => 'Connect your existing tools.', 'href' => '#'],
        ['label' => 'Changelog', 'description' => 'The latest shipped updates.', 'href' => '#'],
    ];

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

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

            <div class="hidden lg:flex">
                <x-ui.navigation-menu>
                    <x-ui.navigation-menu.list>
                        <x-ui.navigation-menu.item>
                            <x-ui.navigation-menu.trigger>{{ __($productLabel) }}</x-ui.navigation-menu.trigger>
                            <x-ui.navigation-menu.content class="min-w-[20rem]">
                                <ul class="grid gap-2">
                                    @foreach ($productLinks as $item)
                                        <li>
                                            <x-ui.navigation-menu.link :href="$item['href']">
                                                <span class="block text-sm font-medium text-foreground">{{ __($item['label']) }}</span>
                                                <span class="mt-0.5 block text-xs text-muted-foreground">{{ __($item['description']) }}</span>
                                            </x-ui.navigation-menu.link>
                                        </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="inline-flex h-9 items-center px-4 font-medium"
                                >{{ __($link['label']) }}</x-ui.navigation-menu.link>
                            </x-ui.navigation-menu.item>
                        @endforeach
                    </x-ui.navigation-menu.list>
                </x-ui.navigation-menu>
            </div>
        </div>

        <div class="hidden items-center gap-2 lg:flex">
            <a href="{{ $loginHref }}" class="rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none">
                {{ __($loginLabel) }}
            </a>
            <x-ui.button :href="$ctaHref" size="sm">{{ __($cta) }}</x-ui.button>
        </div>

        <div class="lg:hidden">
            <x-ui.button
                variant="ghost"
                size="icon"
                type="button"
                ::aria-expanded="open.toString()"
                aria-controls="header-dropdown-01-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>
            </x-ui.button>
        </div>
    </div>

    <div
        id="header-dropdown-01-mobile"
        x-show="open"
        x-cloak
        @click.outside="open = false"
        class="border-t border-border lg:hidden"
    >
        <div class="space-y-2 px-4 py-4">
            <p class="px-4 pb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ __($productLabel) }}</p>
            @foreach ($productLinks as $item)
                <a href="{{ $item['href'] }}" class="block rounded-md px-4 py-2 text-sm font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                    {{ __($item['label']) }}
                </a>
            @endforeach

            <div class="my-2 h-px bg-border" role="presentation"></div>

            @foreach ($links as $link)
                <a href="{{ $link['href'] }}" class="block rounded-md px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                    {{ __($link['label']) }}
                </a>
            @endforeach

            <div class="space-y-2 pt-4">
                <x-ui.button :href="$loginHref" variant="outline" size="sm" class="w-full block">{{ __($loginLabel) }}</x-ui.button>
                <x-ui.button :href="$ctaHref" size="sm" class="w-full block">{{ __($cta) }}</x-ui.button>
            </div>
        </div>
    </div>
</header>

Installation

terminal

php artisan ui:add blocks/header-dropdown

Installs these dependencies automatically:

brand button navigation-menu

Registry contract

Install confidence

php artisan ui:add blocks/header-dropdown 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.5
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

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

Registry dependencies

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-dropdown.md

# Brok UI block: Header Dropdown (`header-dropdown`)

A sticky backdrop-blurred site header with a brand wordmark, a desktop navigation-menu dropdown plus inline links, log in and get started actions, and a collapsible Alpine mobile 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-dropdown
```

## Render it

```blade
<x-blocks.header-dropdown />
```

## 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 dropdown trigger.
- `product-links` (mixed|null, default `null`) — Array of dropdown items ({label, description, href}); defaults to a built-in set of four items.
- `links` (mixed|null, default `null`) — Array of plain inline nav links ({label, href}); defaults to Pricing, Docs, Blog.
- `login-label` (string, default `Log in`) — Text for the log-in link.
- `login-href` (string, default `#`) — URL the log-in link points to.
- `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.

## Use when

- Building a sticky header with a desktop navigation-menu dropdown for product links plus inline links.
- Providing log in and get started actions with an Alpine-powered collapsible mobile panel below lg.

## Avoid when

- Use header-mega-menu instead when the dropdown needs a multi-column mega-menu with a featured promo card.

## Rules

- Render the installed block with `<x-blocks.header-dropdown />` 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-dropdown
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/header-dropdown.json

Ask about Header Dropdown 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 with a desktop navigation-menu dropdown for product links plus inline links.
Providing log in and get started actions with an Alpine-powered collapsible mobile panel below lg.

Avoid when

Use header-mega-menu instead when the dropdown needs a multi-column mega-menu with a featured promo card.

Anti-patterns

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

Anatomy: brand mark product dropdown menu inline nav links login/CTA actions mobile menu panel

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.header-dropdown />

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.