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

5 of 8

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

@props([
    'links'          => null,
    'brandName'      => 'Acme',
    'brandGlyph'     => 'A',
    'searchPlaceholder' => 'Search…',
    'signInHref'     => '#',
    'getStartedHref' => '#',
    'kbdHint'        => '/',
    'menuLabel'      => 'Menu',
    'menuId'         => 'header-06-menu',
])

@php
    $links ??= [
        ['label' => 'Product', 'href' => '#', 'active' => false],
        ['label' => 'Pricing', 'href' => '#', 'active' => true],
        ['label' => 'Docs', 'href' => '#', 'active' => false],
    ];
@endphp

<header {{ $attributes->merge(['class' => 'border-b border-border bg-background']) }}>
    <div class="mx-auto max-w-7xl px-4">
        <div class="flex h-16 items-center justify-between gap-4">
            <div class="flex shrink-0 items-center gap-6">
                <x-ui.brand href="/" :label="$brandName" :glyph="$brandGlyph" collapse />

                <nav class="hidden items-center gap-2 md:flex" aria-label="{{ __('Main navigation') }}">
                    @foreach ($links as $link)
                        <a
                            href="{{ $link['href'] }}"
                            @class([
                                'rounded-md px-4 py-2 text-sm font-medium transition-colors',
                                'bg-accent text-foreground' => $link['active'] ?? false,
                                'text-muted-foreground hover:bg-accent hover:text-foreground' => ! ($link['active'] ?? false),
                            ])
                            @if ($link['active'] ?? false) aria-current="page" @endif
                        >{{ __($link['label']) }}</a>
                    @endforeach
                </nav>
            </div>

            <div class="hidden max-w-md flex-1 md:block">
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 start-3 flex items-center text-muted-foreground" aria-hidden="true">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
                        </svg>
                    </span>
                    <x-ui.input type="search" class="w-full ps-10 pe-16" :placeholder="__($searchPlaceholder)" aria-label="{{ __('Search') }}" />
                    <span class="pointer-events-none absolute inset-y-0 end-2 flex items-center" aria-hidden="true">
                        <kbd class="inline-flex items-center rounded border border-border bg-muted px-2 py-0.5 font-mono text-xs leading-none text-muted-foreground">{{ $kbdHint }}</kbd>
                    </span>
                </div>
            </div>

            <div class="flex shrink-0 items-center gap-2">
                <x-ui.button variant="ghost" size="sm" :href="$signInHref">{{ __('Sign in') }}</x-ui.button>
                <x-ui.button variant="default" size="sm" :href="$getStartedHref">{{ __('Get started') }}</x-ui.button>

                {{-- Mobile menu: an end-side sheet holding the nav links hidden below md --}}
                <x-ui.sheet>
                    <x-ui.button
                        type="button"
                        variant="ghost"
                        size="icon"
                        class="md:hidden"
                        x-on:click="show()"
                        aria-haspopup="dialog"
                        x-bind:aria-expanded="open"
                        aria-controls="{{ $menuId }}"
                        x-ref="trigger"
                        aria-label="{{ __($menuLabel) }}"
                    >
                        <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">
                            <line x1="4" y1="6" x2="20" y2="6" /><line x1="4" y1="12" x2="20" y2="12" /><line x1="4" y1="18" x2="20" y2="18" />
                        </svg>
                    </x-ui.button>

                    <x-ui.sheet.content side="end" class="flex flex-col !p-0">
                        <div class="flex shrink-0 items-center justify-between gap-4 border-b border-border px-4 py-2">
                            <x-ui.sheet.title class="flex min-w-0 items-center text-sm">
                                <x-ui.brand as="span" :label="$brandName" :glyph="$brandGlyph" />
                            </x-ui.sheet.title>
                            <x-ui.button variant="ghost" size="sm" :icon-label="__('Close menu')" x-on:click="hide()" class="text-muted-foreground">
                                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
                            </x-ui.button>
                        </div>

                        <nav id="{{ $menuId }}" aria-label="{{ __('Main navigation') }}" class="flex-1 overflow-y-auto p-4">
                            <ul class="grid gap-2">
                                @foreach ($links as $link)
                                    <li>
                                        <a
                                            href="{{ $link['href'] }}"
                                            data-active="{{ ($link['active'] ?? false) ? 'true' : 'false' }}"
                                            @if ($link['active'] ?? false) aria-current="page" @endif
                                            class="flex h-control-h-md items-center rounded-md px-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring data-[active=true]:bg-accent/50 motion-reduce:transition-none"
                                        >{{ __($link['label']) }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </nav>

                        <div class="grid shrink-0 gap-2 border-t border-border p-4">
                            <x-ui.input type="search" class="w-full" :placeholder="__($searchPlaceholder)" aria-label="{{ __('Search') }}" />
                        </div>
                    </x-ui.sheet.content>
                </x-ui.sheet>
            </div>
        </div>
    </div>
</header>

Installation

terminal

php artisan ui:add blocks/header-search

Installs these dependencies automatically:

brand button input sheet

Registry contract

Install confidence

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

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

Registry dependencies

brand button input sheet

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

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

# Brok UI block: Header Search (`header-search`)

A marketing site header with a prominent inline search field and keyboard-shortcut hint between the brand nav and sign-in and get-started actions.

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-search
```

## Render it

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

## Props

- `links` (mixed|null, default `null`) — Array of nav links ({label, href, active}); defaults to a built-in set of three links.
- `brand-name` (string, default `Acme`) — Brand wordmark text.
- `brand-glyph` (string, default `A`) — Single-character glyph shown in the brand mark.
- `search-placeholder` (string, default `Search…`) — Placeholder text for the search input.
- `sign-in-href` (string, default `#`) — URL the sign-in button points to.
- `get-started-href` (string, default `#`) — URL the get-started button points to.
- `kbd-hint` (string, default `/`) — Keyboard shortcut hint shown inside the search field.
- `menu-label` (string, default `Menu`) — Accessible label for the mobile menu trigger.
- `menu-id` (string, default `header-06-menu`) — Element id linking the mobile menu trigger to its sheet panel.

## Use when

- Building a marketing header with a prominent inline search field and a keyboard-shortcut hint between the nav and actions.
- Opening the mobile navigation as an end-side sheet that also repeats the search field.

## Avoid when

- Use header-drawer instead when the mobile menu should open as a start-side navigation drawer with a badge-aware link list.

## Rules

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

Ask about Header Search 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 marketing header with a prominent inline search field and a keyboard-shortcut hint between the nav and actions.
Opening the mobile navigation as an end-side sheet that also repeats the search field.

Avoid when

Use header-drawer instead when the mobile menu should open as a start-side navigation drawer with a badge-aware link list.

Anti-patterns

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

Anatomy: brand mark desktop nav links search field sign-in/get-started actions mobile menu sheet

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.header-search />

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.