Adminlte: Bootstrap drop down button inside nav dropdown-menu not working
I want to add a bootstrap dropdown button to each list item in the dropdown messages-menu however when I click on the dropdown button the whole button and dropdown messages-menu disappears instead of giving me the button list options.
Is it possible to add a dropdown button to these nav dropdown-menu items and if so how?
mojohub
All 17 comments
Please provide a example to help you better.
regards REJack
REJack
on 17 Dec 2016
@REJack
With the below code I create an AdminLTE2 dropdown menu which includes a standard bootstrap dropdown button. When clicking on the button instead of being able to select one of the button items the whole dropdown menu disappears so it seems impossible to be able to use a bootstrap dropdown button.
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Title</a>
<ul class="dropdown-menu">
<li class="header">Dropdown Header</li>
<li>
<ul class="menu">
<li>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
@mojohub try this code instead:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
Thanks!
almasaeed2010
on 8 Jan 2017
@almasaeed2010 i have tried your code suggestion as per below but still the same issue. I assume this is because the AdminLTE2 navbar menus use an onclick function to close the menu so other click functions such as a bootstrap dropdown button don't get a chance to show when clicked. Any other suggestions?
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Title</a>
<ul class="dropdown-menu">
<li class="header">Menu Header</li>
<li>
<ul class="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
AdminLTE utilizes Bootstrap dropdown to create its custom menus. The dropdown should work normally as seen bellow:
Make sure you are adding your menu directly under nav navbar-nav. Added within a dropdown like the example you are showing simply wouldn't work. Here is the full code for main-header navbar including a custom dropdown menu:
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>A</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Admin</b>LTE</span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<!-- User Image -->
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<!-- Message title and timestamp -->
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<!-- The message -->
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li><!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account Menu -->
<li class="dropdown user user-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">Followers</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Sales</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">Friends</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
</li>
</ul>
</div>
</nav>
</header>
@almasaeed2010 i am trying to add a button inside the dropdown menu list (ie a button on each row of the dropdown list) as per below image...
mojohub
on 9 Jan 2017
@mojohub this requires extra JS code to get it to work since Bootstrap propagates the click event and closes the dropdown. You need to add an id to your button btn-id and apply this code:
$('#btn-id').click(function(e){
e.stopPropagation()
});
Let me know if that works for you!
almasaeed2010
on 9 Jan 2017
@almasaeed2010 unfortunately this bit of JS code doesn't work. I have used the following code and debugged it to make sure the JS code get's called correctly which it does however the whole nav dropdown menu still closes without showing the button list options. i have also tried the dropdown-menu-button class on different elements to no avail. Do you have any other ideas?
$(document).on('click', '.dropdown-menu-button', function (e) {
e.stopPropagation()
});
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Title</a>
<ul class="dropdown-menu">
<li class="header">Menu Header</li>
<li>
<ul class="menu">
<li>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle dropdown-menu-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
Look at this.
I hope this helps.
REJack
on 11 Jan 2017
@mojohub,
I must have misunderstood your question. The plugin @REJack provided here seems to be the best solution to your problem. Unfortunately, we didn't implement the functionality you are looking for with AdminLTE but it seems to be relatively simple to do so using plugins. I hope this solves your issue.
Thanks!
almasaeed2010
on 17 Jan 2017
Dear Sir @almasaeed2010 and @REJack,
Many many thanks for this. God bless.
herryswastika
on 16 Feb 2018
Hi I am working on the same solution and so far its coming along but I need to make my dropdown headers clickable too. So when I click "Welcome" I need it to link to a page in addition to giving me the dropdown options. As you can see, I have the drop down working so far but I am unable to go to the "Welcome" page
Any suggestions are greatly appreciated!
tonyareznor
on 22 Mar 2018
You need to add this code to your css file:
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
And remove this code from your anchor tag :
class="dropdown-toggle" data-toggle="dropdown"
Mo7amedMamdou7
on 5 Nov 2018
@mojohub try this code instead:
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>Thanks!
Works. Great job!
1BJK903
on 23 May 2019
Try the following on bootstrap 4.
<li role="separator" class="nav-item dropdown-divider"></li>
LesterReddy
on 11 Aug 2019
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li>
Should i need to import bootstrap separately or it is already included in admin-lte/build/js/AdminLTE.js
ahmedali5530
on 5 Mar 2020
Mine is also being blocked at present I am rendering it from a shared layout file in asp.net
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!-- SEARCH FORM -->
<form asp-action="Search" asp-controller="MISObjects" method="post">
<div class="input-group input-group-lg">
<select id="searchType">
<option value="1">All Cases</option>
<option value="2">My Cases</option>
</select>
<input class="form-control form-control-navbar" type="search" id="search" name="search" placeholder="Case Number" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
</ul>
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a>
<div class="collapse navbar-collapse" id="navbar-list-4">
<ul class="navbar-nav">
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown">
<i class="fa fa-user-cog" style="font-size:24px;"></i>
</a>
<div class="dropdown-menu dropdown-menu">
<a asp-action="Setup" asp-controller="Admin" asp-route-id="1" class="dropdown-item">
<i class="fa fa-users-cog mr-2"></i> Settings
</a>
<div class="dropdown-divider"></div>
@if (User.Identity.IsAuthenticated) {
<form asp-controller="Account" asp-action="Logout" method="post" id="logoutForm">
<button type="submit" class="btn btn-default btn-flat">Sign out</button>
</form>
} else {
<a asp-area="Identity" asp-page="/Account/Login" class="dropdown-item dropdown-footer fa fa-sign-in-alt">Login</a>
<a asp-area="Identity" asp-page="/Account/Register" class="dropdown-item dropdown-footer">Register</a>
}
</div>
</li>
</ul>
</div>
</nav>
davidbuckleyni
on 9 Aug 2020
Related issues
jrlooney
路
3Comments
kgoedert
路
4Comments
jrandhawa09
路
3Comments
riklaunim
路
3Comments
noblemfd
路
3Comments
Most helpful comment
@mojohub try this code instead:
Thanks!