Page Header – Laravel Livewire Basic Components

Page headers are used to display the title of a page. They can include a description and actions.

1<x-page.header title="Notifications" />

Description

Add a description to the page header by using the description attribute.

1<x-page.header title="Notifications" description="Configure how you receive notifications." />

Icon

Add an icon to the page header by using the icon attribute.

The icon will be displayed next to the title. You can use any icon from the available icon sets.

1<x-page.header title="Notifications" icon="bell--outline" />

Breadcrumb

Add a breadcrumb to the page header by using the breadcrumb slot.

1<x-page.header title="Notifications">
2    <x-slot:breadcrumb>
3        <x-breadcrumb.item href="#">Settings</x-breadcrumb.item>
4        <x-breadcrumb.item href="#">Account</x-breadcrumb.item>
5        <x-breadcrumb.item current>Notifications</x-breadcrumb.item>
6    </x-slot:breadcrumb>
7</x-page.header>

Actions

Add actions to the page header by using the actions slot.

 1<x-page.header title="Notifications">
 2    <x-slot:actions>
 3        <x-button type="primary" size="sm" icon="pencil--micro">Edit</x-button>
 4        <x-dropdown id="ph-drop-01">
 5            <x-slot:toggle size="sm" icon="ellipsis-vertical--micro"></x-slot:toggle>
 6 
 7            <x-button type="transparent" icon="document--outline">Details</x-button>
 8            <x-button type="transparent" icon="users--outline">Members</x-button>
 9            <x-button type="transparent" icon="check--outline">Tasks</x-button>
10        </x-dropdown>
11    </x-slot:actions>
12</x-page.header>

Prepend

Prepend content to the page header by using the prepend slot.

 1<x-page.header title="Notifications">
 2    <x-slot:prepend>
 3        <img src="{{ Vite::image('avatar/01.jpg') }}" alt="Avatar" style="height: 3rem; width: 3rem; border-radius: 0.5rem;">
 4    </x-slot:prepend>
 5    <x-slot:breadcrumb>
 6        <x-breadcrumb.item href="#">Settings</x-breadcrumb.item>
 7        <x-breadcrumb.item href="#">Account</x-breadcrumb.item>
 8        <x-breadcrumb.item current>Notifications</x-breadcrumb.item>
 9    </x-slot:breadcrumb>
10</x-page.header>

Compact

The compact attribute renders the header as one slim line: a small icon without the icon box, a smaller title and the actions on the right. It has no border, the separation comes from spacing alone.

Use it on pages whose content brings its own headings, such as a settings page built from sections.

1<x-page.header compact title="Members and invitations" icon="users--outline"> 
2    <x-slot:actions>
3        <x-button type="primary" size="sm" icon="plus--micro">Invite member</x-button>
4    </x-slot:actions>
5</x-page.header>