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

7 of 8

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

@props([
    'brand' => 'Acme',
    'brandHref' => '#',
    'links' => null,
    'cta' => 'Get started',
    'ctaHref' => '#',
    'menuLabel' => 'Open menu',
    'menuId' => 'header-08-drawer',
])

@php
    $links ??= [
        ['label' => 'Home', 'href' => '#'],
        ['label' => 'Features', 'href' => '#'],
        ['label' => 'Pricing', 'href' => '#'],
        ['label' => 'Changelog', 'href' => '#', 'badge' => 'New'],
        ['label' => 'Docs', 'href' => '#'],
        ['label' => 'Contact', 'href' => '#'],
    ];
@endphp

<header
    {{ $attributes->merge(['class' => 'sticky top-0 z-40 w-full border-b border-border bg-background/90 text-foreground backdrop-blur']) }}
>
    {{-- Top bar --}}
    <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" />

        {{-- Slim inline nav (desktop only) --}}
        <nav class="hidden min-w-0 items-center gap-2 lg:flex" aria-label="{{ __('Main') }}">
            @foreach ($links as $link)
                <a href="{{ $link['href'] }}" class="inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                    {{ __($link['label']) }}
                    @if (! empty($link['badge']))
                        <x-ui.badge variant="secondary" size="sm">{{ __($link['badge']) }}</x-ui.badge>
                    @endif
                </a>
            @endforeach
        </nav>

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

            {{-- Hamburger opens a start-side sheet (always visible) --}}
            <x-ui.sheet>
                <x-ui.button
                    type="button"
                    variant="outline"
                    size="icon"
                    x-on:click="show()"
                    aria-haspopup="dialog"
                    x-bind:aria-expanded="open"
                    aria-controls="{{ $menuId }}"
                    x-ref="trigger"
                >
                    <span class="sr-only">{{ __($menuLabel) }}</span>
                    <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"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
                </x-ui.button>

                <x-ui.sheet.content side="start" class="flex flex-col !p-0">
                    {{-- Drawer header --}}
                    <div class="flex shrink-0 items-center justify-between gap-4 border-b border-border px-4 py-4">
                        <x-ui.sheet.title class="flex min-w-0 items-center">
                            <x-ui.brand as="span" :label="$brand" />
                        </x-ui.sheet.title>
                        <x-ui.button type="button" variant="ghost" size="icon" x-on:click="hide()" aria-label="{{ __('Close menu') }}">
                            <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"><path d="M18 6 6 18M6 6l12 12" /></svg>
                        </x-ui.button>
                    </div>

                    {{-- Drawer nav --}}
                    <nav id="{{ $menuId }}" class="flex-1 overflow-y-auto p-4" aria-label="{{ __('Site') }}">
                        <ul class="space-y-2">
                            @foreach ($links as $link)
                                <li>
                                    <a href="{{ $link['href'] }}" class="flex items-center justify-between gap-4 rounded-md px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                                        <span>{{ __($link['label']) }}</span>
                                        @if (! empty($link['badge']))
                                            <x-ui.badge variant="secondary" size="sm">{{ __($link['badge']) }}</x-ui.badge>
                                        @else
                                            <svg class="size-4 text-muted-foreground 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="m9 18 6-6-6-6" /></svg>
                                        @endif
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </nav>

                    {{-- Drawer footer CTA --}}
                    <div class="shrink-0 border-t border-border p-4">
                        <x-ui.separator class="mb-4" />
                        <x-ui.button :href="$ctaHref" class="w-full">{{ __($cta) }}</x-ui.button>
                    </div>
                </x-ui.sheet.content>
            </x-ui.sheet>
        </div>
    </div>
</header>

Installation

terminal

php artisan ui:add blocks/header-drawer

Installs these dependencies automatically:

badge brand button separator sheet

Registry contract

Install confidence

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

Registry dependencies

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

# Brok UI block: Header Sidebar (`header-drawer`)

An off-canvas header: a slim top bar with brand, optional inline desktop nav, and a primary call-to-action, plus a hamburger that opens an Alpine-powered slide-in side drawer. The drawer pins to the inline-start edge, lists the full navigation (with optional badges) above a separator and CTA, dims the page behind a click-to-close backdrop, and closes on Escape.

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

## Render it

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

## Props

- `brand` (string, default `Acme`) — Brand wordmark text.
- `brand-href` (string, default `#`) — URL the brand mark links to.
- `links` (mixed|null, default `null`) — Array of nav links ({label, href, badge}); defaults to a built-in set of six links.
- `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.
- `menu-label` (string, default `Open menu`) — Accessible label for the drawer toggle button.
- `menu-id` (string, default `header-08-drawer`) — Element id linking the drawer toggle to its panel.

## Use when

- Building a slim header whose hamburger always opens a start-side slide-in navigation drawer, not just below a breakpoint.
- Listing the full navigation with optional badges above a separator and call-to-action inside the drawer.

## Avoid when

- Use header-search instead when the mobile menu should open from the end side rather than the start side.

## Rules

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

Ask about Header Sidebar 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 slim header whose hamburger always opens a start-side slide-in navigation drawer, not just below a breakpoint.
Listing the full navigation with optional badges above a separator and call-to-action inside the drawer.

Avoid when

Use header-search instead when the mobile menu should open from the end side rather than the start side.

Anti-patterns

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

Anatomy: brand mark inline desktop nav primary call-to-action drawer toggle navigation drawer

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.header-drawer />

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.