Navigationspunkte, die nicht mehr in die Zeile passen, wandern automatisch in ein „Mehr“-Menü – ganz ohne zweites Markup für kleine Bildschirme.

Nav overflow setzt das sogenannte Priority+-Muster um. Du legst eine ganz normale .nav in einen Wrapper mit .nav-overflow und data-bs-toggle="nav-overflow". Das Plugin misst laufend die verfügbare Breite und verschiebt überzählige Einträge in ein Menü.

• Containerbreite statt Viewport: Ein ResizeObserver beobachtet den Wrapper – das funktioniert auch in Sidebars, Karten und eingebetteten Bereichen.
• Wrapper als Messgröße: Gemessen wird der Wrapper, nicht die Nav selbst, weil sich deren Breite beim Einklappen ändert.
• Klonen statt Verschieben: Überzählige Einträge werden ins Menü geklont und im Original ausgeblendet. Nur vorhandene .menu-Elemente werden als Untermenü verschoben.
• Alle Nav-Stile: Standard, Pills, Tabs und Underline.
• Zustände bleiben erhalten: Aktive und deaktivierte Einträge sehen auch im Menü so aus.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiele

Lege die Nav in <div class="nav-overflow" data-bs-toggle="nav-overflow">. Passen nicht mehr alle Einträge hinein, landen die übrigen im „Mehr“-Menü. Verkleinere das Browserfenster, um den Effekt zu sehen.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Start</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Produkte</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Leistungen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Analysen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Berichte</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Einstellungen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Hilfe</a>
    </li>
  </ul>
</div>

Mit Tabs

Das Muster funktioniert genauso mit Tab-Navigation.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Übersicht</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Verlauf</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Aktivität</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Kommentare</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Anhänge</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Verwandt</a>
    </li>
  </ul>
</div>

Mit Unterstreichung

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-underline">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Start</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Funktionen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Preise</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">FAQ</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Über uns</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Kontakt</a>
    </li>
  </ul>
</div>

Einträge sichtbar halten

Einträge mit .nav-overflow-keep wandern nie ins Menü und bleiben unabhängig vom Platz stehen – ideal für wichtige Punkte wie „Start“ oder einen Kontakt-Link.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <li class="nav-item nav-overflow-keep">
      <a class="nav-link active" aria-current="page" href="#">Start</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Produkte</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Leistungen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Über uns</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Blog</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Karriere</a>
    </li>
    <li class="nav-item nav-overflow-keep">
      <a class="nav-link" href="#">Kontakt</a>
    </li>
  </ul>
</div>

Deaktivierte Einträge

Deaktivierte Einträge bleiben auch im Überlauf-Menü deaktiviert.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Aktiv</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Weiterer Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" aria-disabled="true">Deaktiviert</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Mehr Inhalt</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Noch mehr</a>
    </li>
  </ul>
</div>

In einer Navbar

Auch in einer Navbar lässt sich Nav overflow einsetzen – die horizontale Navigation passt sich dann dem verfügbaren Platz an.

<nav class="navbar navbar-expand bg-1">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marke</a>
    <div class="nav-overflow" data-bs-toggle="nav-overflow">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Start</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Funktionen</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Preise</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Über uns</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Kontakt</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Mit Menüs

Hat ein Nav-Eintrag bereits ein Menü, wird es zum Untermenü des Überlauf-Menüs. Das Plugin verschiebt dabei das originale .menu, statt es zu klonen – verschachtelte Untermenüs bleiben so erhalten.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Start</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Dashboard</a>
    </li>
    <li class="nav-item">
      <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
        Produkte
      </button>
      <div class="menu">
        <a class="menu-item" href="#">Laptops</a>
        <div class="submenu">
          <button class="menu-item" type="button">Smartphones</button>
          <div class="menu">
            <a class="menu-item" href="#">iPhone</a>
            <a class="menu-item" href="#">Android</a>
          </div>
        </div>
        <a class="menu-item" href="#">Tablets</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Leistungen</a>
    </li>
    <li class="nav-item">
      <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
        Unternehmen
      </button>
      <div class="menu">
        <a class="menu-item" href="#">Über uns</a>
        <a class="menu-item" href="#">Karriere</a>
        <a class="menu-item" href="#">Presse</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Analysen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Berichte</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Hilfe</a>
    </li>
  </ul>
