Unlocking Enhanced Navigation with Bootstrap: A Guide to Submenus in Dropdown Menus

Introduction

Bootstrap is a powerful web framework that offers many features, but one thing it does not have is a native component for creating nested dropdown buttons. This can be a problem if you want to add submenus to your dropdown menus in the navbar.

In this article, I'll show you how to create submenus within Bootstrap dropdown menus using some tricks and techniques. You'll learn how to use the dropstart and dropend button types, which are not designed for submenus, but can be adapted with some adjustments. At the end, you'll create a new type of submenu to display the contents inline in the style of an accordion button.

You'll also learn how to style and display the submenus in both collapsed and expanded views.

By the end of this article, you will be able to enhance your web navigation with Bootstrap submenus!

fa-solid fa-circle-info fa-xl Note
This article displays Bootstrap components in both collapsed and expanded mode regardless of screen size. Display of expanded components could be problematic on mobile screens.

Bootstrap Dropdown Components

Dropdown Buttons

Bootstrap provides a range of Dropdown buttons, which allow you to create pop-out menus with ease. These menus can pop out in different directions - up, down, left, or right (start or end). The direction adapts to the available screen space automatically, ensuring a smooth user experience.

You can customize your buttons by choosing single or split.
Align the dropdown menu exactly with the button's right-hand edge by adding dropdown-menu-end.
Use dropstart to display the dropdown menu to the left of the button, and dropend to display the menu to the left of the button.

These options also adjust to the screen space, maintaining a functional design.

To turn off the dynamic display behaviour, just add data-bs-display="static" to the button.

Code for the buttons above:

<div class="btn-group">
    <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Single Dropdown
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item">Action</a></li>
        <li><a class="dropdown-item">Another action</a></li>
        <li><a class="dropdown-item">Something else here</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-light">Split Dropdown</button>
    <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
        aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item">Action</a></li>
        <li><a class="dropdown-item">Another action</a></li>
        <li><a class="dropdown-item">Something else here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item">Separated link</a></li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static"
        aria-expanded="false">
        Right-aligned
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><button class="dropdown-item" type="button">Action</button></li>
        <li><button class="dropdown-item" type="button">Another action</button></li>
        <li><button class="dropdown-item" type="button">Something else here</button></li>
    </ul>
</div>
<div class="btn-group dropend">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropend
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item">Action</a></li>
        <li><a class="dropdown-item">Another action</a></li>
        <li><a class="dropdown-item">Something else here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item">Separated link</a></li>
    </ul>
</div>
<div class="btn-group dropstart">
    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropstart
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item">Action</a></li>
        <li><a class="dropdown-item">Another action</a></li>
        <li><a class="dropdown-item">Something else here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item">Separated link</a></li>
    </ul>
</div>

Dropdown Navlinks

Before we create custom submenus, it helps to get an understanding of how the dropdown menu works.

Basic Dropdown Menu

  • Dropdown nav-item: To a standard nav-item list item element, the bootstrap dropdown class is added. This class just sets the position attribute to relative to allow the popout menu to be positioned relative to the dropdown button.
  • Trigger Element: In a basic dropdown menu, you have a single nav-link that triggers the dropdown. The link gets the dropdown-toggle class to style the link as a button with dropdown arrow and the role attribute set to "button". An additional attribute is added ( data-bs-toggle="dropdown" ) for JS Popper to provide the popout menu action. There is also an aria-expanded attribute (true when the menu is expanded, false when hidden) added for screen readers.
  • Dropdown Menu: When you click on the trigger link, a list of options appears below it as a popout menu. These options are added to the dropdown nav-item as an unordered list of items ( <ul> ). In effect, it's a nested navbar-nav element with alternative styling and additional actions. The bootstrap dropdown-menu class provides styling and positioning. An additional show class is added when the menu is expanded to toggle visibility.
  • Dropdown Menu Items: The items in a dropdown menu are essentially nav-item anchor elements but styled with dropdown-item bootstrap class instead.

From this, we can see that the dropdown menu structure is a recursion of the navbar structure with some additional styling and actions applied. We'll use a similar technique to add submenus later on.

