This is an article where the point of specific discussion is about how to add dropdown menu in Laravel Default Dashboard. The one which is being pointed out as Laravel Default Dashboard is the dashboard generated upon adding authentication feature. It can be referred to the article titled ‘How to Create Laravel Project with Authentication’ in this link. The Laravel Default Dashboard is shown in the following image :
After successfully logging in, there is a menu displayed located in the navigation header as shown in the following image :
To be able to add ad dropdown menu in the header part of the Laravel Default Dashboard display which can be assumed as a navigation section, below is the actual step taken to do it :
1. Edit file named ‘app.blade.php’ which is located in the ‘resources/views/layouts’ folder inside the root folder or Laravel web-based application project. Below is the display of the location in the form of tree :
user@hostname:/var/www/html/laravel$ tree resources/views/layouts resources/views/layouts └── app.blade.php 0 directories, 1 file user@hostname:/var/www/html/laravel$
2. Add the following line of code to be able to add a specific dropdown menu on the header of the page which can be considered as part of the navigation bar :
<div class="nav navbar-nav"> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" a href="#">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">List of Service</a></li> <li><a href="#">Create a New Service</a></li> </ul> </li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" a href="#">Ticket <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">My Ticket</a></li> <li><a href="#">Create a New Ticket</a></li> </ul> </li> </div>
The above snippet code is added to the file named ‘app.blade.php’ located in the folder of ‘resources/views/layouts’. To be more specific, it is added in the following part :
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" 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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
=== ADD WHATEVER DROPDOWN MENU LOOKS LIKE INTENDED TO BE ADDED ===
...
In the part of the above snippet code add the dropdown menu of our own design or layout. Below is the actual image of the above snippet code inserted :
Furthermore, below is the actual dropdown menu shown as soon as the menu is being selected :
And the other dropdown menu is shown as follows :
One thought on “How to Add Dropdown Menu in Laravel Defaul Dashboard using Bootstrap”