From 8dc8a1a7ecbe88bd901d69103592f6ccda6af891 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Aug 2026 12:08:33 -0700 Subject: [PATCH 1/7] Relocate overflowing nav menus as overflow submenus 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. --- js/src/nav-overflow.ts | 117 +++++++++++++++--- js/tests/unit/nav-overflow.spec.js | 67 ++++++++++ .../content/docs/components/nav-overflow.mdx | 55 +++++++- 3 files changed, 221 insertions(+), 18 deletions(-) diff --git a/js/src/nav-overflow.ts b/js/src/nav-overflow.ts index 3d4397b05710..a5d5b5ca038a 100644 --- a/js/src/nav-overflow.ts +++ b/js/src/nav-overflow.ts @@ -8,6 +8,7 @@ import BaseComponent from './base-component.js' import EventHandler from './dom/event-handler.js' import SelectorEngine from './dom/selector-engine.js' +import Menu from './menu.js' import { DefaultIconAllowlist, sanitizeHtml } from './util/sanitizer.js' /** @@ -26,6 +27,8 @@ const CLASS_NAME_OVERFLOW = 'nav-overflow' const CLASS_NAME_OVERFLOW_MENU = 'nav-overflow-menu' const CLASS_NAME_HIDDEN = 'd-none' const CLASS_NAME_KEEP = 'nav-overflow-keep' +const CLASS_NAME_SUBMENU = 'submenu' +const CLASS_NAME_SHOW = 'show' const SELECTOR_NAV = '.nav' const SELECTOR_NAV_ITEM = '.nav-item' @@ -33,6 +36,8 @@ const SELECTOR_NAV_LINK = '.nav-link' const SELECTOR_OVERFLOW_TOGGLE = '.nav-overflow-toggle' const SELECTOR_OVERFLOW_MENU = '.nav-overflow-menu' const SELECTOR_CUSTOM_ICON = '[data-bs-overflow-icon]' +const SELECTOR_MENU = '.menu' +const SELECTOR_MENU_TOGGLE = '[data-bs-toggle="menu"]' type NavOverflowConfig = { collapseBelow: number | string @@ -78,6 +83,7 @@ class NavOverflow extends BaseComponent { protected declare _resizeObserver: ResizeObserver | null protected declare _resizeHandler: (() => void) | null protected declare _collapseBelow: number + protected declare _relocatedMenus: Map constructor(element?: string | Element | null, config?: Partial | null) { super(element, config) @@ -96,6 +102,7 @@ class NavOverflow extends BaseComponent { this._resizeObserver = null this._resizeHandler = null this._collapseBelow = 0 + this._relocatedMenus = new Map() this._init() } @@ -357,8 +364,7 @@ class NavOverflow extends BaseComponent { return } - // Clear existing overflow items - this._overflowMenu.innerHTML = '' + this._overflowMenu.replaceChildren() this._overflowItems = [] for (const item of items) { @@ -367,20 +373,14 @@ class NavOverflow extends BaseComponent { continue } - const clonedLink = link.cloneNode(true) as HTMLElement - clonedLink.className = 'menu-item' + const menu = this._findItemMenu(item, link) - if (link.classList.contains('active')) { - clonedLink.classList.add('active') - } - - if (link.classList.contains('disabled') || link.hasAttribute('disabled')) { - clonedLink.classList.add('disabled') + if (menu && link.matches(SELECTOR_MENU_TOGGLE)) { + this._overflowMenu.append(this._relocateAsSubmenu(item, link, menu)) + } else { + this._overflowMenu.append(this._cloneAsMenuItem(link)) } - this._overflowMenu.append(clonedLink) - - // Hide original item item.classList.add(CLASS_NAME_HIDDEN) item.dataset.bsNavOverflow = 'true' @@ -388,7 +388,93 @@ class NavOverflow extends BaseComponent { } } + // A nav item that already hosts a Menu becomes a submenu of the overflow + // menu. Move the original `.menu` (do not clone it) so nested submenus, + // ids, and live node state stay on one element. + protected _relocateAsSubmenu(item: HTMLElement, link: HTMLElement, menu: HTMLElement): HTMLElement { + Menu.getInstance(link)?.dispose() + menu.classList.remove(CLASS_NAME_SHOW) + + this._relocatedMenus.set(item, { + menu, + parent: menu.parentNode!, + nextSibling: menu.nextSibling + }) + + const submenu = document.createElement('div') + submenu.className = CLASS_NAME_SUBMENU + submenu.append(this._cloneAsMenuItem(link, true), menu) + + return submenu + } + + protected _cloneAsMenuItem(link: HTMLElement, submenu = false): HTMLElement { + const clonedLink = link.cloneNode(true) as HTMLElement + clonedLink.className = 'menu-item' + clonedLink.removeAttribute('id') + + if (link.classList.contains('active')) { + clonedLink.classList.add('active') + } + + if (link.classList.contains('disabled') || link.hasAttribute('disabled')) { + clonedLink.classList.add('disabled') + } + + if (submenu) { + for (const name of clonedLink.getAttributeNames()) { + if (name.startsWith('data-bs-') && name !== 'data-bs-theme') { + clonedLink.removeAttribute(name) + } + } + + clonedLink.removeAttribute('href') + clonedLink.setAttribute('aria-haspopup', 'true') + clonedLink.setAttribute('aria-expanded', 'false') + + if (clonedLink.tagName === 'A') { + clonedLink.setAttribute('role', 'button') + } + } + + return clonedLink + } + + protected _findItemMenu(item: HTMLElement, link: HTMLElement): HTMLElement | null { + const sibling = SelectorEngine.next(link, SELECTOR_MENU)[0] as HTMLElement | undefined + + if (sibling && !sibling.classList.contains(CLASS_NAME_OVERFLOW_MENU)) { + return sibling + } + + const nested = SelectorEngine.findOne(SELECTOR_MENU, item) + + if (nested && !nested.classList.contains(CLASS_NAME_OVERFLOW_MENU)) { + return nested + } + + return null + } + + protected _restoreRelocatedMenus(): void { + for (const { menu, parent, nextSibling } of this._relocatedMenus.values()) { + if (nextSibling) { + nextSibling.before(menu) + } else { + parent.append(menu) + } + } + + this._relocatedMenus.clear() + } + protected _restoreItems(): void { + if (this._overflowToggle) { + Menu.getInstance(this._overflowToggle)?.dispose() + } + + this._restoreRelocatedMenus() + for (const item of this._items) { item.classList.remove(CLASS_NAME_HIDDEN) delete item.dataset.bsNavOverflow @@ -397,10 +483,7 @@ class NavOverflow extends BaseComponent { // Show the toggle too, so it is measured at its real width and not zero this._overflowToggle?.closest(SELECTOR_NAV_ITEM)?.classList.remove(CLASS_NAME_HIDDEN) - if (this._overflowMenu) { - this._overflowMenu.innerHTML = '' - } - + this._overflowMenu?.replaceChildren() this._overflowItems = [] } } diff --git a/js/tests/unit/nav-overflow.spec.js b/js/tests/unit/nav-overflow.spec.js index 8f612b7237ef..21f83b42feb4 100644 --- a/js/tests/unit/nav-overflow.spec.js +++ b/js/tests/unit/nav-overflow.spec.js @@ -1127,6 +1127,73 @@ describe('NavOverflow', () => { } }) + it('should wrap an overflowing menu host as a submenu and relocate its menu', () => { + fixtureEl.innerHTML = [ + '
', + '
    ', + '
  • Home
    • ', + ' ', + '
', + '
' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const productsMenu = wrapperEl.querySelector('#products-menu') + const navOverflow = new NavOverflow(wrapperEl) + const overflowMenu = wrapperEl.querySelector('.nav-overflow-menu') + const submenu = overflowMenu.querySelector(':scope > .submenu') + const trigger = submenu?.querySelector(':scope > .menu-item') + + expect(wrapperEl.querySelector('#products-item')).toHaveClass('d-none') + expect(submenu).not.toBeNull() + expect(trigger.textContent).toEqual('Products') + expect(trigger.getAttribute('data-bs-toggle')).toBeNull() + expect(trigger.getAttribute('aria-haspopup')).toEqual('true') + expect(submenu.querySelector(':scope > .menu')).toEqual(productsMenu) + expect(productsMenu.querySelector('.submenu > .menu-item').textContent).toEqual('Phones') + + navOverflow.dispose() + }) + + it('should move a relocated menu back onto its nav item on restore', () => { + fixtureEl.innerHTML = [ + '
', + '
    ', + '
  • Home
    • ', + ' ', + '
', + '
' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const productsItem = wrapperEl.querySelector('#products-item') + const productsMenu = wrapperEl.querySelector('#products-menu') + const navOverflow = new NavOverflow(wrapperEl) + + expect(productsMenu.parentElement).toHaveClass('submenu') + + navOverflow.dispose() + + expect(productsMenu.parentElement).toEqual(productsItem) + expect(productsItem).not.toHaveClass('d-none') + }) + it('should restore hidden items on dispose', () => { fixtureEl.innerHTML = [ '
', diff --git a/site/src/content/docs/components/nav-overflow.mdx b/site/src/content/docs/components/nav-overflow.mdx index 686acb5d25c7..53c4d05cdd13 100644 --- a/site/src/content/docs/components/nav-overflow.mdx +++ b/site/src/content/docs/components/nav-overflow.mdx @@ -15,7 +15,7 @@ Here’s what you need to know before getting started: - Wrap your `.nav` in a `.nav-overflow` element and add `data-bs-toggle="nav-overflow"` to that wrapper. - **Responds to container size**, not viewport size. The component watches the wrapper with a ResizeObserver, so it works in embedded contexts, documentation examples, and responsive containers. - The wrapper is what makes this reliable. Collapsing items changes the width of the nav, so the component measures the wrapper instead. Measuring the nav would feed the result back in as the input. -- Overflow items are cloned into a "More" menu while the originals are hidden. +- Overflow items are cloned into a "More" menu while the originals are hidden. A nav item that hosts a menu is the exception: its `.menu` moves into a submenu of the overflow menu. - Works with all nav styles: default, pills, tabs, and underline. - Active and disabled states are preserved in the overflow menu. @@ -195,6 +195,59 @@ The nav overflow pattern can also be used within a [navbar]([[docsref:/component
`} /> +### With menus + +A nav item that already hosts a [menu]([[docsref:/components/menu]]) becomes a submenu of the overflow menu. The plugin moves the original `.menu` rather than cloning it, so nested submenus stay intact. + + + + `} /> + ## Customizing the toggle ### Custom text From b1491cd8e9e0ee9a86f31d8fa4e9bbd06c1c9864 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Aug 2026 12:17:45 -0700 Subject: [PATCH 2/7] Type a relocated menu parent as ParentNode `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. --- js/src/nav-overflow.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/nav-overflow.ts b/js/src/nav-overflow.ts index a5d5b5ca038a..746dc533f7b8 100644 --- a/js/src/nav-overflow.ts +++ b/js/src/nav-overflow.ts @@ -83,7 +83,7 @@ class NavOverflow extends BaseComponent { protected declare _resizeObserver: ResizeObserver | null protected declare _resizeHandler: (() => void) | null protected declare _collapseBelow: number - protected declare _relocatedMenus: Map + protected declare _relocatedMenus: Map constructor(element?: string | Element | null, config?: Partial | null) { super(element, config) From 612f349ca43991d7cb7117e037337bbe8828f17a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 28 Aug 2026 12:22:50 -0700 Subject: [PATCH 3/7] Raise the JS bundlewatch budgets 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. --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index c534dc0e1b7d..3f7472b605ba 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -38,7 +38,7 @@ }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "57.5 kB" + "maxSize": "58.0 kB" }, { "path": "./dist/js/bootstrap.js", @@ -46,7 +46,7 @@ }, { "path": "./dist/js/bootstrap.min.js", - "maxSize": "33.75 kB" + "maxSize": "34.25 kB" } ], "ci": { From 0c76af46775176cfc71fcf99925815358be29a02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Sep 2026 11:28:22 -0700 Subject: [PATCH 4/7] Handle menu state during nav overflow relocation 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. --- .bundlewatch.config.json | 2 +- js/src/nav-overflow.ts | 36 +++++++- js/tests/unit/nav-overflow.spec.js | 137 ++++++++++++++++++++++++++++- 3 files changed, 169 insertions(+), 6 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 3f7472b605ba..5bd44207dd25 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -38,7 +38,7 @@ }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "58.0 kB" + "maxSize": "58.25 kB" }, { "path": "./dist/js/bootstrap.js", diff --git a/js/src/nav-overflow.ts b/js/src/nav-overflow.ts index 746dc533f7b8..8710d6f18f09 100644 --- a/js/src/nav-overflow.ts +++ b/js/src/nav-overflow.ts @@ -83,6 +83,7 @@ class NavOverflow extends BaseComponent { protected declare _resizeObserver: ResizeObserver | null protected declare _resizeHandler: (() => void) | null protected declare _collapseBelow: number + protected declare _itemMenus: Map protected declare _relocatedMenus: Map constructor(element?: string | Element | null, config?: Partial | null) { @@ -102,6 +103,7 @@ class NavOverflow extends BaseComponent { this._resizeObserver = null this._resizeHandler = null this._collapseBelow = 0 + this._itemMenus = new Map() this._relocatedMenus = new Map() this._init() @@ -159,6 +161,11 @@ class NavOverflow extends BaseComponent { // Store original order data for (const [index, item] of this._items.entries()) { item.dataset.bsNavOrder = index as any + + const link = SelectorEngine.findOne(SELECTOR_NAV_LINK, item) + if (link?.matches(SELECTOR_MENU_TOGGLE)) { + this._findItemMenu(item, link) + } } // Resolve collapseBelow threshold once @@ -392,8 +399,8 @@ class NavOverflow extends BaseComponent { // menu. Move the original `.menu` (do not clone it) so nested submenus, // ids, and live node state stay on one element. protected _relocateAsSubmenu(item: HTMLElement, link: HTMLElement, menu: HTMLElement): HTMLElement { - Menu.getInstance(link)?.dispose() - menu.classList.remove(CLASS_NAME_SHOW) + this._resetMenu(link, menu) + item.classList.remove(CLASS_NAME_SHOW) this._relocatedMenus.set(item, { menu, @@ -434,6 +441,10 @@ class NavOverflow extends BaseComponent { if (clonedLink.tagName === 'A') { clonedLink.setAttribute('role', 'button') + + if (!clonedLink.hasAttribute('tabindex')) { + clonedLink.setAttribute('tabindex', '0') + } } } @@ -444,18 +455,34 @@ class NavOverflow extends BaseComponent { const sibling = SelectorEngine.next(link, SELECTOR_MENU)[0] as HTMLElement | undefined if (sibling && !sibling.classList.contains(CLASS_NAME_OVERFLOW_MENU)) { + this._itemMenus.set(item, sibling) return sibling } const nested = SelectorEngine.findOne(SELECTOR_MENU, item) if (nested && !nested.classList.contains(CLASS_NAME_OVERFLOW_MENU)) { + this._itemMenus.set(item, nested) return nested } + const cached = this._itemMenus.get(item) + if (cached?.isConnected) { + return cached + } + + this._itemMenus.delete(item) return null } + protected _resetMenu(toggle: HTMLElement, menu: HTMLElement): void { + Menu.getInstance(toggle)?.dispose() + toggle.classList.remove(CLASS_NAME_SHOW) + toggle.setAttribute('aria-expanded', 'false') + toggle.parentElement?.classList.remove(CLASS_NAME_SHOW) + menu.classList.remove(CLASS_NAME_SHOW) + } + protected _restoreRelocatedMenus(): void { for (const { menu, parent, nextSibling } of this._relocatedMenus.values()) { if (nextSibling) { @@ -469,8 +496,9 @@ class NavOverflow extends BaseComponent { } protected _restoreItems(): void { - if (this._overflowToggle) { - Menu.getInstance(this._overflowToggle)?.dispose() + if (this._overflowToggle && this._overflowMenu) { + this._resetMenu(this._overflowToggle, this._overflowMenu) + this._overflowToggle.closest(SELECTOR_NAV_ITEM)?.classList.remove(CLASS_NAME_SHOW) } this._restoreRelocatedMenus() diff --git a/js/tests/unit/nav-overflow.spec.js b/js/tests/unit/nav-overflow.spec.js index 21f83b42feb4..32f16f38fd02 100644 --- a/js/tests/unit/nav-overflow.spec.js +++ b/js/tests/unit/nav-overflow.spec.js @@ -1,4 +1,5 @@ import EventHandler from '../../src/dom/event-handler.js' +import Menu from '../../src/menu.js' import NavOverflow from '../../src/nav-overflow.js' import { clearFixture, getFixture } from '../helpers/fixture.js' @@ -1127,7 +1128,7 @@ describe('NavOverflow', () => { } }) - it('should wrap an overflowing menu host as a submenu and relocate its menu', () => { + it('should wrap an overflowing menu host as a working submenu', async () => { fixtureEl.innerHTML = [ '
', '
    ', @@ -1152,6 +1153,7 @@ describe('NavOverflow', () => { const productsMenu = wrapperEl.querySelector('#products-menu') const navOverflow = new NavOverflow(wrapperEl) const overflowMenu = wrapperEl.querySelector('.nav-overflow-menu') + const overflowToggle = wrapperEl.querySelector('.nav-overflow-toggle') const submenu = overflowMenu.querySelector(':scope > .submenu') const trigger = submenu?.querySelector(':scope > .menu-item') @@ -1163,6 +1165,17 @@ describe('NavOverflow', () => { expect(submenu.querySelector(':scope > .menu')).toEqual(productsMenu) expect(productsMenu.querySelector('.submenu > .menu-item').textContent).toEqual('Phones') + await Menu.getOrCreateInstance(overflowToggle).show() + trigger.click() + + expect(submenu).toHaveClass('show') + expect(productsMenu).toHaveClass('show') + + productsMenu.querySelector('.submenu > .menu-item').click() + + expect(productsMenu.querySelector('.submenu')).toHaveClass('show') + expect(productsMenu.querySelector('.submenu > .menu')).toHaveClass('show') + navOverflow.dispose() }) @@ -1194,6 +1207,128 @@ describe('NavOverflow', () => { expect(productsItem).not.toHaveClass('d-none') }) + it('should reset an open menu when relocating it', async () => { + fixtureEl.innerHTML = [ + '
    ', + '
      ', + '
    • Home
      • ', + ' ', + '
    ', + '
    ' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const productsItem = wrapperEl.querySelector('#products-item') + const productsToggle = productsItem.querySelector('.nav-link') + const productsMenu = productsItem.querySelector('.menu') + const navOverflow = new NavOverflow(wrapperEl) + const menu = new Menu(productsToggle) + + await menu.show() + wrapperEl.style.width = '150px' + navOverflow.update() + + expect(productsMenu.parentElement).toHaveClass('submenu') + expect(productsItem).not.toHaveClass('show') + expect(productsToggle).not.toHaveClass('show') + expect(productsToggle.getAttribute('aria-expanded')).toEqual('false') + expect(Menu.getInstance(productsToggle)).toBeNull() + + navOverflow.dispose() + }) + + it('should relocate a menu that uses a container', async () => { + fixtureEl.innerHTML = [ + '
    ', + '
      ', + '
    • Home
      • ', + ' ', + '
    ', + '
    ' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const productsToggle = wrapperEl.querySelector('#products-item .nav-link') + const productsMenu = wrapperEl.querySelector('#products-menu') + const navOverflow = new NavOverflow(wrapperEl) + const menu = new Menu(productsToggle) + + await menu.show() + expect(productsMenu.parentElement).toEqual(document.body) + + wrapperEl.style.width = '150px' + navOverflow.update() + + expect(productsMenu.parentElement).toHaveClass('submenu') + expect(productsMenu.closest('.nav-overflow-menu')).not.toBeNull() + + navOverflow.dispose() + }) + + it('should make a relocated anchor trigger keyboard focusable', () => { + fixtureEl.innerHTML = [ + '
    ', + ' ', + '
    ' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const navOverflow = new NavOverflow(wrapperEl) + const submenuTrigger = wrapperEl.querySelector('.nav-overflow-menu > .submenu > .menu-item') + + expect(submenuTrigger.tagName).toEqual('A') + expect(submenuTrigger.getAttribute('href')).toBeNull() + expect(submenuTrigger.getAttribute('role')).toEqual('button') + expect(submenuTrigger.getAttribute('tabindex')).toEqual('0') + + navOverflow.dispose() + }) + + it('should reset an open overflow menu before rebuilding it', async () => { + fixtureEl.innerHTML = [ + '
    ', + ' ', + '
    ' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const navOverflow = new NavOverflow(wrapperEl) + const overflowToggle = wrapperEl.querySelector('.nav-overflow-toggle') + const overflowMenu = wrapperEl.querySelector('.nav-overflow-menu') + const menu = new Menu(overflowToggle) + + await menu.show() + navOverflow.update() + + expect(overflowToggle).not.toHaveClass('show') + expect(overflowToggle.getAttribute('aria-expanded')).toEqual('false') + expect(overflowMenu).not.toHaveClass('show') + expect(Menu.getInstance(overflowToggle)).toBeNull() + + navOverflow.dispose() + }) + it('should restore hidden items on dispose', () => { fixtureEl.innerHTML = [ '
    ', From ef64bb5eb4cfda4038e4fd75e2ec7655337cef5a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Sep 2026 11:50:24 -0700 Subject: [PATCH 5/7] Raise the unminified bundlewatch budget The bundled build is 73.13KB after the nav overflow changes, which is above the 73KB limit. Raise the limit to 73.25KB. --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 5bd44207dd25..d5d4fa1ced8a 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -34,7 +34,7 @@ }, { "path": "./dist/js/bootstrap.bundle.js", - "maxSize": "73.0 kB" + "maxSize": "73.25 kB" }, { "path": "./dist/js/bootstrap.bundle.min.js", From 08792ed6dd2965ef4e3439c4fe823114bbb4dc45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Sep 2026 12:15:33 -0700 Subject: [PATCH 6/7] Fully round nav pills The radius token leaves visible corners on taller pill navigation. Use a component-specific 3rem radius for the pill container and links. --- scss/_nav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 53fc2728b409..464309d7c2a0 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -59,10 +59,10 @@ $nav-pills-tokens: defaults( ( --nav-pills-bg: var(--bg-1), --nav-pills-padding: .25rem, - --nav-pills-border-radius: var(--radius-9), + --nav-pills-border-radius: 3rem, --nav-pills-link-active-color: var(--primary-contrast), --nav-pills-link-active-bg: var(--primary-bg), - --nav-pills-link-border-radius: var(--radius-9), + --nav-pills-link-border-radius: 3rem, ), $nav-pills-tokens ); From b3462d78b3ab7b85962e5fa44a2c1e494817916f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Sep 2026 13:39:33 -0700 Subject: [PATCH 7/7] Fix nav overflow startup and clipped menus 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. --- js/src/nav-overflow.ts | 6 +++++ js/tests/unit/nav-overflow.spec.js | 22 +++++++++++++++++++ scss/_nav-overflow.scss | 15 +++++++++++++ .../shortcodes/ResizableExample.astro | 16 +++++++++----- .../content/docs/components/nav-overflow.mdx | 1 + 5 files changed, 55 insertions(+), 5 deletions(-) diff --git a/js/src/nav-overflow.ts b/js/src/nav-overflow.ts index 8710d6f18f09..9796ef8ba6f0 100644 --- a/js/src/nav-overflow.ts +++ b/js/src/nav-overflow.ts @@ -27,6 +27,7 @@ const CLASS_NAME_OVERFLOW = 'nav-overflow' const CLASS_NAME_OVERFLOW_MENU = 'nav-overflow-menu' const CLASS_NAME_HIDDEN = 'd-none' const CLASS_NAME_KEEP = 'nav-overflow-keep' +const CLASS_NAME_INITIALIZED = 'nav-overflow-initialized' const CLASS_NAME_SUBMENU = 'submenu' const CLASS_NAME_SHOW = 'show' @@ -43,6 +44,7 @@ type NavOverflowConfig = { collapseBelow: number | string iconPlacement: string menuPlacement: string + menuStrategy: string moreText: string | false moreIcon: string threshold: number @@ -55,6 +57,7 @@ const Default: NavOverflowConfig = { collapseBelow: 0, iconPlacement: 'start', menuPlacement: 'bottom-end', + menuStrategy: 'absolute', moreText: DEFAULT_TEXT, moreIcon: '', threshold: 0 // Minimum items to keep visible before showing overflow @@ -64,6 +67,7 @@ const DefaultType = { collapseBelow: '(number|string)', iconPlacement: 'string', menuPlacement: 'string', + menuStrategy: 'string', moreText: '(string|boolean)', moreIcon: 'string', threshold: 'number' @@ -179,6 +183,7 @@ class NavOverflow extends BaseComponent { // Initial calculation this._calculateOverflow() + this._element.classList.add(CLASS_NAME_INITIALIZED) } protected _createOverflowMenu(): void { @@ -203,6 +208,7 @@ class NavOverflow extends BaseComponent { button.className = 'nav-link nav-overflow-toggle' button.setAttribute('data-bs-toggle', 'menu') button.setAttribute('data-bs-placement', this._config.menuPlacement) + button.setAttribute('data-bs-strategy', this._config.menuStrategy) button.setAttribute('aria-expanded', 'false') // An icon-only toggle still needs a name. Fall back to the default text, diff --git a/js/tests/unit/nav-overflow.spec.js b/js/tests/unit/nav-overflow.spec.js index 32f16f38fd02..e3301eec5b95 100644 --- a/js/tests/unit/nav-overflow.spec.js +++ b/js/tests/unit/nav-overflow.spec.js @@ -28,6 +28,7 @@ describe('NavOverflow', () => { it('should return plugin default config', () => { expect(NavOverflow.Default).toEqual(jasmine.any(Object)) expect(NavOverflow.Default.moreText).toEqual('More') + expect(NavOverflow.Default.menuStrategy).toEqual('absolute') expect(NavOverflow.Default.threshold).toEqual(0) }) }) @@ -98,6 +99,7 @@ describe('NavOverflow', () => { const navOverflow = new NavOverflow(wrapperEl) expect(wrapperEl).toHaveClass('nav-overflow') + expect(wrapperEl).toHaveClass('nav-overflow-initialized') expect(wrapperEl.querySelector('.nav')).not.toHaveClass('nav-overflow') navOverflow.dispose() @@ -653,6 +655,7 @@ describe('NavOverflow', () => { collapseBelow: '(number|string)', iconPlacement: 'string', menuPlacement: 'string', + menuStrategy: 'string', moreText: '(string|boolean)', moreIcon: 'string', threshold: 'number' @@ -742,6 +745,25 @@ describe('NavOverflow', () => { navOverflow.dispose() }) + it('should pass menuStrategy to the generated menu toggle', () => { + fixtureEl.innerHTML = [ + '
    ', + ' ', + '
    ' + ].join('') + + const wrapperEl = fixtureEl.querySelector('[data-bs-toggle="nav-overflow"]') + const navOverflow = new NavOverflow(wrapperEl, { + menuStrategy: 'fixed' + }) + + expect(wrapperEl.querySelector('.nav-overflow-toggle').getAttribute('data-bs-strategy')).toEqual('fixed') + + navOverflow.dispose() + }) + it('should use a child element with [data-bs-overflow-icon] as the icon', () => { fixtureEl.innerHTML = [ '
    ', diff --git a/scss/_nav-overflow.scss b/scss/_nav-overflow.scss index 780916095f2f..3cb25b10a516 100644 --- a/scss/_nav-overflow.scss +++ b/scss/_nav-overflow.scss @@ -13,6 +13,16 @@ container-type: inline-size; flex: 1 1 0; // Fill the free space when the wrapper is itself a flex item min-width: 0; // Let the wrapper shrink below its content width + + // Prevent the expanded nav from flashing or creating a scrollbar before + // JavaScript completes the first overflow calculation. + &:not(.nav-overflow-initialized) { + overflow: clip; + + > .nav { + visibility: hidden; + } + } } // The nav fills the wrapper and stops wrapping, so items run past the edge in @@ -34,6 +44,11 @@ margin-inline-start: auto; } + // Remove the inline line box so an icon-only toggle centers its icon. + .nav-overflow-icon { + display: flex; + } + // Hide items that have been moved to overflow .nav-overflow [data-bs-nav-overflow="true"] { display: none; diff --git a/site/src/components/shortcodes/ResizableExample.astro b/site/src/components/shortcodes/ResizableExample.astro index f470c5e4414d..105f823070af 100644 --- a/site/src/components/shortcodes/ResizableExample.astro +++ b/site/src/components/shortcodes/ResizableExample.astro @@ -57,11 +57,17 @@ markup = replacePlaceholdersInHtml(markup) // The resizable container needs `overflow: hidden` for the CSS `resize` handle // to work, which clips popovers like menus/dropdowns when they open. Render them // with a fixed positioning strategy in the live preview only so they can spill -// outside the container. The displayed markup below is left untouched. -const previewMarkup = markup.replace( - /data-bs-toggle="(menu|dropdown)"(?![^>]*\bdata-bs-strategy=)/g, - 'data-bs-toggle="$1" data-bs-strategy="fixed"' -) +// outside the container. NavOverflow passes its strategy to the toggle that it +// generates. The displayed markup below is left untouched. +const previewMarkup = markup + .replace( + /data-bs-toggle="(menu|dropdown)"(?![^>]*\bdata-bs-strategy=)/g, + 'data-bs-toggle="$1" data-bs-strategy="fixed"' + ) + .replace( + /data-bs-toggle="nav-overflow"(?![^>]*\bdata-bs-menu-strategy=)/g, + 'data-bs-toggle="nav-overflow" data-bs-menu-strategy="fixed"' + ) const simplifiedMarkup = markup.replace( //g, diff --git a/site/src/content/docs/components/nav-overflow.mdx b/site/src/content/docs/components/nav-overflow.mdx index 53c4d05cdd13..f2120d2e600d 100644 --- a/site/src/content/docs/components/nav-overflow.mdx +++ b/site/src/content/docs/components/nav-overflow.mdx @@ -400,6 +400,7 @@ const navOverflow = new bootstrap.NavOverflow(wrapperElement, { | `collapseBelow` | number\|string | `0` | Wrapper width below which all items collapse into the overflow dropdown. Pass a breakpoint name (e.g., `'md'`) to resolve from `--bs-breakpoint-{name}`, or a number for a direct pixel value. `0` disables. | | `iconPlacement` | string | `'start'` | Position of the icon relative to the text in the toggle button. Use `'start'` for before the text or `'end'` for after. | | `menuPlacement` | string | `'bottom-end'` | Placement of the overflow dropdown menu, passed as `data-bs-placement` to the menu toggle. | +| `menuStrategy` | string | `'absolute'` | Positioning strategy for the overflow menu, passed as `data-bs-strategy` to the menu toggle. Use `'fixed'` when an overflow ancestor would clip the menu. | | `moreText` | string\|boolean | `'More'` | Text label for the overflow toggle button. Inserted as plain text. Use `false` (or an empty string) for an icon-only toggle, which is labeled `aria-label="More"` instead. | | `moreIcon` | string | `'...'` | SVG or HTML icon for the overflow toggle button. Passed through the [icon content sanitizer]([[docsref:/getting-started/javascript#sanitizer]]) before insertion. Overridden by a child element with `data-bs-overflow-icon` if present (also sanitized). | | `threshold` | number | `0` | Minimum number of items to keep visible before showing overflow. |