You're browsing the documentation for Livewire v4 beta. Go to stable v3 docs →

Title

Are you a visual learner?
Master Livewire with our in-depth screencasts
Watch now

The #[Title] attribute sets the page title for full-page Livewire components.

Basic usage

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 { 
    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.

Layout configuration

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> 
</head>
<body>
    {{ $slot }}
</body>
</html>

The ?? 'My App' provides a fallback title if none is specified.

Dynamic titles

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}"); 
    }
};
?>
 
<div>
    <h1>Edit Post</h1>
    <!-- ... -->
</div>

The title will dynamically include the post's title.

Combining with layouts

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.

When to use

Use #[Title] when:

  • Building full-page components
  • You want clean, declarative title definitions
  • The title is static or rarely changes
  • You're following SEO best practices

Use title() method when:

  • The title depends on component properties
  • You need to compute the title dynamically
  • The title changes based on component state

Example: CRUD pages

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.

SEO considerations

Good page titles are crucial for SEO:

  • Be descriptive - "Edit Post: Getting Started with Laravel" is better than "Edit"
  • Keep it concise - Aim for 50-60 characters to avoid truncation in search results
  • Include keywords - Help search engines understand your page content
  • Be unique - Each page should have a distinct title

Only for full-page components

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.

Learn more

For more information about full-page components, layouts, and routing, see the Pages documentation.

Reference

#[Title(
    string $content,
)]
Parameter Type Default Description
$content string required The text to display in the browser's title bar