Bootstrap Navbar Element Select Active in Laravel - html

Question

So I have a problem and as per usual given I am trying to learn frontend stuff i am out of my depth. I am currently writing a website that has a forum, live chat, profile, and a few other things. These I would call "Menu items" with sections of those i.e. unread messages being placed on a dropdown menu item for messages. As per blade fashion I am using a menu blade which is part of the layout blade and finally the page incorporates whichever layout it wants.
The last solution I tried after seeing a post was to add {{ Request::segment(1) === 'messages' ? 'active' : '' }} or {{ Request::segment(1) === 'messages' ? 'active' : 'null' }} into the class section of the corresponding li for the menu item, this successfully updated some of the menu items styles but also broke the dropdown functionality.
Below is my code which still has my last solution contained within it:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand {{ Request::segment(1) === '/' ? 'active' : '' }}" data-toggle="tab" href="/">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li role="presentation" class="dropdown {{ Request::segment(1) === 'forum' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="/forum" role="button" aria-haspopup="true" aria-expanded="false">Forum<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Newest Posts</li>
<li>Trending</li>
<li>Something</li>
<li role="separator" class="divider"></li>
<li>Create New Post <span class="glyphicon glyphicon-edit"></span></li>
<li>Your Posts</li>
</ul>
</li>
<li class="{{ Request::segment(1) === 'chat' ? 'active' : null }}">Chat</li>
<li role="presentation" class="dropdown {{ Request::segment(1) === 'messages' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab" href="#" role="button" aria-haspopup="true" aria-expanded="false">Messages<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Unread</li>
<li>Read</li>
<li>Sent</li>
<li role="separator" class="divider"></li>
<li>All</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default"></nav>
I appreciate I am new and that most solutions require something like js or jquery, if this is the case you will need to be explicit in how and where I put it as I have never even thought of using it yet!
Thanks!

Answer 1

I did have this problem recently, I found two useful packages in packagist.org
watson/active: This package is very simple and useful you can add active or any other classes to your menu base on their route, this could be route, action or url activation.
lavary/laravel-menu: I personally found this package most useful than the previous one, you can create hierarchical menus, activate a menu base on route, action or url, or even you can activate your menu base on any other url (this is useful for parent menus, e.g. when you are in a child link related to a parent link in your menu, both child link and parent link will be activated.). This package is most complicated than the other one, but I think the documentation written very clear and if you read it carefully you can do anything you want with your menus.

Answer 2

Here is my solution
<a class="#if(Request::is('home')) active #endif" href="{{ route('home') }}">Home</a>

Answer 3

I've been doing this many times and I've come up with 2 solutions depending on the type of navigations.
The easiest, works fine when you have simple entities (like Post, Category, Tag) and 1 menu entry for each.
Posts
This will match all classic endpoints such as /posts, /posts/new, /posts/{post}, ...
I've been using this for my latest projects because it's simple and allows much more customisation. It's pretty useful if you have something like nested navigation items.
Posts
All Posts
New Post
Posts Settings
Categories
All Categories
New Category
I'm just passing a variable to my layout like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="{{ $activeMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
// ...
You can also play with nested active states like this.
// views/posts/index.blade.php
#extends('layouts.app', ['activeMenu' => 'posts' 'activeSubMenu' => 'posts.index'])
#section('content')
// Your content
#stop
// views/layouts/app.blade.php
<html>
//...
<li class="dropdown {{ $activeMenu == 'posts' ? 'active' : '' }}">
<a class="dropdown-toggle" data-toggle="dropdown tab">Posts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="{{ $activeSubMenu == 'posts.index' ? 'active' : '' }}">All Posts</li>
<li class="{{ $activeSubMenu == 'posts.create' ? 'active' : '' }}">New Post</li>
</ul>
// ...
Otherwise I suggest you take a look at spatie/laravel-menu