Bootstrap 4 display dropdown submenu on the right side

Bootstrap 4 display dropdown submenu on the right side

To display Bootstrap 4 dropdown submenu on the right side, you can use the .dropdown-menu-right class. This class will align the submenu to the right side of the parent dropdown menu. Here's an example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <title>Bootstrap 4 Dropdown Submenu</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>

In this example:

  • The dropdown-menu-right class is applied to the submenu's container (<div class="dropdown-menu dropdown-menu-right">) to make it align to the right side.

  • The structure includes a basic Bootstrap 4 navbar with a dropdown and a nested dropdown submenu.

You can customize the menu items and styling according to your requirements.

Examples

  1. "Bootstrap 4 dropdown submenu right alignment"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right alignment --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Utilizes Bootstrap 4 dropdown and dropdown-submenu classes to create a dropdown with a submenu. The submenu is aligned to the right by default.

  2. "Bootstrap 4 dropdown right-aligned submenu CSS"

    • Code:
      /* Bootstrap 4 dropdown right-aligned submenu CSS */ /* Custom CSS */ .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { left: 100%; margin-top: 0; }
    • Description: Provides custom CSS to ensure that the dropdown submenu is right-aligned. The .dropdown-submenu class is used to position the submenu relative to its parent.

  3. "Bootstrap 4 navbar dropdown right-aligned submenu"

    • Code:
      <!-- Bootstrap 4 navbar dropdown right-aligned submenu --> <!-- HTML Structure --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#">Submenu</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </li> </ul> </div> </nav>
    • Description: Integrates a Bootstrap 4 navbar with a dropdown and a right-aligned submenu. The dropdown is part of the navbar, and the submenu is nested within the dropdown.

  4. "Bootstrap 4 dropdown right-aligned submenu on hover"

    • Code:
      <!-- Bootstrap 4 dropdown right-aligned submenu on hover --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Achieves a right-aligned submenu that appears on hover by using the data-toggle="dropdown" attribute on the submenu trigger and setting the appropriate Bootstrap classes.

  5. "Bootstrap 4 dropdown submenu right-aligned arrow icon"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right-aligned arrow icon --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" id="submenuDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu" aria-labelledby="submenuDropdown"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Enhances the submenu with a right-aligned arrow icon by using a separate dropdown trigger element (#submenuDropdown) and associated attributes.

  6. "Bootstrap 4 nested dropdown right-aligned submenu"

    • Code:
      <!-- Bootstrap 4 nested dropdown right-aligned submenu --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" id="nestedSubmenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu" aria-labelledby="nestedSubmenu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" id="nestedSubmenu2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Nested Submenu </a> <div class="dropdown-menu" aria-labelledby="nestedSubmenu2"> <a class="dropdown-item" href="#">Nested Submenu Item 1</a> <a class="dropdown-item" href="#">Nested Submenu Item 2</a> </div> </div> </div> </div> </div> </div>
    • Description: Demonstrates nesting a dropdown submenu within another submenu, creating a hierarchy of dropdowns with right-aligned positioning.

  7. "Bootstrap 4 dropdown submenu right-aligned with Popper.js"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right-aligned with Popper.js --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu" data-popper-placement="right-start"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Incorporates Popper.js by using the data-popper-placement attribute to explicitly set the right-aligned position of the dropdown submenu.

  8. "Bootstrap 4 dropdown submenu right-aligned on specific breakpoint"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right-aligned on specific breakpoint --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu dropdown-menu-lg-right" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Utilizes the dropdown-menu-lg-right class to make the dropdown submenu right-aligned, specifically on larger breakpoints.

  9. "Bootstrap 4 dropdown submenu right-aligned with custom styling"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right-aligned with custom styling --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu"> <a class="dropdown-item dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu custom-submenu"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Adds custom styling to the dropdown and submenu by using the custom-dropdown-menu and custom-submenu classes, respectively, to achieve a right-aligned appearance.

  10. "Bootstrap 4 dropdown submenu right-aligned with Flexbox"

    • Code:
      <!-- Bootstrap 4 dropdown submenu right-aligned with Flexbox --> <!-- HTML Structure --> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu custom-dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-submenu d-flex"> <a class="dropdown-item dropdown-toggle flex-grow-1" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Submenu </a> <div class="dropdown-menu flex-grow-1"> <a class="dropdown-item" href="#">Submenu Item 1</a> <a class="dropdown-item" href="#">Submenu Item 2</a> </div> </div> </div> </div>
    • Description: Utilizes Flexbox layout by adding the d-flex class to the dropdown submenu, allowing for a right-aligned appearance with the help of flex-grow-1.

More Tags

pow autoresize flops in-app-purchase tintcolor maskedinput phonegap-build rvm ormlite ngxs

More Programming Questions

More Tax and Salary Calculators

More Retirement Calculators

More Fitness Calculators

More Biochemistry Calculators