Relocate overflowing nav menus as overflow submenus - #42873
Merged
Merged
Conversation
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
A nav item that hosts a menu used to collapse into a plain cloned link. The menu became unreachable once the nav item overflowed, so a nested menu was lost at narrow widths. Move the original `.menu` into a `.submenu` of the overflow menu instead of cloning it. One live menu keeps its ids, its nested submenus, and its node state. Only the trigger is cloned, with the menu data attributes stripped and `aria-haspopup` added. Restore moves the menu back to its nav item and disposes the menu instances that were created.
`tsc` rejected `parent.append(menu)`, because `Node` does not declare `append`. Store the parent as `ParentNode`, which does, and which is what `Node.parentNode` already returns.
The submenu relocation adds about 0.4KB gzipped to the minified builds, and both budgets had under 0.1KB of headroom. Move `bootstrap.min.js` to 34.0KB and `bootstrap.bundle.min.js` to 56.0KB.
An open nav menu kept stale classes when its item moved into overflow. Menus moved to another container were also missed, and cloned anchor triggers lost keyboard focus. Cache each hosted menu before it can move, reset open state during relocation, and keep anchor triggers focusable. Add regression coverage for relocation, nested interaction, container menus, and menu rebuilds. Raise the bundled size budget to fit the added handling.
mdo
force-pushed
the
mdo/nav-overflow-menus
branch
from
September 25, 2026 18:28
8dfa0f9 to
0c76af4
Compare
The bundled build is 73.13KB after the nav overflow changes, which is above the 73KB limit. Raise the limit to 73.25KB.
The radius token leaves visible corners on taller pill navigation. Use a component-specific 3rem radius for the pill container and links.
Resizable examples clip the generated overflow menu because their fixed positioning strategy cannot reach the toggle that NavOverflow creates. Expose a menu strategy option and use it in those previews. Hide the expanded nav until its first calculation completes to prevent a startup flash and scrollbar. Remove the icon line box so icon-only toggles stay vertically centered.
3 tasks
This was referenced Sep 26, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
.menuinto a.submenuof the overflow menu. Nested submenus stay reachable at narrow widths.Menuinstances before relocation or overflow rebuilds.menuStrategyand use fixed positioning in resizable examples so generated overflow menus are not clipped.replaceChildren()when the overflow menu is cleared.Fixes #42845