
➜ Menú de Navegación
Cómo Crear un Menú de Navegación y Footer Dinámico en Laravel | Aprende a desarrollar un menú de navegación profesional y un pie de página dinámico en Laravel. Esta guía te enseña a integrar datos del modelo Profile
🎯 Objetivo
Aprenderás a:
- Implementar un menú de navegación profesional y optimizado en Laravel.
- Mostrar el logo de la empresa utilizando el modelo
Profile
. - Listar dinámicamente categorías y servicios mediante una relación uno a muchos entre los modelos
Category
yService
. - Integrar datos globales utilizando View Composer.
- Diseñar un pie de página con información del perfil de la empresa.
- Aplicar un diseño responsivo y atractivo con Bootstrap 5.
🛠️ Paso 1: Configurar Rutas y Controlador
Definir la Ruta Principal
En el archivo routes/web.php
, define la ruta para la página principal:
use App\Http\Controllers\PublicController;
Route::get('/', [PublicController::class, 'index'])->name('inicio');
Route::get('/empresa', [PublicController::class, 'empresa'])->name('empresa');
Crear el Controlador PublicController
En app/Http/Controllers/PublicController.php
, crea el controlador que pasará los datos del perfil a la vista:
namespace App\Http\Controllers;
class PublicController extends Controller
{
public function index()
{
return view('welcome');
}
}
🛠️ Paso 3: Implementar View Composer para Categorías y Servicios
Utiliza un View Composer para cargar dinámicamente las categorías y sus servicios en todas las vistas necesarias.
Crear el Service Provider
En app/Providers/ViewComposerServiceProvider.php
:
namespace App\Providers;
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use App\Models\Category;
use App\Models\Profile;
class ViewComposerServiceProvider extends ServiceProvider
{
public function boot()
{
//categorias
$_categories = Category::orderBy('name')->get(['slug','name']);
//profile
$_profile = Profile::first();
View::composer(
['layouts.partials.navbar','layouts.partials.footer'],
function($view) use ($_categories,$_profile){
$view->with([
'_categories' => $_categories,
'_profile' => $_profile,
]);
}
);
}
}
Registrar el Service Provider
En bootstrap/providers.php
, agrega el nuevo proveedor de servicios:
return [
App\Providers\AppServiceProvider::class,
App\Providers\ViewComposerServiceProvider::class,
];
🎨 Paso 4: Diseñar el Menú de Navegación con Bootstrap
Crea una vista parcial para el menú de navegación utilizando Bootstrap 5.
Crear la Vista Parcial
En resources/views/layouts/partials/navbar.blade.php
:
<div style="background: #00042a">
<img src="{{ asset('storage/' . $_profile->logo) }}" alt="{{ $_profile->name }}" width="300" class="img-fluid mx-auto d-block">
</div>
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('empresa') }}">Empresa</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Servicios
</a>
<ul class="dropdown-menu">
@foreach ($_categories as $_c)
<li><a class="dropdown-item" href="{{$_c->slug}}">{{$_c->name}}</a></li>
@endforeach
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('inicio') }}">Contacto</a></li>
</ul>
</div>
</div>
</nav>
🛠️ Paso 5: Crear la Vista Parcial para el Footer
Crea una vista parcial que contendrá la estructura HTML del pie de página.
Crear la Vista Parcial
En resources/views/layouts/partials/footer.blade.php
:
<footer class="bg-dark text-white pt-4">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>{{$_profile->name}}</h2>
</div>
<div class="col-sm-4">
<h5>Contacto</h5>
<ul class="list-unstyled">
<li><strong>Teléfono:</strong> {{ $_profile->phone }}</li>
<li><strong>Email:</strong> <a href="mailto:{{ $_profile->email }}" class="text-decoration-none text-white">{{ $_profile->email }}</a></li>
<li><strong>Dirección:</strong> {{ $_profile->address }}</li>
</ul>
</div>
<div class="col-sm-4">
<h5>Socialmedia</h5>
<ul class="list-unstyled">
@if ($_profile->facebook!=null)
<li><a href="{{ $_profile->facebook }}" target="_blank" class="text-white">Facebook</a></li>
@endif
<li><a href="{{ $_profile->twitter }}" target="_blank" class="text-white">Twitter</a></li>
<li><a href="{{ $_profile->instagram }}" target="_blank" class="text-white">Instagram</a></li>
</ul>
</div>
</div>
</div>
<div class="pt-2 pb-1 text-center" style="background: black">
<p class="text-secondary small">© LaraTech Tecnology | 2025 | Powered By Codea App</p>
</div>
</footer>
🛠️ Paso 6: Integrar el Footer en el Layout Principal
Incluye la vista parcial del pie de página en tu layout principal para que se muestre en todas las páginas.
Modificar la Vista Principal
En resources/views/layouts/apps.blade.php
:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
@include('layouts.partials.navbar')
<main>
@yield('content')
</main>
@include('layouts.partials.footer')
</body>
</html>
Vista Final
✅ Beneficios de esta Implementación
- Optimización SEO: Estructura clara con enlaces internos bien definidos.
- Carga Dinámica: Actualización automática de categorías y datos del perfil desde la base de datos.
- Reutilización de Componentes: Uso de vistas parciales para mantener el código limpio y modular.
- Diseño Responsivo: Menú y pie de página adaptados a dispositivos móviles y de escritorio con Bootstrap 5.
2056 visitas
Capítulo 20 – Portada FrontEnd »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar