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.
Ich habe hier noch zusätzlich der Breadcrumb Navigation im obersten Header-Block eine CSS-Animation gegeben, damit diese Zeile einfliegt. Dazu habe ich diese CSS in den Bereich "CSS Editor" vom "Code Editor" des Blocks geschrieben:
.myslide {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Da in der CSS oben eine Breite von 300% zum Einfliegen von rechts angegeben ist, kann es bei bestimmten Elementen, wie z.B. dem Hamburger Button am mobilen Gerät zu einem Overflow (Überlauf) kommen, daher habe ich das auch noch unterbunden, indem ich diese Style-Anweisung in den Seiteneinstellungen in den Bereich "Inside <head> code" geschrieben habe:
<style>
html {
overflow-x: hidden;
}
</style>
Die class="myslide" setzt ihr dann an den Textbereich, der einfliegen soll.
Natürlich geht das auch mit einem Bild oder was auch immer. Animation erneut starten . Bei Mausüber stoppt die Animation.