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 = []);
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);
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);
Head::make([
    // ...
])
    ->bodyColor('#7843e9');
<x-moonshine::layout.head bodyColor='#7843e9'>
    //...
</x-moonshine::layout.head>