Repository navigation
v6: Menu: submenus don't stack with a back button below 576px as documented, and get clipped on small screens #43374
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
The Menu docs (Submenus section) say:
On small screens (below
576px), submenus stack over the parent menu with a back button instead of flying out to the side.
This doesn't happen. Below 576px, submenus still fly out to the side, exactly like on desktop. There is no stacking and no back button. I couldn't find an implementation in either js/src/menu.ts or scss/_menu.scss (checked v6.0.0-alpha.1 and current main).
Result on small screens
_createSubmenuFloating() places the submenu at end-start with fallback placements start-start, end-end and start-end, so left or right only. shift({ padding: 8 }) only corrects along the main axis (vertical for side placements).
When the parent menu is wide, for example items with .menu-item-description, there's no room on either side on a phone. The submenu then overflows horizontally:
- Plain menu: the submenu extends past the viewport edge and is partly or fully off-screen.
- Navbar inside a
.drawer(the usual mobile navigation setup): the submenu is placed outside.drawer-body. That element hasoverflow-y: auto, so the submenu gets clipped and is effectively invisible.
Steps to reproduce
- Open the reduced test case below on a phone, or in DevTools device emulation at a width below 576px (e.g. 390px).
- Plain menu: open "Menu" and tap "Network tools". The submenu is pushed off-screen.
- Drawer: tap the navbar toggler, open "Tools" and tap "Network tools". The submenu is not visible (clipped by
.drawer-body).
Expected: below 576px, the submenu stacks over the parent menu with a back button, as documented.
Actual: the submenu flies out to the side and ends up off-screen or clipped.
Note: the test case uses data-bs-submenu-trigger="click" to rule out a separate touch issue with the default 'both' trigger (see #43361).
Reduced test cases
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 1. Navbar with drawer (mobile navigation) -->
<nav class="navbar md:navbar-expand">
<div class="container-fluid">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<dialog class="drawer drawer-start" tabindex="-1" id="nav" aria-labelledby="navLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="navLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body">
<ul class="navbar-nav">
<li class="nav-item">
<button class="nav-link" type="button" data-bs-toggle="menu" data-bs-submenu-trigger="click" aria-expanded="false">Tools</button>
<div class="menu">
<a class="menu-item" href="#">
<span class="menu-item-content">
Call limit calculator
<span class="menu-item-description">Calculate the number of concurrent calls on a SIP trunk</span>
</span>
</a>
<div class="submenu">
<button class="menu-item" type="button">
<span class="menu-item-content">
Network tools
<span class="menu-item-description">DNS, IP information, subnet calculator, etc.</span>
</span>
</button>
<div class="menu">
<a class="menu-item" href="#">IP information</a>
<a class="menu-item" href="#">DNS lookup</a>
<a class="menu-item" href="#">Subnet calculator</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</dialog>
</div>
</nav>
<!-- 2. Plain menu -->
<div class="p-3">
<button class="btn-solid theme-primary" type="button" data-bs-toggle="menu" data-bs-submenu-trigger="click" aria-expanded="false">Menu</button>
<div class="menu">
<a class="menu-item" href="#">
<span class="menu-item-content">
Call limit calculator
<span class="menu-item-description">Calculate the number of concurrent calls on a SIP trunk</span>
</span>
</a>
<div class="submenu">
<button class="menu-item" type="button">
<span class="menu-item-content">
Network tools
<span class="menu-item-description">DNS, IP information, subnet calculator, etc.</span>
</span>
</button>
<div class="menu">
<a class="menu-item" href="#">IP information</a>
<a class="menu-item" href="#">DNS lookup</a>
<a class="menu-item" href="#">Subnet calculator</a>
</div>
</div>
</div>
</div>
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Current workaround: for the drawer case, force the submenu inline with CSS below md, e.g. .navbar .drawer .submenu > .menu { position: static !important; inset: auto !important; margin: 0 0 0 .75rem !important; }. !important is needed because the Menu JS sets position/left/top/margin as inline styles.
What operating system(s) are you seeing the problem on?
Android
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v6.0.0-alpha.1 (implementation also missing on current main)
Activity