Components

Head

Basics

The Head component is used to place document information: metadata (such as the window title or encoding), links to scripts, and stylesheets.

The Head component contains some standard metadata by default.

use MoonShine\UI\Components\Layout\Head;Head::make(array|iterable $components = []);
use MoonShine\UI\Components\Layout\Head;
 
Head::make(array|iterable $components = []);
Head::make([ Meta::make('csrf-token')->customAttributes([ 'content' => 'token', ]),]);
Head::make([
Meta::make('csrf-token')->customAttributes([
'content' => 'token',
]),
]);
<x-moonshine::layout.head>
<meta name="csrf-token" content="token" />
</x-moonshine::layout.head>

Parent component: Html
Child components: Meta, Assets, Favicon

Page Title

To set the page title, you can use the title() method or specify the corresponding parameter in the blade component.

title(string $title);
title(string $title);
Head::make([ // ...]) ->title('Page Title');
Head::make([
// ...
])
->title('Page Title');
// ...
<x-moonshine::layout.head title='Page Title'>
// ...
</x-moonshine::layout.head>

Theme Color

Some browsers allow you to suggest a theme color based on your site's palette. The browser's interface will adapt to the suggested color.
To add a color, you need to use the bodyColor() method or specify the corresponding parameter in the blade component.

bodyColor(string $color);
bodyColor(string $color);
Head::make([ // ...]) ->bodyColor('#7843e9');
Head::make([
// ...
])
->bodyColor('#7843e9');
// ...
<x-moonshine::layout.head bodyColor='#7843e9'>
// ...
</x-moonshine::layout.head>