Nav overflow

How it works

The nav overflow component (also known as the "Priority+" pattern) automatically detects when navigation items don’t fit within their container and moves them into a menu. This provides a responsive navigation experience without requiring different markup for different screen sizes.

Here’s what you need to know before getting started:

Add data-bs-toggle="nav-overflow" to any .nav element to enable automatic overflow detection.
Responds to container size, not viewport size. The component uses a ResizeObserver to monitor its own width, so it works perfectly in embedded contexts, documentation examples, and responsive containers.
Overflow items are cloned into a "More" menu while the originals are hidden.
Works with all nav styles: default, pills, tabs, and underline.
Active and disabled states are preserved in the overflow menu.

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Examples

Add data-bs-toggle="nav-overflow" to your nav element. When items don’t fit, they’ll automatically move to a "More" menu. Drag the right edge of the container below to see how nav items automatically move to the "More" menu as space becomes limited.

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Analytics</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Reports</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Help</a>
  </li>
</ul>

With tabs

The overflow pattern works seamlessly with tabbed navigation:

HTML

<ul class="nav nav-tabs" data-bs-toggle="nav-overflow">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Overview</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Details</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">History</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Activity</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Comments</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Attachments</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Related</a>
  </li>
</ul>

With underline

HTML

<ul class="nav nav-underline" data-bs-toggle="nav-overflow">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">FAQs</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

Keep items visible

Use the .nav-overflow-keep class on items that should never be moved to the overflow menu. These items will remain visible regardless of available space—useful for high-priority items like "Home" or action buttons.

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
  <li class="nav-item nav-overflow-keep">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Products</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Services</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Blog</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Careers</a>
  </li>
  <li class="nav-item nav-overflow-keep">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

With disabled items

Disabled states are preserved when items move to the overflow menu:

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">More content</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Even more</a>
  </li>
</ul>

The nav overflow pattern can also be used within a navbar for horizontal navigation that adapts to available space:

HTML

<nav class="navbar navbar-expand bg-1">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <ul class="nav navbar-nav" data-bs-toggle="nav-overflow">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Customizing the toggle

Custom text

Use the moreText option to customize the text shown in the overflow toggle button:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  moreText: 'See all'
})

Custom icon

Provide a custom icon via the moreIcon option. Any HTML string works, including inline SVGs:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  moreIcon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/></svg>',
  moreText: '' // Hide text, show only icon
})

Alternatively, place an element with data-bs-overflow-icon directly inside the nav. The component will pick it up, use it as the toggle icon, and remove the original element from the DOM. This takes priority over the moreIcon option.

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
  <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
  <svg data-bs-overflow-icon xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492"/>
  </svg>
</ul>

Icon placement

Use the iconPlacement option to position the icon before ('start', the default) or after ('end') the text:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  moreText: 'Menu',
  iconPlacement: 'end'
})

Minimum visible items

Use the threshold option to ensure a minimum number of items remain visible before the overflow kicks in:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  threshold: 3 // Always keep at least 3 items visible
})

Collapse all

Use the collapseBelow option to force all items into the overflow dropdown when the nav element’s width is below a threshold. Pass a breakpoint name to resolve the value from --bs-breakpoint-{name}, or a number for a direct pixel value.

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow" data-bs-collapse-below="md">
  <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
</ul>

Or via JavaScript with a raw pixel value:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  collapseBelow: 768
})

Above the threshold, normal progressive collapse resumes. Items with .nav-overflow-keep are never collapsed.

Usage

Via data attributes

Add data-bs-toggle="nav-overflow" to any .nav element to automatically enable the overflow behavior.

Attribute	Description
`data-bs-toggle="nav-overflow"`	Enables responsive overflow handling on the `.nav` element.

HTML

<ul class="nav nav-pills" data-bs-toggle="nav-overflow">
  <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
  <!-- More items... -->
</ul>

Via JavaScript

Initialize the nav overflow component manually:

JavaScript

const navElement = document.querySelector('.nav')
const navOverflow = new bootstrap.NavOverflow(navElement, {
  moreText: 'More',
  threshold: 2
})

Dependencies

The nav-overflow plugin requires the following JavaScript files if you’re building Bootstrap’s JS from source:

File	Description
`js/src/nav-overflow.ts`	Main nav-overflow component
`js/src/base-component.ts`	Base component class
`js/src/dom/data.ts`	Element data store
`js/src/dom/event-handler.ts`	Event handling utilities
`js/src/dom/manipulator.ts`	Data attribute manipulation
`js/src/dom/selector-engine.ts`	DOM selector utilities
`js/src/util/config.ts`	Configuration base class
`js/src/util/index.ts`	Core utility functions
`js/src/util/sanitizer.ts`	HTML content sanitizer

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

All components support a reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Name	Type	Default	Description
`collapseBelow`	number\|string	`0`	Width threshold 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.
`moreText`	string	`'More'`	Text label for the overflow toggle button.
`moreIcon`	string	`'<svg>...</svg>'`	SVG or HTML icon for the overflow toggle button. Overridden by a child element with `data-bs-overflow-icon` if present.
`threshold`	number	`0`	Minimum number of items to keep visible before showing overflow.

Methods

You can create a nav overflow instance with the constructor:

JavaScript

const navOverflow = new bootstrap.NavOverflow('#myNav', {
  threshold: 2
})

Method	Description
`dispose`	Destroys the nav overflow instance and restores items to their original positions.
`getInstance`	Static method to get the nav overflow instance associated with a DOM element.
`getOrCreateInstance`	Static method to get the nav overflow instance or create a new one if not initialized.
`update`	Manually recalculates which items should overflow. Called automatically on resize.

Events

Modus Bootstrap’s nav overflow component exposes events for hooking into overflow functionality.

Event type	Description
`update.bs.navoverflow`	Fired when the overflow calculation is updated (on resize or manual update).
`overflow.bs.navoverflow`	Fired when items are moved to the overflow menu. Event includes `overflowCount` and `visibleCount` properties.

JavaScript

const myNav = document.getElementById('myNav')

myNav.addEventListener('overflow.bs.navoverflow', event => {
  console.log(`${event.overflowCount} items moved to overflow`)
  console.log(`${event.visibleCount} items still visible`)
})

On this page

How it works

Examples

With tabs

With underline

Keep items visible

With disabled items

In a navbar

Customizing the toggle

Custom text

Custom icon

Icon placement

Minimum visible items

Collapse all

Usage

Via data attributes

Via JavaScript

Dependencies

Options

Methods

Events