Compose complex layouts with multiple slots
In the previous article, we looked at the $slot variable and how to inject content into our components. But what if our component was composed of multiple slots? Make different components you say? We could, but sometimes that’s just not practical. There can be over-segmentation.
resources/views/components/details.blade.php file. The component will contain the details tag that’s standard with HTML. It just allows for the text to be clicked on and expanded.details tag is as follows:<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
We would like to add content inside of the summary tag and additional content underneath it. That means that we need two slots. Let’s get the $slot variable out of the way since we’re already familiar with it.
<details>
<summary>Details</summary>
{{ $slot }}
</details>
How do we replace the Details text? We can do another slot and name it something different, like $title.
<details>
<summary>{{ $title }}</summary>
<p>{{ $slot }}</p>
</details>
How do we pass content now to both of our $slot and $title slots? In the previous article we created a resources/views/blade-slots/index.blade.php file, so I’ll use that one to illustrate the concept.
<x-button>
Test
</x-button>
<x-details>
<x-slot:title>2023 Nissan GTR</x-slot:title>
The Nissan GTR makes a return in 2023!
</x-details>
When we called our button component, we simply needed to pass Test and there was a slot that took care of it. With our details component, we need to get creative. Well, not really. Blade provides us with the x-slot syntax. We need to append the name of our new slot variable with the : syntax. Since our slot is titled $title, we simply pass :title to our x-slot. <x-slot:title>2023 Nissan GTR</x-slot:title> will now pass 2023 Nissan GTR to our $title slot. The text below that, The Nissan GTR makes a return in 2023! will be pushed to the $slot variable.
Visiting our route: localhost/blade-slots produces the following result:
When we click on our summary, we can see the full text.
Pretty simple and useful feature in Blade.
Laravel Series
Continue your Laravel Learning.
Plug content into components with ease
Laravel – P69: Blade Slots
Part 69 of our Laravel fundamentals series introduces Blade slots—the elegant way to pass named fragments into reusable components. Learn default slots, named slots, and best practices for composing flexible, DRY layouts.
Compose complex layouts with multiple slots
Laravel – P70: Multiple Blade Slots
Part 70 of our Laravel fundamentals series dives deeper into Blade components, showing how to combine multiple named slots, default slots, and slot attributes to craft complex, reusable layouts. Master advanced composition without cluttering your templates.