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 dropdown 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" dropdown 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" dropdown. Drag the right edge of the container below to see how nav items automatically move to the "More" dropdown 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-body-tertiary">
  <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:

JavaScript

const nav = document.querySelector('.nav')
new bootstrap.NavOverflow(nav, {
  moreIcon: '<i class="bi bi-three-dots"></i>',
  moreText: '' // Hide text, show only icon
})

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
})

Usage

Via data attributes

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

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
})

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".

As of Bootstrap 5.2.0, all components support an experimental 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
`moreText`	string	`'More'`	Text label for the overflow toggle button.
`moreIcon`	string	`'<svg>...</svg>'`	SVG or HTML icon for the overflow toggle button.
`threshold`	number	`0`	Minimum number of items to keep visible before showing overflow.

Methods

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started, but before it ends. In addition, a method call on a transitioning component will be ignored. Learn more in our JavaScript docs.

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

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`)
})

Nav overflow

How it works

Examples

With tabs

With underline

Keep items visible

With disabled items

In a navbar

Customizing the toggle

Custom text

Custom icon

Minimum visible items

Usage

Via data attributes

Via JavaScript

Options

Methods

Events