--- title: "Navigationsicons: Anleitung für Symbole in der Topbar" url: "https://www.toujou.de/tutorials/seiteneigenschaften/navigationsicons/" description: Schritt-für-Schritt Anleitung um Icons in der Topbar einer toujou-Website zu implementieren. Inklusive Beispielansicht sowie nützlichen Hinweisen. date: 2021-08-04 modified: 2022-09-27 --- # Navigationsicons: Anleitung für Symbole in der Topbar 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/tutorials/) 4. [Seiteneigenschaften](https://www.toujou.de/tutorials/seiteneigenschaften/) 5. [Navigations-Icons](https://www.toujou.de/tutorials/seiteneigenschaften/navigationsicons/) Navigation-Icons ================ Navigation-Icons (dt.: Navigationssymbole) in der Topbar sind ein nützliches und optisch aufwertendes Hilfsmittel für die Navigation auf der Website. In toujou können alle Seiten in der Servicenavigation der Topbar als Link hinterlegt werden. In diesem toujou-Tutorial erläutern wir alle [Voraussetzungen](#c1010088) und notwendigen Schritte. [Beispielansicht](#c1010083) [Anleitung](#c1010085) [Hinweise, Tipps & Tricks](#c1010088) --- Beispielansicht ----------------- [ ![Beispielansicht eines Navigation-Icons neben dem Burger-Menü](https://www.toujou.de/_assets/processed/A_IASNWqKPkByuRLE20xz3JCOn9bnQVks5q2vBMQPqo/q:85/w:433/h:270/fn:Y3NtX05hdmlnYXRpb25faWNvbl9iZWlzcGllbF9mMTFlNWE3MDky:t/cb:c1089c1c58c03d8505b5923eba2e7da2d69fb560/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fYmVpc3BpZWwuanBn) Beispiel von zwei Navigation-Icons neben dem Burger-Menü im medatsu-Theme (mit Klick auf das Bild gelangen Sie zu meet-medatsu.toujou.com). ](http://meet-medatsu.toujou.com) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/VtiWFtRrB5qiU4SbfGHwEuLencsNaH9ZOpjJxARFnCo/q:85/w:433/h:270/fn:Y3NtX05hdmlnYXRpb25faWNvbl9TZWl0ZV9pbV9PcmRuZXJfMmI5YWM4NmExZg:t/cb:18fb7bc458f1cba7d317561c5a5c9dc3f6516472/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fU2VpdGVfaW1fT3JkbmVyLmpwZw) ](https://www.toujou.de/_assets/processed/YpIHVC8EXoMfY3TKsRYBIt5fXXLDzLGFkSakCn0NF68/q:85/w:1024/h:639/fn:Y3NtX05hdmlnYXRpb25faWNvbl9TZWl0ZV9pbV9PcmRuZXJfNTUxOWVmYTY0MQ:t/cb:18fb7bc458f1cba7d317561c5a5c9dc3f6516472/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fU2VpdGVfaW1fT3JkbmVyLmpwZw) ### Seite im Ordner *Service Navigation* ablegen - Damit das Icon in der Service-Navigation der Topbar ausgespielt wird, muss die entsprechende Seite in toujou im Ordner *Service Navigation* verortet sein. Standardmäßig sind die Impressum- und Datenschutz-Seite dort hinterlegt. Weitere [Seiten können jederzeit hinzugefügt](https://www.toujou.de/tutorials/seiten-anlegen/#c1001669) werden. - Möchten Sie eine bestehende Seite mittels Icon verlinken, die nicht in diesem Ordner abgelegt ist, legen Sie eine neue Seite im Ordner *Service Navigation* als [externen Link](https://www.toujou.de/tutorials/seiten-anlegen/#c1001669) an. Vergessen Sie hierbei nicht, die Website-Adresse im Feld *URL* einzutragen. [ ![](https://www.toujou.de/_assets/processed/S-HnOQIcPnFK_wjmRbz2EDsPaZuP6D8D5djwqKPvVn8/q:85/w:433/h:270/fn:Y3NtX05hdmlnYXRpb25faWNvbl93YWVobGVuX2QyNTY2ZDk1YWM:t/cb:a61c287f7a68f9565fd9dbab14cfd2518589f01f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fd2FlaGxlbi5qcGc) ](https://www.toujou.de/_assets/processed/egHkKvEe0gA6mgmcmx_QbeZyEv2TbG3RN2TyJPhbfAM/q:85/w:1024/h:639/fn:Y3NtX05hdmlnYXRpb25faWNvbl93YWVobGVuXzM0YTA2YmNmODI:t/cb:a61c287f7a68f9565fd9dbab14cfd2518589f01f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fd2FlaGxlbi5qcGc) ### Navigation-Icon hinzufügen - Um ein Navigation-Icon für eine Seite auszuwählen, klicken Sie auf die **Seiteneigenschaften** der Seite, die Sie mit einem Icon verknüpfen möchten. - Im Reiter *Allgemein* wählen Sie im Bereich *Navigation Icon* per Klick auf das Dropdown-Menü das gewünschte Icon aus. Hier steht Ihnen eine Auswahl von circa 50 Symbolen zur Verfügung. - **Speichern** Sie anschließend die Einstellungen. --- Hinweise, Tipps & Tricks ---------------------------- Das Anzeigen der Navigation-Icons im Frontend wird durch zwei Punkte bedingt: Einerseits muss Ihre Website auf dem **medatsu-Theme** laufen. Diese Einstellung prüfen Sie in den [toujou settings](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/#c1001543). Andererseits müssen die Seiten, die mit einem Icon versehen werden sollen, zwingend im **Ordner Service Navigation** abgelegt sein. Nur dann werden die Navigations-Icons in der Topbar neben dem Burger-Menü dargestellt. In toujou sind standardmäßig circa **50 Navigations-Icons** für etliche Anwendungsfälle hinterlegt. Bitte wenden Sie sich an unseren [Service](mailto:service@toujou.de), falls nicht das Richtige für Sie dabei ist. **Responsive**: Der Platz auf mobilen Endgeräten ist begrenzt. Bedenken Sie dies bei der Anzahl der Icons, die Sie in die Topbar aufnehmen. --- Verknüpfte Elemente ------------------- Elemente und Tutorials, die mit diesen Einstellungen in Verbindung stehen. [Seiteneigenschaften](https://www.toujou.de/tutorials/seiteneigenschaften/) [Alle Elemente im Überblick](https://www.toujou.de/service/elementbibliothek/#c1001362) [Alle Tutorials im Überblick](https://www.toujou.de/tutorials/#c1001602) --- [ ![Website-Vorlagen für verschiedene Branchen](https://www.toujou.de/_assets/processed/jkDyPijbF4gDmMkzxd3MPG8oBAfAyHQ4LoqjH-ZHv8c/q:85/c:2754:1700:fp:0.5:0.5/rt:force/w:608/h:375/fn:Y3NtX1RlbXBsYXRlX092ZXJ2aWV3X25ldV8yMDIyXzllZGJiN2UwMDk:t/cb:b62d1a62d7fcde2e49e32c2d4fdb8799c6326f5a/bG9jYWw6L2ZpbGVhZG1pbi9UZW1wbGF0ZV9PdmVydmlld19uZXVfMjAyMi5wbmc) ](https://www.toujou.de/typo3-demo/#c1006221) Schnell gestalten und bequem verwalten -------------------------------------- Testen Sie in einer kostenlosen und unverbindlichen Demo alle Möglichkeiten mit toujou. Wählen Sie aus zahlreichen [Website-Vorlagen](https://www.toujou.de/templates/#c1009307) für unterschiedliche Branchen oder erstellen Sie Ihre professionelle Firmenwebsite von Grund auf selbst. [Direkt loslegen](https://www.toujou.de/typo3-demo/#c1006221) ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)