How to align dropdown menu to left like Bootstrap's "dropdown-menu-right"?

[sptutusukanta]

I needed to align the dropdown menu to the right, by default it is on the left. As with bootstrap, we use .dropdown-menu-right class along with .dropdown-menu to align dropdown menu.

I tried to use it in menu class in admin panel, as expected it is populating in the parent <li> tag. Is there any other way to put this class from admin panel?

Here is the expected output as per Bootstrap's documentation:

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Here is what I got add the class to menu from admin:

<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-49" class="dropdown-menu-right menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-49 nav-item">
    <a title="About" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-49">About</a>
    <ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-49" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55 nav-item"><a title="About us" href="http://localhost:9090/about-us/" class="dropdown-item">About us</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54 nav-item"><a title="Privacy Policy" href="http://localhost:9090/about-us/privacy-policy/" class="dropdown-item">Privacy Policy</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53 nav-item"><a title="Return Policy" href="http://localhost:9090/about-us/return-policy/" class="dropdown-item">Return Policy</a></li>
    </ul>
</li>

This is clear here, the class .dropdown-menu-right is placed to the parent <li> tag, not with the <ul> dropdown.

[LouisMilotte]

navigation alignment happens in the UL element, where are your classes for that element?

[sptutusukanta]

Yes, I know it is required to put the alignment class in the <ul> element. But, how can I put that? I placed it in the class field of menu in WP's menu editor. But, it renders inside parent <li>.

My expection is to get something like this:

<li ... class=" ... dropdown ... ">
    <ul class="dropdown-menu dropdown-menu-right" ... >
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</li>

But I'm geting it like this:

<li ... class="dropdown-menu-right ... dropdown ... ">
    <ul class="dropdown-menu" ... >
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</li>

You may check my previous post to see the full output. Here I've just pointed the main elements.

How can I achieve this from WP's menu editor? Is it supported? Or any workaround is strongly appreciated.

[LouisMilotte]

I just double checked your menu HTML, to clarify are you using Bootstrap 3? That looks like a Bootstrap 3 as bootstrap 4 containers are now div's with a list of the anchors.

https://getbootstrap.com/docs/4.0/components/navs/#using-dropdowns

The current walker is BS4, which may be why you're having a problem.

There's a BSWalker v3 branch in the branch drop-down, see if that fixes your problem.

[earvinpiamonte]

@sptutusukanta My solution is by using Sass or CSS. On my case, I'm extending the class .dropdown-menu-right whenever I have a .navbar-nav.ml-auto.

.navbar-nav.ml-auto{
    .dropdown-menu{
        @extend .dropdown-menu-right;
    }
}

[zethzeth]

I had the same problem. Would be awesome if there was a way to tell the navwalker, if a dropdown-menu-right or dropdown-menu-left is wanted. But I must admit that I can't see where that would be declared.

I tried @earvinpiamonte 's suggestion, but couldn't get it to work. I solved it by doing this (in my SASS/CSS):

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

[pattonwebz]

I will be looking at enabling this with an easier method in the upcoming version of the walker (I hope to be working on it over the next 3 or 4 weeks).

EDIT: $classes is passed as an array of values, not as a string like I originally posted. I have updated the code below.

For the moment one way to go about doing this would be to use the nav_menu_submenu_css_class, which will receive a string array of classes in it's first parameter. You can use that filter to add the class for the sidedness of choice.

function filter_add_dropdown_side_right( $classes ) {
    $classes[] = 'dropdown-menu-right';
}
add_filter( 'nav_menu_submenu_css_class', 'filter_add_dropdown_side_right' );