CODEWITHSUNDEEP
htmltwitter-bootstrapbuttondrop-down-menuasp.net-mvc-5
IamRuku
IamRuku

Reputation: 158

Bootstrap dropdown toggle with button group does not work in nav-bar

I am working on MVC 5 and using Bootstrap for my front end design. I have CSHTML layout pages in my shared folder. All the layouts contain a nav-bar that has several options in it. However, the btn-group within the <form class="navbar-form navbar-right"></form> does not show the dropdown menu. Here is the code snippet:

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>

                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

What is that I am missing out? Any help will be appreciated. Thanks in advance.

Upvotes: 4

Views: 4979

Answers (3)

Faisal Ramzan
Faisal Ramzan

Reputation: 169

You can try the below code same as it is, it should work in your case.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>
                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

Upvotes: 2

Shweta
Shweta

Reputation: 1212

You can use <a></a> instead of <button></button>and apply css.

<div class="btn-group dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
       <ul class="dropdown-menu"></ul>
</div>

Hope this will work for you!

Upvotes: 1

user5686312
user5686312

Reputation:

Give dropdown menu an ID and then call it from data-target So, 

<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" data-target="#dropdown">

Then, call it with an ID from 

<ul class="dropdown-menu" role="menu" id="dropdown">

This, looks for an ID on what to toggle (hence, menus to show).

Upvotes: 0

Related Questions