"discoverability",
"docsref",
"dropend",
- "dropleft",
- "dropright",
"dropstart",
"dropup",
"dgst",
</nav>
</section>
- <!-- Dropup with Submenus -->
+ <!-- Submenus with Top Placement -->
<section class="test-section">
- <h2>Dropup with Submenus</h2>
- <p class="fg-2">Submenus work with dropup direction.</p>
+ <h2>Submenus with Top Placement</h2>
+ <p class="fg-2">Submenus work in upward direction.</p>
<div class="demo-box demo-box-center" style="min-height: 200px;">
- <div class="btn-group dropup">
- <button type="button" class="btn-solid theme-warning" data-bs-toggle="menu" aria-expanded="false">
- Dropup Menu
+ <div class="btn-group">
+ <button type="button" class="btn-solid theme-warning" data-bs-toggle="menu" data-bs-placement="top" aria-expanded="false">
+ Menu (opens top)
</button>
<div class="menu">
<a class="menu-item" href="#">Action</a>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
- <li class="nav-item dropup">
- <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Dropup</a>
+ <li class="nav-item">
+ <a class="nav-link" href="#" role="button" data-bs-toggle="menu" aria-expanded="false">Menu</a>
<div class="menu">
<a class="menu-item" href="#">Action</a>
<a class="menu-item" href="#">Another action</a>
- Removed jQuery support and the `js-test-jquery` test target.
- **Replaced the Dropdown component with Menu.** All `.dropdown-*` classes are now `.menu-*` classes, and `data-bs-toggle="dropdown"` is now `data-bs-toggle="menu"`. See the [Menu docs]([[docsref:/components/menus]]) for full details.
- Renamed CSS classes: `.dropdown-menu` to `.menu`, `.dropdown-item` to `.menu-item`, `.dropdown-divider` to `.menu-divider`, `.dropdown-header` to `.menu-header`, `.dropdown-submenu` to `.submenu`.
+ - Deprecated directional wrappers: `.dropstart`, `.dropend`, and `.dropup`. Use `data-bs-placement` to control direction instead (for example, `.dropup` becomes `data-bs-placement="top"`).
- Removed the `.dropdown-toggle` class — menu toggles no longer require a toggle class.
- Removed the `.dropdown` wrapper — no wrapper element is required. The toggle and `.menu` are direct siblings.
- Simplified markup from `<ul><li><a class="dropdown-item">` to a flat `<div class="menu"><a class="menu-item">` structure.