To use a dropdown in a navbar, the dropdown class is applied to the nav-item, while the button is changed to an anchor tag with role="button".

When collapsed, Bootstrap applies styling to show the dropdown menu as an expandable item in the list. The width of the dropdown menu displays full-width rather than fitting the content as it does in expanded view.

<nav class="navbar navbar-expand-md bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1"
            aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item">Action</a></li>
                        <li><a class="dropdown-item">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item">Something else here</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Adding Sub-menus to Nav-link Dropdown Menus

Although Bootstrap documentation doesn't give any ready made components for this, we can make use of the dropend and dropstart components.

Dropend

We'll need to make some changes since our menu will appear in place of an unstyled list element. We will also change the dropend button element <button> to an anchor element <a> with role="button":

  • Dropdown container: The container is an unstyled list item element. The bootstrap dropend class is added here to style the style child trigger element. This is also the place we will add custom submenu classes to assist in styling for collapsed and expanded views.
  • Trigger Element: The only change we need to make from the dropdown trigger element is to change to bootstrap css class from nav-link to dropdown-item to keep it's styling consistent with other menu items. See note below regarding click behaviour.
  • Dropdown Menu & Menu Items: These are identical to dropdown menu equivalents and will just get some additional styling via the submenu class mentioned above.
Important

We want the dropend button to open a link on click, however the dropdown menu will collapse when any child element is clicked by default. In order to stop this, we need to add onclick="event.stopPropagation();" to the button.

<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" role="button" 
            data-bs-toggle="dropdown" aria-expanded="false">
            Dropend
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item">Action</a></li>
            <li><a class="dropdown-item">Another action</a></li>
            <li><a class="dropdown-item">Something else here</a></li>
            <li class="submenu submenu-md dropend">
                <a class="dropdown-item dropdown-toggle" role="button" 
                    data-bs-toggle="dropdown" aria-expanded="false"
                    onclick="event.stopPropagation();">
                    Sub Menu
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item">Sub item 1</a></li>
                    <li><a class="dropdown-item">Sub item 2</a></li>
                    <li><a class="dropdown-item">Sub item 3</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item">Sub item 4</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
fa-regular fa-pen-to-square fa-xl Note I've added a couple of custom classes submenu submenu-md to the list item element. We'll make use of this class below to style the collapsed and expanded views.

Adding this submenu as a list item to the dropdown menu in the previous example, the expanded view appears mostly fine, but there's room for some styling improvements. We should raise the submenu to align the first item with the menu link, and overlap the left edge a little to provide better ownership context to the reader.

In the collapsed view, you'll notice that it displays a menu within a menu with nested borders. This can be a bit confusing to users and requires some adjustments for better clarity.

Styling

Collapsed View

For the collapsed view, to make the submenu items a little clearer to the reader with less clutter, we'll make the following changes:

  1. Remove the submenu border. Strip the default top padding and add extra to the bottom to allow extra space afterwards when expanded.
  2. Indent the submenu items.
  3. Add a transition to the ::after pseudo-element to rotate it 90° so that it points down while the submenu is expanded. Bootstrap adds the show class to the button when the menu is expanded, we can use this in the selector to apply the styling.
li.submenu ul.dropdown-menu[data-bs-popper] {
    border-width: 0;
    padding-top: 0;
    padding-bottom: 1em;
}
li.submenu ul.dropdown-menu[data-bs-popper] li {
    padding-left: 1.5em;
}
li.submenu a[role="button"].show::after {
    transform: rotate(90deg);
}
Note

I've left off using dropend in the selector as these styles are common to both dropend and dropstart in collapsed view. Some additional collapsed view styling will be needed for dropstart which we'll look at further on.

The collapsed dropend submenu with styles applied.

Expanded View
fa-regular fa-pen-to-square fa-xl Note
I'm only adding code for the medium md breakpoint (768px) here. The same styles apply for other breakpoints and can be combined via scss etc.

For the expanded view, we'll use submenu-md for the css selectors. Because some of the styles are specific in expanded view for dropstart and dropend, we'll use these classes as additional selectors where necessary.

We need to make the following changes:

  1. Override the styles we added for the collapsed view to use default Bootstrap styles.
  2. Move the displayed submenu a little to the left and up for better UX.
  3. Move the pointer ::after pseudo-element to the right hand of the button instead of immediately after the text. This is just to help the reader identify which menu items are submenus.
@media (min-width: 768px) {
    /* common styles */
    li.submenu-md ul.dropdown-menu[data-bs-popper] {
        border-width: var(--bs-dropdown-border-width);
        padding-top: var(--bs-dropdown-padding-y);
        padding-bottom: var(--bs-dropdown-padding-y);
        margin-top: -0.5em;
    }
    li.submenu-md ul.dropdown-menu[data-bs-popper] li {
        padding-left: var(--bs-dropdown-padding-x);
    }
    li.submenu-md a[role="button"] {
        display: inline-flex;
        align-items: center;
    }
    /* dropend styles */
    li.submenu-md.dropend ul.dropdown-menu[data-bs-popper] {
        margin-left: -0.3em;
    }
    li.submenu-md.dropend a[role="button"].show::after {
        transform: unset;
    }
    li.submenu-md.dropend a[role="button"]::after {
        position: absolute;
        right: 0.4em;
    }
}

The expanded dropend submenu with styles applied.

Dropstart

The dropstart element is useful when you have nav menus on the right hand end of your navbar. To use this, we just need to replace dropend with dropstart in the above code. Be sure to use dropdown-menu-end to align the dropdown with the right edge.

<ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" role="button" 
            data-bs-toggle="dropdown" aria-expanded="false">
            Dropstart
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item">Action</a></li>
            <li><a class="dropdown-item">Another action</a></li>
            <li><a class="dropdown-item">Something else here</a></li>
            <li class="submenu submenu-md dropstart">
                <a class="dropdown-item dropdown-toggle" role="button" 
                    data-bs-toggle="dropdown" aria-expanded="false"
                    onclick="event.stopPropagation();">
                    Sub Menu
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item">Sub item 1</a></li>
                    <li><a class="dropdown-item">Sub item 2</a></li>
                    <li><a class="dropdown-item">Sub item 3</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item">Sub item 4</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Styling

The dropstart class gives us some extra design considerations due to the ::before pseudo-element.

Collapsed View

The collapsed view styling should reflect the same as per the dropend class. For this, we need to hide the ::before pseudo-element and add the same ::after element that dropend uses. All other styles will be applied by the common classes we defined above for the dropend collapsed view.

li.submenu a[role="button"]::before {
    display: none;
}
li.submenu a[role="button"]::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

The collapsed dropstart submenu with styling applied.

Expanded View

In the expanded view, we need to make the following adjustments:

  1. Hide the pointer ::after element and display the default ::before pointer instead.
  2. Move the pointer ::before pseudo-element into the left hand margin instead of immediately before the text. This will allow us to keep the left edge of the text aligned with other dropdown-items in the menu.
  3. Move the displayed submenu a little to the right and up for better UX.

To the common styles we defined in the dropend section above, we can add the following:

@media (min-width: 768px) {
    /* dropstart styles */
    li.submenu-md.dropstart a[role="button"]::after {
        display: none;
    }
    li.submenu-md.dropstart a[role="button"]::before {
        display: block;
        position: absolute;
        left: 0.4em;
    }
    li.submenu-md.dropstart ul.dropdown-menu[data-bs-popper] {
        margin-right: -0.3em;
    }
}

The expanded dropstart submenu with styling applied.

Dropinline

This class will give you an accordion style submenu that expands/collapses inline in expanded view just as menus and submenus do in collapsed view. This isn't a Bootstrap class, but I'm adding this for cases where you want to keep everything inline, especially useful when horizontal space is at a premium or for building vertical navs (see Vertical Nav section later).

Styling

Collapsed View

This is actually very easy to do with the css we have already defined. All that's needed is a change of styling on the dropdown menu in expanded view.

Expanded View

