The #[Title] attribute sets the page title for full-page Livewire components.
Apply the #[Title] attribute to a full-page component to set its title:
<?php // resources/views/pages/posts/âš¡create.blade.php
use Livewire\Attributes\Title;
use Livewire\Component;
new #[Title('Create Post')] class extends Component { // [tl! highlight]
public $title = '';
public $content = '';
public function save()
{
// Save post...
}
};
?>
<div>
<h1>Create a New Post</h1>
<input type="text" wire:model="title" placeholder="Post title">
<textarea wire:model="content" placeholder="Post content"></textarea>
<button wire:click="save">Save Post</button>
</div>The browser tab will display "Create Post" as the page title.
For the #[Title] attribute to work, your layout file must include a $title variable:
<!-- resources/views/components/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>{{ $title ?? 'My App' }}</title> <!-- [tl! highlight] -->
</head>
<body>
{{ $slot }}
</body>
</html>The ?? 'My App' provides a fallback title if none is specified.
For dynamic titles using component properties, use the title() method in the render() method:
<?php // resources/views/pages/posts/âš¡edit.blade.php
use Livewire\Component;
use App\Models\Post;
new class extends Component {
public Post $post;
public function mount($id)
{
$this->post = Post::findOrFail($id);
}
public function render()
{
return $this->view()
->title("Edit: {$this->post->title}"); // [tl! highlight]
}
};
?>
<div>
<h1>Edit Post</h1>
<!-- ... -->
</div>The title will dynamically include the post's title.
You can use both #[Title] and #[Layout] together:
<?php // resources/views/pages/posts/âš¡create.blade.php
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;
new
#[Layout('layouts.admin')]
#[Title('Create Post')]
class extends Component {
// ...
};This component will use the admin layout with "Create Post" as the title.
Use #[Title] when:
Use title() method when:
Here's a complete example showing titles across CRUD operations:
<?php // resources/views/pages/posts/âš¡index.blade.php
use Livewire\Attributes\Title;
use Livewire\Component;
new #[Title('All Posts')] class extends Component { };<?php // resources/views/pages/posts/âš¡create.blade.php
use Livewire\Attributes\Title;
use Livewire\Component;
new #[Title('Create Post')] class extends Component { };<?php // resources/views/pages/posts/âš¡edit.blade.php
use Livewire\Component;
use App\Models\Post;
new class extends Component {
public Post $post;
public function render()
{
return $this->view()->title("Edit: {$this->post->title}");
}
};<?php // resources/views/pages/posts/âš¡show.blade.php
use Livewire\Component;
use App\Models\Post;
new class extends Component {
public Post $post;
public function render()
{
return $this->view()->title($this->post->title);
}
};Each page has a contextually appropriate title that improves user experience and SEO.
Good page titles are crucial for SEO:
[!info] Full-page components only The #[Title] attribute only works for full-page components accessed via routes. Regular components rendered within other views don't use titles—they inherit the parent page's title.For more information about full-page components, layouts, and routing, see the Pages documentation.
#[Title(
string $content,
)]| Parameter | Type | Default | Description |
|---|---|---|---|
$content | string | *required* | The text to display in the browser's title bar |