3

I'm using Bootstrap 4 and have a menu item with a dropdown link. I'd like to make the text of the menu item a clickable link in addition to having the dropdown toggle available to select something else. Is there a good solution for this?

example:

    <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle data-toggle="dropdown" href="/link-i-want-clickable" role="button" aria-haspopup="true" aria-expanded="false" title="List tickets filtered by custom filter preset">Link I Want Clickable </a>
          <div class="dropdown-menu dropdown-menu-wide">
            <div class="row">

                        <div class="col-md-9 text-truncate">
                            <a href="/url1" id="customFilterPreset1" class="dropdown-item" title="title1">Link 1</a>
                        </div>

                        <div class="col-md-9 text-truncate">
                            <a href="/url2" id="customFilterPreset2" class="dropdown-item" title="title2">Link 2</a>
                        </div>

            </div>
        </div>
    </li>
Geoff Maddock
  • 1,700
  • 3
  • 26
  • 47

2 Answers2

13

use the data-hover tag instead of data-toggle

<li class="dropdown" data-dropdown="dropdown">
    <a href="URL" class="dropdown-toggle" data-hover="dropdown">Parent</a>
    <ul class="sub-menu dropdown-menu">
        <li class="nav-item"><a class="nav-link" href="#">Child 1</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Child 3</a></li>
    </ul>
</li>
Cris
  • 2,824
  • 24
  • 23
  • The best short answer did the trick, thank you. It must be accepted. valid for bootstrap 5. – Harsha Sep 13 '22 at 01:36
0

Do the dropdown toggling on hover, instead of click... you would need few lines of JavaScript for this.

Code snippet below:

$(document).ready(function() {

  $('.myLinkedDropdown').mouseenter(function() {
    $(this).addClass('show')
    $(this).children('.dropdown-menu-wide').addClass('show');
  });

  $('.myLinkedDropdown').mouseleave(function() {
    $(this).removeClass('show');
    $(this).children('.dropdown-menu-wide').removeClass('show');
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>



    <li class="nav-item dropdown myLinkedDropdown">
      <a class="nav-link" href="/link-i-want-clickable" title="List tickets filtered by custom filter preset">Link I Want Clickable </a>
      <div class="dropdown-menu dropdown-menu-wide">
        <div class="row">

          <div class="col-md-9 text-truncate">
            <a href="/url1" id="customFilterPreset1" class="dropdown-item" title="title1">Link 1</a>
          </div>

          <div class="col-md-9 text-truncate">
            <a href="/url2" id="customFilterPreset2" class="dropdown-item" title="title2">Link 2</a>
          </div>

        </div>
      </div>
    </li>


  </ul>
</nav>
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70