Eine Breadcrumb-Navigation steht für eine Navigation, die anhand der aktuellen Verzeichnisstruktur der Webseite dynamisch (d.h. automatisch) erstellt wird.
Bei dieser Art der Navigation ist es als erstes wichtig, die Ordner auf der Webseite logisch nach Inhalt zu benennen und die HTML-Dokumente entsprechend einzuordnen. Zum Beispiel gehören HTML-Dokumente mit dem Thema Urlaub dann in einen Ordner, der auch Urlaub benannt wird. Die ganze Sortiererei ist im Nachhinein sehr mühselig, es sollte beim Aufbau der Webseite gleich auf eine logische Ablage der Dokumente geachtet werden.
Auf der Webseite pflanzenmanufaktur.de habe ich eine entsprechende Breadcrumb-Navigation integriert. Der Vorteil an dieser Navigation ist, dass auf jeder HTML-Seite nur ein PHP-Code-Schnipsel eingefügt wird und der Verzeichnispfad mit den Links oben auf jeder Seite automatisch erstellt wird.
Ich habe diese Navigation dann bei uns im Forum vorgestellt und Tim Gerundt (tim.gerundt.de) hat sich intensiv mit der Umsetzung der Navigation beschäftigt und ein erweitertes PHP-Script mit der Umsetzung der Breadcrumb-Navigation erstellt.
Wir bieten Ihnen diese PHP-Klasse hier zum kostenlosen Download unter GNU-Lizenz an:
Fragen zu dem Script bitte ausschließlich im Homepage-Forum stellen.
Für das CMS WordPress gibt es Breadcrumb-Navigations-Plugins:
- de.wordpress.org/plugins/breadcrumb-navxt – Breadcrumb NavXT – WordPress-Breadcrumb-Plugin
- de.wordpress.org/plugins/breadcrumb – Easy and Light-Weight-Plugin to display breadcrumb navigation to your WordPress-Site
- de.wordpress.org/plugins/breadcrumb-block – mit WooCommerce kompatibler Breadcrumb-Navigations-Block
- de.wordpress.org/plugins/catch-breadcrumb – Catch Breadcrumb
- de.wordpress.org/plugins/breadcrumb-tmc – Breadcrumb TMC
- de.wordpress.org/plugins/woocommerce-breadcrumbs – WooCommerce Breadcrumbs
- de.wordpress.org/plugins/bread-crumb-matching-any-theme-skin – Breadcrumb based on URL
- de.wordpress.org/plugins/flexy-breadcrumb – Flexy Breadcrumb
Eine weitere Möglichkeit, eine Breadcrumb-Navigation zu erstellen, bietet Projectseven an. Falls Sie bereits eines der Navigations-Menüs von Projectseven nutzen, so erstellt das PVII HTML Toolkit Breadcrumb Builder anhand dieser Menüstruktur ein entsprechendes Breadcrumb-Menü. Hier geht es zu dieser Dreamweaver-Erweiterung: projectseven.com/products/html-toolkits/breadcrumb/index.htm
Eine einfache CSS-Breadcrumb-Navigation können Sie natürlich auch von Hand erstellen, dazu noch schick gestaltet mit Cascading Style Sheets: w3schools.com/howto/howto_css_breadcrumbs.asp