Zinc UI
Alpha
Layouts
Guides
Layouts
Components

Header

A full-width top navigation layout for your application.
Fullscreen
Header Light
+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
Header Sidebar Light
+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
Without Header Light
+use Livewire\Attributes\Layout;
use Livewire\Component;
 
+#[Layout('layouts.without-header')]
class YourLivewireComponent extends Component
{
public function render()
{
return view('livewire.your-livewire-component');
}
}

Code highlighting provided by Torchlight