Header

A full-width top navigation layout for your application.

+use Livewire\Attributes\Layout; 
 use Livewire\Component;
  
+#[Layout('layouts.header')] 
 class YourLivewireComponent extends Component
 {
     public function render()
     {
         return view('livewire.your-livewire-component');
     }
 }

Secondary sidebar

A layout with a sidebar for secondary navigation, ideal for user dashboards.

Fullscreen

+use Livewire\Attributes\Layout; 
 use Livewire\Component;
  
+#[Layout('layouts.header-sidebar')] 
 class YourLivewireComponent extends Component
 {
     public function render()
     {
         return view('livewire.your-livewire-component');
     }
 }

Without header

A full-width layout without a header, perfect for simple authentication pages.

Fullscreen

+use Livewire\Attributes\Layout; 
 use Livewire\Component;
  
+#[Layout('layouts.without-header')] 
 class YourLivewireComponent extends Component
 {
     public function render()
     {
         return view('livewire.your-livewire-component');
     }
 }