Most importantly, we change the position property from absolute to relative and force the width to 100% to contain it inside the parent dropdown menu. The rest is a little tidy up to remove any box-shadow and border and to set the background-color to transparent to show through the underlying parent background.

We want to keep the animated pointer that we defined earlier for the collapsed view as we are effectively performing the same collapse/expand menu action as we do there. Again, since this is defined for the collapsed (default) view, we don't need to specify anything for the expanded view.

Finally, the list items need a little indentation to provide some visual context.

@media (min-width: 768px) {
    /* dropinline styles */
    li.submenu-md.dropinline ul.dropdown-menu[data-bs-popper] {
        position: relative;
        width: 100% !important;
        border: 0;
        box-shadow: none;
        background-color: transparent;
    }
    li.submenu-md.dropinline ul.dropdown-menu[data-bs-popper] li {
        padding-left: 1em;
    }
}

The expanded dropinline submenu with styling applied.

tldr - The Complete Navbar Submenu Code

The complete css and navbar with both dropstart and dropend submenu types:

li.submenu ul.dropdown-menu[data-bs-popper] {
    border-width: 0;
    padding-top: 0;
    padding-bottom: 1em;
}
li.submenu ul.dropdown-menu[data-bs-popper] li {
    margin-left: 1.5em;
}
li.submenu a[role="button"].show::after {
    transform: rotate(90deg);
}
li.submenu.dropstart a[role="button"]::before {
    display: none;
}
li.submenu.dropstart a[role="button"]::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}
@media (min-width: 768px) {
    /* common styles */
    li.submenu-md ul.dropdown-menu[data-bs-popper] {
        border-width: var(--bs-dropdown-border-width);
        padding-top: var(--bs-dropdown-padding-y);
        padding-bottom: var(--bs-dropdown-padding-y);
        margin-top: -0.5em;
    }
    li.submenu-md ul.dropdown-menu[data-bs-popper] li {
        margin-left: 0;
    }
    li.submenu-md a[role="button"] {
        display: inline-flex;
        align-items: center;
    }
    /* dropend styles */
    li.submenu-md.dropend ul.dropdown-menu[data-bs-popper] {
        margin-left: -0.3em;
    }
    li.submenu-md.dropend a[role="button"].show::after {
        transform: unset;
    }
    li.submenu-md.dropend a[role="button"]::after {
        position: absolute;
        right: 0.4em;
    }
    /* dropstart styles */
    li.submenu-md.dropstart ul.dropdown-menu[data-bs-popper] {
        margin-right: -0.3em;
    }
    li.submenu-md.dropstart a[role="button"]::before {
        display: block;
        position: absolute;
        left: 0.4em;
    }
    li.submenu-md.dropstart a[role="button"]::after {
        display: none;
    }
    li.submenu-md.dropinline ul.dropdown-menu[data-bs-popper] {
        position: relative;
        width: 100% !important;
        border: 0;
        box-shadow: none;
        background-color: transparent;
    }
    li.submenu-md.dropinline ul.dropdown-menu[data-bs-popper] li {
        padding-left: 1em;
    }
}
<nav class="navbar navbar-expand-md bg-light border-bottom border-body" data-bs-theme="light">
    <div class="container-fluid">
        <a class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar13"
            aria-controls="navbar13" aria-expanded="false" aria-label="Toggle navigation" onmouseup="this.blur()">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar13">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropend
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item">Action</a></li>
                        <li><a class="dropdown-item">Another action</a></li>
                        <li><a class="dropdown-item">Something else here</a></li>
                        <li class="submenu submenu-md dropend">
                            <a class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false" onclick="event.stopPropagation();">
                                Sub Menu
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item">Sub item 1</a></li>
                                <li><a class="dropdown-item">Sub item 2</a></li>
                                <li><a class="dropdown-item">Sub item 3</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item">Sub item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="navbar-nav mx-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle"
                        role="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">Dropinline</a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item">Action</a></li>
                        <li><a class="dropdown-item">Another action</a></li>
                        <li><a class="dropdown-item">Something else here</a></li>
                        <li class="submenu submenu-md dropinline">
                            <a class="dropdown-item dropdown-toggle"
                                role="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                                onclick="event.stopPropagation();">Sub Menu</a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item">Sub item 1</a></li>
                                <li><a class="dropdown-item">Sub item 2</a></li>
                                <li><a class="dropdown-item">Sub item 3</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item">Sub item 4</a></li>
                            </ul>
                        </li>
                        <li><a class="dropdown-item">One last item</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropstart
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item">Action</a></li>
                        <li><a class="dropdown-item">Another action</a></li>
                        <li><a class="dropdown-item">Something else here</a></li>
                        <li class="submenu submenu-md dropstart">
                            <a class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown"
                                aria-expanded="false" onclick="event.stopPropagation();">
                                Sub Menu
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item">Sub item 1</a></li>
                                <li><a class="dropdown-item">Sub item 2</a></li>
                                <li><a class="dropdown-item">Sub item 3</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item">Sub item 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Adding Submenus to Vertical Navs

