Mobirise Tutorials

Breadcrumb Navigation

Breadcrumbs heißt auf Deutsch Brotkrümel und zeigt den Pfad zur aktuellen Webseite an. Diese Darstellung soll zu einer besseren Orientierung innerhalb einer Website dienen. Den Namen Breadcrumbs hat diese Navigation in Anlehnung an das Märchen "Hänsel und Gretel" erhalten, bei dem die Kinder Brotkrumen auf den Weg fallen lassen, um den Weg wieder zurückfinden zu können.

Hier ein einfaches Beispiel, wie man eine Breadcrumb Navigation darstellen kann. Dies ist der Pfad zu der aktiven Seite. Ich habe hier dieses "Bootstrap 5" Beispiel verwendet, das man dann also händisch in die jeweilige Seite einfügt:

https://getbootstrap.com/docs/5.0/components/breadcrumb/

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="../index.html" class="text-primary">Mobirise Tutorials</a></li>
    <li class="breadcrumb-item"><a href="./index.html" class="text-primary">Tutorials</a></li>
    <li class="breadcrumb-item active" aria-current="page">Breadcrumb</li>
  </ol>
</nav>

Weiterhin habe ich im Header Block dieser Seite der Breadcrumb Navigation etwas CSS gegeben und damit die Farben für die aktive Seite und die > Trennzeichen verändert. Diese CSS habe ich im Bereich "CSS Editor" vom "Code Editor" dieses Blocks eingefügt:

.active {
  color: white;
}
.breadcrumb-item + .breadcrumb-item::before {
 color: white;
}

Dabei habe ich für die Link-Farbe die Bootstrap class="text-warning" und im unteren Beispiel die class="text-primary" verwendet.


Es gibt Möglichkeiten eine solche Navigation entweder über JavaScript oder auch über PHP generieren zu lassen. Der Aufwand steht aber kaum im Verhältnis zum Erfolg.

Für die allermeisten Mobirise-Projekte macht das natürlich keinen Sinn, da Mobirise ohnehin alles in das Stammverzeichnis des Projektes publiziert und es gar keine Unterverzeichnisse gibt. Das würde also eher für mehrere, ineinander verschachtelte Projekte in Frage kommen.