page-header

The page title, description, breadcrumbs and main actions.

Example

Segments

Rules that group members.

Perk module / detail

Early entry discount

Active Priority 90
perk_early_entry_10

Laravel

<x-admin::page-header title="Segments" description="Rules that group members." :breadcrumbs="['Audience' => '#', 'Segments' => null]">
    <x-slot:actions><x-admin::button variant="primary" icon="plus">New segment</x-admin::button></x-slot:actions>
</x-admin::page-header>
<x-admin::page-header class="mt" eyebrow="Perk module / detail" title="Early entry discount" code="perk_early_entry_10">
    <x-slot:meta><x-admin::badge variant="success" dot>Active</x-admin::badge><x-admin::badge>Priority 90</x-admin::badge></x-slot:meta>
    <x-slot:actions><x-admin::button icon="edit">Edit perk</x-admin::button></x-slot:actions>
</x-admin::page-header>

Props

PropRequiredDefaultOptions
titleyes
descriptionnull
breadcrumbs[]
eyebrownull
codenull

Slots: meta, actions

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { PageHeader } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-page-header">
    <div class="adm-page-header__text">
                    <nav class="adm-breadcrumbs" aria-label="Breadcrumb">
                        <a href="#">Audience</a>            <span class="adm-breadcrumbs__sep" aria-hidden="true">/</span>
                                <span aria-current="page">Segments</span>
            </nav>
                                    <h1 class="adm-title">Segments</h1>
                                    <p>Rules that group members.</p>
            </div>
            <div class="adm-row"><button type="button" class="adm-btn adm-btn--primary" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New segment</button></div>
    </div>
<div class="adm-page-header mt">
    <div class="adm-page-header__text">
                <p class="adm-eyebrow">Perk module / detail</p>                    <div class="adm-page-header__title"><h1 class="adm-title">Early entry discount</h1><span class="adm-row"><span class="adm-badge adm-badge--success adm-badge--dot">Active</span>
<span class="adm-badge adm-badge--neutral">Priority 90</span></span></div>
                <code class="adm-code adm-page-header__code">perk_early_entry_10</code>            </div>
            <div class="adm-row"><button type="button" class="adm-btn adm-btn--secondary" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>Edit perk</button></div>
    </div>