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

6 of 8

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

@props([
    'announcementBadge' => 'New',
    'announcementText'  => 'We just launched our v2.0 release.',
    'announcementHref'  => '#',
    'announcementLabel' => 'Read the announcement',
    'brand'             => 'Acme',
    'links'             => null,
    'signInHref'        => '#',
    'getStartedHref'    => '#',
    'menuLabel'         => 'Menu',
    'menuId'            => 'header-07-menu',
])

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

<div data-slot="header-banner" {{ $attributes }}>
    <div class="bg-primary px-4 py-2 text-primary-foreground">
        <p class="flex flex-wrap items-center justify-center gap-x-2 gap-y-2 text-center text-sm">
            <x-ui.badge class="border-transparent bg-primary-foreground text-primary">{{ __($announcementBadge) }}</x-ui.badge>
            <span>{{ __($announcementText) }}</span>
            <a href="{{ $announcementHref }}" class="inline-flex items-center gap-x-2 font-medium underline underline-offset-2 hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                {{ __($announcementLabel) }}
                <svg class="size-4 shrink-0 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
            </a>
        </p>
    </div>

    <header 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-x-6">
                <div class="flex items-center gap-x-8">
                    <x-ui.brand href="/" :label="$brand" />
                    <nav class="hidden items-center gap-x-6 md:flex" aria-label="{{ __('Main navigation') }}">
                        @foreach ($links as $link)
                            <a
                                href="{{ $link['href'] }}"
                                @class([
                                    'rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                                    'text-foreground' => $link['active'] ?? false,
                                    'text-muted-foreground hover:text-foreground' => ! ($link['active'] ?? false),
                                ])
                                @if ($link['active'] ?? false) aria-current="page" @endif
                            >{{ __($link['label']) }}</a>
                        @endforeach
                    </nav>
                </div>

                <div class="flex items-center gap-x-4">
                    <x-ui.button variant="ghost" size="sm" :href="$signInHref" class="hidden md:inline-flex">{{ __('Sign in') }}</x-ui.button>
                    <x-ui.button variant="default" size="sm" :href="$getStartedHref" :with-arrow="true" class="!hidden sm:!inline-flex">{{ __('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="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" 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="$brand" />
                                </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.button variant="outline" :href="$signInHref" class="w-full">{{ __('Sign in') }}</x-ui.button>
                                <x-ui.button :href="$getStartedHref" class="w-full">{{ __('Get started') }}</x-ui.button>
                            </div>
                        </x-ui.sheet.content>
                    </x-ui.sheet>
                </div>
            </div>
        </div>
    </header>
</div>

Installation

terminal

php artisan ui:add blocks/header-banner

Installs these dependencies automatically:

badge brand button sheet

Registry contract

Install confidence

php artisan ui:add blocks/header-banner 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-banner.blade.php

Registry dependencies

badge brand button 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-banner.md

# Brok UI block: Header Banner (`header-banner`)

A site header with a slim primary announcement strip stacked above a navbar with brand, links 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-banner
```

## Render it

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

## Props

- `announcement-badge` (string, default `New`) — Badge label shown before the announcement text.
- `announcement-text` (string, default `We just launched our v2.0 release.`) — Announcement message shown in the strip.
- `announcement-href` (string, default `#`) — URL the announcement link points to.
- `announcement-label` (string, default `Read the announcement`) — Link text for the announcement call-to-action.
- `brand` (string, default `Acme`) — Brand wordmark text.
- `links` (mixed|null, default `null`) — Array of nav links ({label, href, active}); defaults to a built-in set of four links.
- `sign-in-href` (string, default `#`) — URL the sign-in button points to.
- `get-started-href` (string, default `#`) — URL the get-started button points to.
- `menu-label` (string, default `Menu`) — Accessible label for the mobile menu trigger.
- `menu-id` (string, default `header-07-menu`) — Element id linking the mobile menu trigger to its sheet panel.

## Use when

- Building a site header with a slim announcement strip stacked above the main navbar.
- Opening the mobile navigation as an end-side sheet below md while showing sign-in and get-started actions above it.

## Avoid when

- Use header-dropdown instead when there is no announcement to promote above the navbar.

## Rules

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

Ask about Header Banner 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 site header with a slim announcement strip stacked above the main navbar.
Opening the mobile navigation as an end-side sheet below md while showing sign-in and get-started actions above it.

Avoid when

Use header-dropdown instead when there is no announcement to promote above the navbar.

Anti-patterns

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

Anatomy: announcement strip brand mark desktop nav links 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-banner />

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.