blatui

Components

Page Header

A page title block with a description and optional breadcrumb and action slots.

php artisan blatui:add page-header

Dashboard

An overview of your account activity and recent metrics.

<x-ui.page-header
    title="Dashboard"
    description="An overview of your account activity and recent metrics."
/>

With Actions

Projects

Manage and organize all of your team's work in one place.

<x-ui.page-header
    title="Projects"
    description="Manage and organize all of your team's work in one place."
>
    <x-slot:actions>
        <x-ui.button variant="outline">Import</x-ui.button>
        <x-ui.button>New project</x-ui.button>
    </x-slot:actions>
</x-ui.page-header>

With Breadcrumb

Billing settings

Update your plan, payment method, and view past invoices.

<x-ui.page-header
    title="Billing settings"
    description="Update your plan, payment method, and view past invoices."
    :separator="true"
>
    <x-slot:breadcrumb>
        <x-ui.breadcrumb>
            <x-ui.breadcrumb-list>
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-link href="#">Home</x-ui.breadcrumb-link>
                </x-ui.breadcrumb-item>
                <x-ui.breadcrumb-separator />
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-link href="#">Settings</x-ui.breadcrumb-link>
                </x-ui.breadcrumb-item>
                <x-ui.breadcrumb-separator />
                <x-ui.breadcrumb-item>
                    <x-ui.breadcrumb-page>Billing</x-ui.breadcrumb-page>
                </x-ui.breadcrumb-item>
            </x-ui.breadcrumb-list>
        </x-ui.breadcrumb>
    </x-slot:breadcrumb>

    <x-slot:actions>
        <x-ui.button variant="outline">Cancel</x-ui.button>
        <x-ui.button>Save changes</x-ui.button>
    </x-slot:actions>
</x-ui.page-header>

API Reference

Props, slots and exposed methods for <x-ui.page-header>.

Props

Prop Type Default Description
title string — The page title. May also be supplied through the default slot instead of this prop.
description string — Supporting copy shown under the title. May also be supplied through the description named slot.
separator bool false When true, draws a bottom border with padding under the header to divide it from the page content.
as string 'h1' Heading level used to render the title element.
h1 h2 h3 h4 h5 h6

Slots

Slot Description
default Alternative way to provide the title content (used when the title prop is omitted).
description Alternative way to provide the supporting copy (used when the description prop is omitted).
breadcrumb Optional breadcrumb trail rendered above the title row, e.g. a <x-ui.breadcrumb>.
actions Action buttons aligned to the end of the title row (right on wide screens, below the title on mobile).