CODEWITHSUNDEEP
bootstrap-4drop-down-menubootstrap-5
eylay
eylay

Reputation: 2168

Bootstrap Navbar Dropdown Menu Items Right

As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?

enter image description here

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      ...
    </div>
  </div>
</nav>

Upvotes: 29

Views: 53966

Answers (7)

Carol Skelly
Carol Skelly

Reputation: 362700

Bootstrap 5 (update 2021)

Use the dropdown-menu-end class on the dropdown-menu to align the items inside the menu right..

<div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

https://codeply.com/p/kWLLKdjdpC

Bootstrap 4 (original answer)

Use the dropdown-menu-right class to align the items inside the menu right..

<div class="dropdown-menu dropdown-menu-right text-right">
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
    <a class="dropdown-item" href="#">Link</a>
</div>

http://codeply.com/go/6Mf9aK0P8G

Upvotes: 71

Luis Antonio Canettoli Ordo&#241;ez
Luis Antonio Canettoli Ordo&#241;ez

Reputation: 1105

Bootstrap 5

@Zim 's answer is likely the most correct as suggested in the docs.

Despite that, the only way I managed to make it work was using the end-0 class instead.

<ul class="dropdown-menu end-0">
  <li><a class="dropdown-item" href="#">Save</a></li>
  <li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>

Upvotes: 6

mohammad kasiri
mohammad kasiri

Reputation: 159

I Chaned it by add dir="rtl" 

<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item " href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
</div>

Upvotes: 1

Anand Raja
Anand Raja

Reputation: 3106

It's little change in boostrap 4. To align navbar to right side, you've to make only two changes. they are:

  1. in navbar-nav class add w-100 as navbar-nav w-100 to make width as 100
  2. in nav-item dropdown class add ml-auto as nav-item dropdown ml-auto to make margin left as auto.

If you didn't understand, please refer this

https://stackoverflow.com/a/58474527/10907720

Upvotes: 1

migli
migli

Reputation: 3250

I encountered the same problem with an additional difficulty because my menu is created in PHP - the number of elements and dropdown content is not fixed.

Here is a solution that centers dropdowns when possible, otherwise align them on the left or right to prevent them from exceeding the viewport:

var $maxWidthElement = $('.navbar'),
    maxWidth = $maxWidthElement.width();

var positionDropdowns = function() {
    $('.dropdown-menu').each(function() {
        var $navItem = $(this).closest('.dropdown'),
            dropdownWidth = $(this).outerWidth(),
            dropdownOffsetLeft = $navItem.offset().left,
            dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
            linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;

        if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
            // center the dropdown menu if possible
            $(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
        } else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
            // set the dropdown menu to left if it exceeds the viewport on the right
            $(this).addClass('dropdown-menu-right');
        } else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
            // full width if the dropdown is too large to fit on the right
            $(this).css({
                left: 0,
                right: 0,
                width:
                    $(this)
                        .closest('.container')
                        .width() + 'px'
            });
        }
    });
};

var resizeTimer;

$(window).on('resize', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        maxWidth = $maxWidthElement.width();
        positionDropdowns();
    }, 250);
});

positionDropdowns();
window.onresize = positionDropdowns;

https://codepen.io/migli/pen/RELPPj

Upvotes: 0

Fred K
Fred K

Reputation: 13910

.dropdown-menu-right class has a different behaviour if it's inside a .navbar. You can read the "Heads up" in the docs here:

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

Actually to solve I use this class:

.navbar .dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

Upvotes: 9

Javan R.
Javan R.

Reputation: 2141

Update for Bootstrap4-Beta:

Because there is a bug in bootstrap4 beta i had to add

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

to make it work.

Upvotes: 19

Related Questions