Zenn
🙌

Laravelでアクティブなページを視覚的に強調する方法

2023/09/09に公開
PHP
Laravel 9
tech

はじめに

Laravelの学習する時にナビゲーションバーでアクティブなページを強調するためにはどうするのがいいか調べて実際に試してみたのでその記録を残そうと思います。今回はプロジェクトの作成から説明します。

手順

  1. プロジェクトの作成
    以下のコマンドを入力します。今回はLaravel９系で試しています。
composer create-project laravel/laravel project-name "9.*"
  1. プロジェクトディレクトリに移動
cd project-name
  1. ルーティングの設定
web.php
Route::get('/', function () {
	return view('welcome');
})->name('home');

Route::get('/dashboard', function () {
	return view('dashboard');
})->name('dashboard');

Route::get('/settings', function() {
	return view('settings');
})->name('settings');
  1. ビューの作成
    resources/viewsにlayoutsディレクトリを作成し、その中にapp.blade.phpを作成します。そして、以下の内容を追加します。
app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="{{ asset('styles.css') }}">
  <title>Laravel Menu Highlight</title>
</head>
<body>
  <nav>
    <ul>
      <li class="{{ request()->routeIs('home') ? 'active' : ''}}"><a href="{{ route('home') }}">Home</a></li>
      <li class="{{ request()->routeIs('dashboard') ? 'active' : ''}}"><a href="{{ route('dashboard') }}">Dashboard</a></li>
      <li class="{{ request()->routeIs('settings') ? 'active' : ''}}"><a href="{{ route('settings') }}">Settings</a></li>
    </ul>
  </nav>
  <div>
    @yield('content')
  </div>
  
</body>
</html>

request()->routeIs（）でリクエストの中に該当するものがあるか確認して、あった場合にclass名にactiveをつけて視覚的に強調されるようにしています。

welcome.blade.php
@extends('layouts.app')

@section('content')
    <h1>Home Page</h1>
@endsection
dashboard.blade.php
@extends('layouts.app')

@section('content')
    <h1>Dashboard Page</h1>
@endsection
settings.blade.php
@extends('layouts.app')

@section('content')
    <h1>settings Page</h1>
@endsection
  1. CSSファイルの作成
    publicフォルダ内にstyles.cssを作成します。そして以下の内容を追加します。
styles.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  background-color: #333;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

nav li {
  margin: 0 10px;
}

nav a {
  text-decoration: none;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #555;
}

.active a {
  background-color: #f0f0f0;
  color: #333;
}
  1. ブラウザで確認する
    ターミナルで以下のコマンド入力します。
php artisan serve

ブラウザを開きhttp://localhost:8000にアクセスすると以下のようにページが表示されます。

現在のページがアクティブになっていますね。

おわりに

簡単にでしたが、アクティブなページを視覚的に強調する方法について書きました。同じような実装をしたい方の参考になれば幸いです。

参考文献

Laravel: Active Menu Item - By Route Name or URL

Discussion