Dropdown menu to be on left side

Report · Nov 29, 2022

Hi there,

I am using drop down where the li elements are on the right side. I want the last menu's li elements to be on the left so that it doesn't get hidden. Kindly help. Screenshot attached.

Report · Nov 30, 2022

Copy and paste the following code into a new document

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="nav w-100 justify-content-between">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown1">
                            <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>
                    </div>
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown2">
                            <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

As a side note: I did not write this code, this was written automatically using Wappler.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Nov 30, 2022

Sweet. 🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2022

Sweet. 🙂

By @Nancy OShea

I'd read the OPs post more carefully if I were you as that example does nothing to help except place a drop down to the extreme left and extreme right of the window, not what is required by the OP.

Let me explain. The OP has a second tier menu which opens to the right of the first level dropdown and of course that will disappear off the extreme right edge of the browser window which is why they want it to open to the left so it stays within the bounds of the window, whilst I assume they require the other second tier menus to open to the right of the first level dropdowns as they have space to do so.

Either do it with javascript by detecting when the last menu is offscreen and then placing it to the left or probably simpler to do it with css. This kind of menu is troublesome and should really be avoided and replaced by something simpler.

Report · Nov 30, 2022

Ben's solution works for me. Second dropdown is justified-right and moves according to how much/little content it contains. See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2022

@osgood_

To your point about complex menus, I agree 100%. Less is more. The less complicated navigation menus are, the better.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Nov 30, 2022

Ben's solution works for me. Second dropdown is justified-right and moves according to how much/little content it contains. See screenshot.

By @Nancy OShea

Thats only the first tier drop down, the OP has a second tier drop down which ideally they would like to spring out to the left of 'Action'.

So you would need to limited the length of the first tier drop-down to allow space for a side navigation to the left of it.

Im not sure why the OP cant just have the second menu appear below the first rather than to the left or right side of it, makes it much simpler, especially on mobile devices.

Report · Dec 01, 2022

Are there any other ways availabe to do this? Please help.

Report · Dec 02, 2022

I assume that you want @osgood_ to reply, in which case I will exit this discussion.

In any case, you could act on what @osgood_ has suggested and post a URL to the page in question.

Edit: Wow! Looks like Adobe disagrees with my mug shot and replaced it with another avatar.

Report · Dec 03, 2022

@Ben273953540j91 are you parent with "Le concombre masqué" ?

Report · Dec 03, 2022

Are there any other ways availabe to do this? Please help.

By @Roopavathy

You could use off canvas navigation. Click on an option listed in the first level drop down to slide in an off canvas navigation containing the links associated with the selected option in the first level drop down. This would be a much more solid and robust solution across devices and you won't run into the problem of positioning the second level navigation options.

Report · Nov 30, 2022

What menu system are you using, a custom coded one or an off the shelf one, such as Bootstrap? Might be better to post a url to the page in question so someone can determine the best approach taking into account what code you currently are deploying.