</div>

Toggle anpassen

Eigener Text

Mit der Option moreText legst du die Beschriftung des Überlauf-Buttons fest.

const wrapper = document.querySelector('.nav-overflow')
new bootstrap.NavOverflow(wrapper, {
  moreText: 'Alle anzeigen'
})

Eigenes Icon

Über moreIcon übergibst du ein beliebiges Icon als HTML-String, auch Inline-SVG.

const wrapper = document.querySelector('.nav-overflow')
new bootstrap.NavOverflow(wrapper, {
  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: false // Icon only
})

Mit moreText: false (oder einem leeren String) erhältst du einen reinen Icon-Button. Es wird dann kein .nav-overflow-text erzeugt, der Button bekommt stattdessen aria-label="More". Willst du einen anderen Namen, schreibst du den Toggle selbst:

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
    <li class="nav-item nav-overflow-item">
      <button class="nav-link nav-overflow-toggle" type="button" data-bs-toggle="menu" aria-label="Weitere Links anzeigen">
        <span class="nav-overflow-icon">…</span>
      </button>
      <div class="nav-overflow-menu menu"></div>
    </li>
  </ul>
</div>

Alternativ platzierst du ein Element mit data-bs-overflow-icon neben der Nav im Wrapper. Die Komponente übernimmt es als Icon und entfernt das Original aus dem DOM. Diese Variante hat Vorrang vor moreIcon.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <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>
  </ul>
  <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>
</div>

Icon-Position

Mit iconPlacement steht das Icon vor ('start', Standard) oder hinter ('end') dem Text.

const wrapper = document.querySelector('.nav-overflow')
new bootstrap.NavOverflow(wrapper, {
  moreText: 'Menü',
  iconPlacement: 'end'
})

Mindestanzahl sichtbarer Einträge

Die Option threshold sorgt dafür, dass immer eine Mindestzahl an Einträgen sichtbar bleibt.

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

Alles einklappen

Mit collapseBelow landen alle Einträge im Menü, sobald der Wrapper schmaler als ein Grenzwert ist. Ein Breakpoint-Name wird aus --bs-breakpoint-{name} gelesen, eine Zahl gilt direkt als Pixelwert.

<div class="nav-overflow" data-bs-toggle="nav-overflow" data-bs-collapse-below="md">
  <ul class="nav nav-pills">
    <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>
</div>

Oder per JavaScript mit Pixelwert:

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

Oberhalb des Grenzwerts klappt die Nav wieder schrittweise ein. Einträge mit .nav-overflow-keep bleiben immer sichtbar.

Verwendung

Per Data-Attribute

Mit data-bs-toggle="nav-overflow" am .nav-overflow-Wrapper wird das Verhalten automatisch aktiviert.

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav nav-pills">
    <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>
</div>

Per JavaScript

Zur manuellen Initialisierung übergibst du den Wrapper – nicht die Nav.

const wrapperElement = document.querySelector('.nav-overflow')
const navOverflow = new bootstrap.NavOverflow(wrapperElement, {
  moreText: 'Mehr',
  threshold: 2
})

Optionen

Optionen lassen sich per Data-Attribut oder JavaScript übergeben.

Methoden

Alle Methoden arbeiten asynchron. Eine Instanz erzeugst du mit dem Konstruktor:

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

Events

Beide Events werden am .nav-overflow-Wrapper ausgelöst.

const myNav = document.getElementById('myNav') // the .nav-overflow wrapper

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