dropdown-menu-right works only inside navbars

[EdnaldoNeimeg]

dropdown-menu-right doesn't work with pure CSS if you put it outside navbars.

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin or CodePen and report back with your link, Bootstrap version, and specific browser and OS details.

[EdnaldoNeimeg]

I used this CDNs:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css

Here is the live example: https://codepen.io/Neimeg/pen/XaZVyd

[jipexu]

hummm ...the dropdown-menu-right class seems not exist alone in the css ..?

so if you add this
.dropdown-menu-right {
right: 0;
left: auto;
}

in the code pen css it works ...

[Johann-S]

Dropdown now depends on Popper.js so the positioning is done by Popper.js that's why you didn't find the CSS.
Your CodePen don't include jQuery and Popper.js

[jipexu]

it doesnt work with too ...

[jipexu]

Dropdown now depends on Popper.js so the positioning is done by Popper.js that's why you didn't find the CSS

so why we have those all classes (for each grid step)
.navbar-expand-sm .navbar-nav .dropdown-menu-right with

are they still usefull ??

[Johann-S]

https://codepen.io/Johann-S/pen/NvyyVr

[Johann-S]

We made the choice to disable Popper.js for Dropdown in navbar because currently we don't have the need to use Popper.js

[jipexu]

cool
so @EdnaldoNeimeg

dropdown-menu-right doesn't work with pure CSS if you put it outside navbars.

is true

[Johann-S]

Yep that's true I'll reopen to let @mdo answer if we should re introduce this CSS class in this particular use case

[wojtask9]

Just my thoughts.

Currently dropdown in BS i a little bit chaotic. There is data-placement attribute, .dropdown-menu-right class and another case for .navbar.

With current 'default' BS navbar implementation people can't use popper.js to position dropdown but there are cases when it is very helpful to use popper.js (kebab like menus, notification tips, etc)

I think the best solution is to add other placement from popper.js (top-left, bottom-left, top-right, bottom-right) and introduce placement static.
static turns off popper.js and everything relies on BS classes .dropup, .dropdown, .dropdown-margin-right.

Currently .navbar have a lot styles for dropdown so why not move this .dropdown-* classes to dropdown.scss? There is also PR that adds another dropdown class to .navbar #23520
So moving all dropdown-* classes to dropdown will make BS more flexible.

Of course docs should mention that in navbar dropdown should use 'static' placement.

[forrest-akin]

Bumping this as the bootstrap docs don't indicate that .dropdown-menu-right only works as a descendant to .navbar-nav. Had to dig around in the source to figure it out.

[Johann-S]

It's written here: https://getbootstrap.com/docs/4.1/components/navbar/#supported-content

BTW there is no decision made here, so Dropdowns depend on Popper.js so if you want align your dropdown to the right, include Popper.js 👍