App Header

Open source

In-app structural headers and footers — page and section headers, a searchable resource toolbar, and a form action footer.

Add to page builder

3 of 5

resources/views/blocks/app-header-resource-toolbar.blade.php Blade

@props([
    'title'             => 'Users',
    'count'             => '128 users',
    'description'       => 'Manage and review your team members.',
    'action'            => null,
    'searchName'        => 'search',
    'searchValue'       => '',
    'searchPlaceholder' => 'Search users…',
    'filterName'        => 'status',
    'filterLabel'       => 'Status',
    'filterValue'       => '',
    'filterOptions'     => null,
    'sortName'          => 'sort',
    'sortLabel'         => 'Sort by',
    'sortValue'         => 'updated_desc',
    'sortOptions'       => null,
    'filters'           => null,
    'clearHref'         => null,
    'createHref'        => '#',
    'createLabel'       => 'Add user',
])

@php
    $filterOptions ??= [
        '' => 'All statuses',
        'active' => 'Active',
        'draft' => 'Draft',
        'archived' => 'Archived',
    ];

    $sortOptions ??= [
        'updated_desc' => 'Recently updated',
        'created_desc' => 'Newest',
        'name_asc' => 'Name A–Z',
        'name_desc' => 'Name Z–A',
    ];

    $filters ??= [];
@endphp

<header
    data-slot="resource-toolbar"
    data-surface="admin"
    data-visual-contracts="VC-003"
    {{ $attributes->merge(['class' => 'border-b border-border bg-background px-4 py-4 text-foreground sm:px-6']) }}
>
    <div class="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
        <div class="min-w-0">
            <div class="flex flex-wrap items-center gap-2">
                <h1 class="text-xl font-semibold tracking-tight">{{ __($title) }}</h1>
                @if ($count)
                    <x-ui.badge variant="secondary">{{ __($count) }}</x-ui.badge>
                @endif
            </div>

            @if ($description)
                <p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
            @endif
        </div>

        <div class="flex shrink-0 flex-col gap-2 sm:flex-row sm:items-end">
            <x-ui.form method="GET" :action="$action" class="grid min-w-0 gap-2 !space-y-0 sm:grid-cols-[minmax(12rem,1fr)_10rem_11rem_auto]">
                <x-ui.input-group class="min-w-0">
                    <x-ui.input-group.addon><svg 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 21-4.35-4.35" /></svg></x-ui.input-group.addon>
                    <x-ui.input-group.input
                        type="search"
                        :name="$searchName"
                        :value="$searchValue"
                        :placeholder="__($searchPlaceholder)"
                        aria-label="{{ __('Search') }}"
                    />
                </x-ui.input-group>

                <div>
                    <label for="{{ $filterName }}" class="sr-only">{{ __($filterLabel) }}</label>
                    <x-ui.select :name="$filterName" :id="$filterName" aria-label="{{ __($filterLabel) }}">
                        @foreach ($filterOptions as $value => $label)
                            <option value="{{ $value }}" @selected((string) $filterValue === (string) $value)>{{ __($label) }}</option>
                        @endforeach
                    </x-ui.select>
                </div>

                <div>
                    <label for="{{ $sortName }}" class="sr-only">{{ __($sortLabel) }}</label>
                    <x-ui.select :name="$sortName" :id="$sortName" aria-label="{{ __($sortLabel) }}">
                        @foreach ($sortOptions as $value => $label)
                            <option value="{{ $value }}" @selected((string) $sortValue === (string) $value)>{{ __($label) }}</option>
                        @endforeach
                    </x-ui.select>
                </div>

                <x-ui.button type="submit" variant="secondary">{{ __('Apply') }}</x-ui.button>
            </x-ui.form>

            @if ($createHref && $createLabel)
                <x-ui.button :href="$createHref">
                    <x-slot:icon>
                        <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">
                            <path d="M12 5v14M5 12h14" />
                        </svg>
                    </x-slot:icon>
                    {{ __($createLabel) }}
                </x-ui.button>
            @endif
        </div>
    </div>

    @if (! empty($filters))
        <div class="mt-4 flex flex-wrap items-center gap-2" aria-label="{{ __('Active filters') }}">
            <span class="text-sm text-muted-foreground">{{ __('Filters:') }}</span>

            @foreach ($filters as $filter)
                <x-ui.badge variant="outline" class="gap-2 pe-2">
                    {{ __($filter['label']) }}

                    @if (! empty($filter['removeHref']))
                        <a
                            href="{{ $filter['removeHref'] }}"
                            class="relative ms-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground after:absolute after:-inset-2 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                            aria-label="{{ __('Remove filter') }}: {{ __($filter['label']) }}"
                        >
                            <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                <path d="M18 6 6 18M6 6l12 12" />
                            </svg>
                        </a>
                    @endif
                </x-ui.badge>
            @endforeach

            @if ($clearHref)
                <x-ui.button :href="$clearHref" variant="ghost" size="sm">{{ __('Clear all') }}</x-ui.button>
            @endif
        </div>
    @endif
