Get Started Free

How to Create Layouts in Laravel 10

Home
Blog
How to Create Layouts in Laravel 10

Views: 2.1K
Category: Laravel

Published at: 01 Sep, 2023
Updated at: 02 Sep, 2023

How to Create Layouts in Laravel 10

Laravel has become the go-to PHP framework for many developers, providing a structured and feature-rich environment for backend development. Among its myriad features, Laravel's Blade templating engine allows developers to break down their applications into easily manageable and reusable components. In this guide, we'll explore how to create dynamic layouts in Laravel 10, specifically focusing on how to structure headers, navigation bars, footers, and main content areas.

Whether you're building a small project or an enterprise-level application, maintaining a consistent layout is crucial for an excellent user experience. In this tutorial, we'll walk through the steps to construct your layout files, providing you with sample code for each section.

Create Main Layout File (layouts.theme.main)

Step 1: Directory Structure

First things first, set up your directory structure in the resources/views/layouts folder. Create a directory with the name theme to keep all theme-related layout files.

Step 2: Main Layout File

Inside the theme directory, Create a file with the name named main.blade.php. This file serves as the layout skeleton for your web application.

<!-- resources/views/layouts/theme/main.blade.php -->
@include('layouts.theme.header')
@include('layouts.theme.navbar')
    @yield('homeSlider')
    @yield('mainContent')
@include('layouts.theme.footer')

Create Header (layouts.theme.header)

Header File

For your header section, create a new Blade file called header.blade.php in the layouts/theme directory. Here's the sample code for your header:

<!-- resources/views/layouts/theme/header.blade.php -->
<!doctype html>
<html class="no-js" lang="en">
<head>
    <!-- Meta tags, SEO, CSS links, and other head content here -->
    <!-- ... -->
</head>

This header file includes everything you might want in the HTML head section: meta tags, SEO information, and stylesheet links.

Create Navbar (layouts.theme.navbar)

Navbar File

Create a navbar.blade.php file inside the layouts/theme directory for the navigation bar. Your code could look something like this:

<!-- resources/views/layouts/theme/navbar.blade.php -->
<body class="body__wrapper" id="original-content">
    <!-- Your navbar HTML goes here -->

This code should contain all your navigation elements, such as menu items, search bars, and more.

Create Footer (layouts.theme.footer)

Footer File

Similarly, create a footer.blade.php file in the layouts/theme directory for the footer section. Here's an example:

<!-- resources/views/layouts/theme/footer.blade.php -->
</body>
</html>

In the footer, you might add copyright information, social media links, or any other elements that appear at the bottom of every page.

Using Layouts in Views

Once you've defined your main layout and its components, using them in your views is straightforward. Here's a sample view that extends the main layout and populates the mainContent section:

<!-- Example view file -->
@extends('layouts.theme.main')

@section('mainContent')
    <p>This is the main content.</p>
@endsection

Conclusion

Creating reusable layouts is a key aspect of efficient web development, and Laravel 10's Blade templating engine makes this task easier than ever. This manual has demonstrated how to construct an adaptable layout system, including headers, navigation bars, and footers, making your Laravel project more maintainable and scalable. With this approach, you can streamline your workflow and focus on implementing unique features for your application.

Shehzad Ahmed Arain

Shehzad Ahmed is a highly qualified expert with a Master of Philosophy in Computer Science and a decade of extensive industry experience. With his impressive track record in web development and computer science, he has not only left an indelible mark on the industry but also made substantial contributions to education. Since , he has created more than eighty exhaustive courses, paving the way for innumerable individuals interested in learning and development. His unparalleled knowledge and innate ability to elucidate complex ideas make him a highly sought-after educator and consultant. Choose Shehzad and take advantage of his exceptional balance of technical expertise and teaching prowess to propel your learning journey or project to new heights.

0 Comment(s)