Pop-out Menus

To add a dropend pop-out menu to a vertical nav, we need to add dropend and btn-group to the list item to keep the pop-out menu together with the nav item.

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#">Some Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Another Link</a>
    </li>
    <li class="dropend btn-group">
        <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Menu
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item">Menu item 1</a></li>
            <li><a class="dropdown-item">Menu item 2</a></li>
            <li><a class="dropdown-item">Menu item 3</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
    </li>
</ul>

You might want to style the dropdown-menu to have a fixed left margin for consistent display of multiple menus on the nav.

Nested Submenus

To add submenus to the menu above, we can just use the same technique that we used above for navbar dropdown menus:

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#">Some Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Another Link</a>
    </li>
    <li class="dropend btn-group">
        <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Menu
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item">Menu item 1</a></li>
            <li><a class="dropdown-item">Menu item 2</a></li>
            <li><a class="dropdown-item">Menu item 3</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
    </li>
</ul>

Inline Menus

Similar to the dropinline class introduced earlier, we can easily add an accordion style dropdown menu to vertical navs.

Dropdown menus behave a little differently in vertical navs, Bootstrap will add inline styles to handle position and transform attributes. We need to apply styles via css to override these to relative and none, and use the !important flag to ensure these are the values used by the browser.

Once again, we'll add some animation for the dropdown pointer and indent the menu list items:

.nav.flex-column .dropinline a[role="button"]::after {
    transform: rotate(-90deg);
}
.nav.flex-column .dropinline a[role="button"].show::after {
    transform: none;
}
.nav.flex-column .dropinline ul.dropdown-menu.show {
    transform: none !important;
    position: relative !important;
    width: 100% !important;
    border: 0;
    margin-top: 0;
}
.nav.flex-column .dropinline ul.dropdown-menu li {
    padding-left: 1em;
}
<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link" href="#">Some Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Another Link</a>
    </li>
    <li class="nav-item dropinline">
        <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Menu
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item">Menu item 1</a></li>
            <li><a class="dropdown-item">Menu item 2</a></li>
            <li><a class="dropdown-item">Menu item 3</a></li>
        </ul>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
    </li>
</ul>

Conclusion

This guide has shown you how to create submenus in Bootstrap dropdown menus.

  • We started with the basics of Bootstrap dropdown components, such as dropdown buttons and dropdown nav-links. Then we learned how to add submenus to nav-link dropdown menus using Bootstrap's dropstart and dropend components. We also customized their behaviour and styling to improve the user experience.
  • We created a custom dropdown style to provide an accordion style sliding submenu in expanded view similar to that used by Bootstrap in collapsed view for dropdown menus.
  • We paid attention to the styling of submenus, both in collapsed and expanded views. We made sure the submenus looked attractive and user-friendly.
  • We also covered how to use submenus in vertical navs, making your navigation menus more versatile.

By following this guide, you have learned how to use Bootstrap submenus to enhance your web navigation. You can now create sophisticated and user-centric dropdown menus, improving the usability and aesthetics of your web applications.

Further Reading

If you found this article helpful, you might also enjoy the next article on creating sticky items on collapsible Bootstrap NavBars.


  Please feel free to leave any questions or comments below, or send me a message here