Nav overflow

Moves navigation links that do not fit into a “More” menu, also known as the Priority+ pattern.

Bootstrap’s nav overflow docs describe the markup and CSS.

Example

Wrap a .nav in an element with bsNavOverflow. The wrapper’s width decides what fits, so it also works in sidebars and cards. The menu shows copies of the links, and choosing one clicks the original, so routerLink and click handlers keep working. Resize the window to see links move.

HTML

<div bsNavOverflow>
  <ul bsNav variant="pills" aria-label="Main sections">
    <li class="nav-item"><a bsNavLink active href="#">Home</a></li>
    <li class="nav-item"><a bsNavLink href="#">Dashboard</a></li>
    <li class="nav-item"><a bsNavLink href="#">Products</a></li>
    <li class="nav-item"><a bsNavLink href="#">Services</a></li>
    <li class="nav-item"><a bsNavLink href="#">Analytics</a></li>
    <li class="nav-item"><a bsNavLink href="#">Reports</a></li>
    <li class="nav-item"><a bsNavLink href="#">Settings</a></li>
    <li class="nav-item"><a bsNavLink href="#">Help</a></li>
  </ul>
</div>

Keep items visible

Add .nav-overflow-keep to items that must stay visible. Here the container is narrow, so only a few links fit.

HTML

<div bsNavOverflow style="max-width: 24rem">
  <ul bsNav variant="underline" aria-label="Sections with a kept item">
    <li class="nav-item nav-overflow-keep"><a bsNavLink active href="#">Home</a></li>
    <li class="nav-item"><a bsNavLink href="#">Dashboard</a></li>
    <li class="nav-item"><a bsNavLink href="#">Products</a></li>
    <li class="nav-item"><a bsNavLink href="#">Services</a></li>
    <li class="nav-item"><a bsNavLink href="#">Analytics</a></li>
    <li class="nav-item"><a bsNavLink href="#">Reports</a></li>
    <li class="nav-item"><a bsNavLink href="#">Settings</a></li>
    <li class="nav-item"><a bsNavLink href="#">Help</a></li>
  </ul>
</div>

Toggle text, icon and thresholds

moreText changes the toggle text; leave it empty for an icon-only toggle labelled by moreLabel. iconPlacement moves the icon after the text, threshold keeps a minimum number of links visible, and collapseBelow moves every link into the menu below a breakpoint or width.

HTML

<div bsNavOverflow moreText="" moreLabel="More sections" style="max-width: 24rem">
  <ul bsNav variant="tabs" aria-label="Sections with an icon toggle">
    <li class="nav-item"><a bsNavLink active href="#">Home</a></li>
    <li class="nav-item"><a bsNavLink href="#">Dashboard</a></li>
    <li class="nav-item"><a bsNavLink href="#">Products</a></li>
    <li class="nav-item"><a bsNavLink href="#">Services</a></li>
    <li class="nav-item"><a bsNavLink href="#">Analytics</a></li>
    <li class="nav-item"><a bsNavLink href="#">Reports</a></li>
    <li class="nav-item"><a bsNavLink href="#">Settings</a></li>
    <li class="nav-item"><a bsNavLink href="#">Help</a></li>
  </ul>
</div>

API

BsNavOverflow

Selector: [bsNavOverflow] · Exported as: bsNavOverflow

Inputs

Name	Type	Default	Description
`moreText`	`string`	`'More'`	Toggle text. Empty shows only the icon.
`moreLabel`	`string`	`'More'`	Accessible label of an icon-only toggle.
`iconPlacement`	`'start' \| 'end'`	`'start'`	Side of the icon.
`threshold`	`number`	`0`	Minimum number of links to keep visible.
`collapseBelow`	`BsBreakpoint \| number \| null`	`null`	Moves every link into the menu below this width.

Outputs

Name	Type	Description
`overflowChange`	`number`	Emits the number of links in the menu.

Methods

Name	Type	Description
`update()`	`void`	Measures again.
`overflowCount`	`Signal<number>`	Number of links in the menu.