</header>

Installation

terminal

php artisan ui:add blocks/app-header-resource-toolbar

Installs these dependencies automatically:

select button badge form input-group

Registry contract

Install confidence

php artisan ui:add blocks/app-header-resource-toolbar 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.2.4
License: open
Stability: stable
Contract: v2
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/app-header-resource-toolbar.blade.php

Registry dependencies

select button badge form input-group

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.

app-header-resource-toolbar.md

# Brok UI block: Resource Toolbar (`app-header-resource-toolbar`)

A server-ready resource toolbar with a page title, result count, GET-backed search, status filter, sort control, active-filter chips, and a primary create action.

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/app-header-resource-toolbar
```

## Render it

```blade
<x-blocks.app-header-resource-toolbar />
```

## Props

- `title` (string, default `Users`) — Page heading.
- `count` (string|null, default `128 users`) — Result-count badge text.
- `description` (string|null, default `Manage and review your team members.`) — Supporting page description.
- `action` (string|null, default `null`) — GET form action for search, filter, and sort.
- `search-name` (string, default `search`) — Search query parameter name.
- `search-value` (string) — Current search query.
- `search-placeholder` (string, default `Search users…`) — Search input placeholder.
- `filter-name` (string, default `status`) — Filter query parameter name.
- `filter-label` (string, default `Status`) — Accessible filter label.
- `filter-value` (string) — Current filter value.
- `filter-options` (array|null, default `null`) — Associative value-to-label options for the resource filter.
- `sort-name` (string, default `sort`) — Sort query parameter name.
- `sort-label` (string, default `Sort by`) — Accessible sort label.
- `sort-value` (string, default `updated_desc`) — Current sort value.
- `sort-options` (array|null, default `null`) — Associative value-to-label options for sorting.
- `filters` (array|null, default `null`) — Active filter labels with optional removeHref values.
- `clear-href` (string|null, default `null`) — Destination that clears all active filters.
- `create-href` (string|null, default `#`) — Primary create-action destination.
- `create-label` (string|null, default `Add user`) — Primary create-action label.

## Use when

- Use above an application resource list that needs search, filtering, sorting, result context, and a create action.

## Avoid when

- Use app-header-page for a plain application page header without search, filter or sort; a marketing header suits a page that is not a resource collection at all.

## Rules

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

Ask about Resource Toolbar 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

Use above an application resource list that needs search, filtering, sorting, result context, and a create action.

Avoid when

Use app-header-page for a plain application page header without search, filter or sort; a marketing header suits a page that is not a resource collection at all.

Anti-patterns

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

Anatomy: title and result count description GET search form filter select sort select create action active-filter chips
Theming hooks: Uses the admin surface and semantic design tokens.

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.app-header-resource-toolbar />

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.