Maskow Labs Logo Livewire Components

Page Header

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>