--- title: TopBar Verlinkungen für Ihre Website url: "https://www.toujou.de/tutorials/topbar-actions/" description: "Schritt für Schritt zu den TopBar Actions im toujou-Backend. Tutorial mit │✓ Anleitung│✓ Beispielansicht │✓ Tipps & Tricks" date: 2026-08-06 modified: 2026-08-06 --- # TopBar Verlinkungen für Ihre Website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Tutorials](https://www.toujou.de/tutorials/) 4. [TopBar Actions](https://www.toujou.de/tutorials/topbar-actions/) Arbeiten mit toujou: -------------------- **TopBar Actions** ================== In toujou können Sie für Ihre Website sogenannte TopBar Actions erstellen. Das sind Verlinkungen, die via Icon und Text in der Topbar Ihrer Website erscheinen. So können Sie interne Verlinkungen (z.B. Kontakt o.ä.) und externe Verlinkungen (z.B. Social Media) präsent positionieren. TopBar Actions bieten damit ähnliche Optionen wie die [Quicklinks](https://www.toujou.de/tutorials/quicklinks/), sind aber an einer anderen Stelle auf der Website verortet. [Beispielansicht](https://www.toujou.de/tutorials/quicklinks/#c1019632) [Anleitung](https://www.toujou.de/tutorials/quicklinks/#c1019569) [Hinweise, Tipps & Tricks](https://www.toujou.de/tutorials/quicklinks/#c1019562) [Verknüpfte Elemente](https://www.toujou.de/tutorials/quicklinks/#c1019560) ### TopBar Actions für Ihre Website TopBar Actions erstellen Sie über die Listenansicht des Backends mit einem neuen Datensatz. Diese werden – wie der Namen schon verrät – in der TopBar angezeigt. Bitte beachten Sie, dass diese Möglichkeit aktuell nur im kojo-Theme dargestellt wird. --- Beispielansicht --------------- (aktuell nur im [kojo-Theme](https://www.toujou.de/features/toujou-themes/kojo/) verfügbar) ![Screenshot einer Website, auf der mehrere Menschen in bunten Sesseln sitzen und sich die Hand reichen. Am oberen Rand sind zwei Topbar Actions Links in rot eingerahmt](https://www.toujou.de/_assets/processed/nCkW0vKuYa5dm9R2BjmoW9JREj3RM1gQOLlb06CrFnk/q:85/w:433/h:244/fn:Y3NtX3RvcGJhci1hY3Rpb24tYmVpc3BpZWxhbnNpY2h0XzJjZGFiMDJiMjk:t/cb:f8ca636275d8f7c84754ce0da53d7b3f112532c8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvdG9wYmFyLWFjdGlvbi1iZWlzcGllbGFuc2ljaHQucG5n) --- Schritt für Schritt ------------------- [ ![](https://www.toujou.de/_assets/processed/Rm-2mmGZUM1l_uXhrlHM_Ux2CvEU7M9sx5wFOCGd_DI/q:85/c:2500:1404.4943820225:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX3F1aWNrbGlua3MtZGF0ZW5zYXR6LWVyc3RlbGxlbl85M2E1Yzk5YWMx:t/cb:3cfe93eacb962a4c85dc35dc8bf8ee9bf8d711ee/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy1kYXRlbnNhdHotZXJzdGVsbGVuLnBuZw) ](https://www.toujou.de/_assets/processed/nmOn9x5Bj4gHTQDEAGZ-3jqL3qV5Ve1aI5am653v0MU/q:85/w:1024/h:576/fn:Y3NtX3F1aWNrbGlua3MtZGF0ZW5zYXR6LWVyc3RlbGxlbl8zNTBiMzViZTFk:t/cb:3cfe93eacb962a4c85dc35dc8bf8ee9bf8d711ee/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy1kYXRlbnNhdHotZXJzdGVsbGVuLnBuZw) ### Datensatz erstellen - Stellen Sie sicher, dass Sie die **Listenansicht** in der Modulleiste angewählt haben. - Wählen Sie im Seitenbaum die **Root Page** (Seite mit Globus-Icon). - Klicken Sie anschließend den Button **+ Neuen Datensatz erstellen**. - Es öffnet sich eine neue Seite mit der Datensatz-Auswahl. Klicken Sie unter *Inhalt* auf **Link Collection**. [ ![](https://www.toujou.de/_assets/processed/VvsTO0JJdnnxuvrkJq5qtp580KZhQnz1F3xvC-QvQVQ/q:85/c:1919:1078.0898876404:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX3F1aWNrbGlua3MtdGl0ZWwtaXRlbXNfOTg3MzljMTliNQ:t/cb:ab93cfb5787c9e4c1a99447471ae7c452165935e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy10aXRlbC1pdGVtcy5wbmc) ](https://www.toujou.de/_assets/processed/12UbFv-WYnnuHYBX1kkaA70z-RiS-X6e9VE47TV1zuM/q:85/w:1024/h:576/fn:Y3NtX3F1aWNrbGlua3MtdGl0ZWwtaXRlbXNfMjUwODQxMDk4Yg:t/cb:ab93cfb5787c9e4c1a99447471ae7c452165935e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy10aXRlbC1pdGVtcy5wbmc) ### Titel definieren und Items anlegen - Im Reiter *Allgemein* finden Sie das *Textfeld*. Geben Sie dort den Titel der Collection ein, den Sie in den [Theme-Settings](https://www.toujou.de/tutorials/quicklinks/#c1019566) dann wiederfinden. Ein Titel ist zwingend erforderlich. - Im Bereich *Items* können Sie mit Klick auf **+ Neu anlegen** Items erstellen. Die Mindestanzahl beträgt 1. [ ![](https://www.toujou.de/_assets/processed/M21ZUiuQZLx3vaAcW5cMAO0Qg_v2ybJizrja10gkLnI/q:85/c:1919:1078.0898876404:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX3F1aWNrbGlua3MtaXRlbS1vcHRpb25lbl83NGM3N2MwYTM1:t/cb:11a7c9c9faa55a815cb7c785b9de907e4da973da/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy1pdGVtLW9wdGlvbmVuLnBuZw) ](https://www.toujou.de/_assets/processed/dy83MldAsfNmgQZDqQ1C_RlUPAMgF00_ixkv2W-km8Y/q:85/w:1024/h:576/fn:Y3NtX3F1aWNrbGlua3MtaXRlbS1vcHRpb25lbl83NzI3Y2E0MmYw:t/cb:11a7c9c9faa55a815cb7c785b9de907e4da973da/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvcXVpY2tsaW5rcy1pdGVtLW9wdGlvbmVuLnBuZw) ### Item-Optionen festlegen - Damit ein Item angezeigt wird auf Ihrer Website, muss zwingend ein Link hinterlegt sein. Klicken Sie hierfür im Bereich *Link* auf das **Ketten-Symbol und wählen Sie** die gewünschte Seite aus. Es stehen Ihnen Möglichkeiten zur website-internen Verlinkung (z.B. Kontakt o.ä.) sowie zu externen Verlinkung (z.B. Social Media) zur Verfügung. - Tragen Sie im Textfeld bei *Label* ein, wie das Item benannt werden soll. Das Label erscheint nur im Backend. - Mit der Auswahl eines *Icons* über die Optionen **Datei hinzufügen** und **Dateien auswählen und hochladen** können Sie dem Item ein individuelles Icon hinzufügen. Achten Sie auf ein **svg** als Datei. Ist kein Icon hinterlegt, spielt das System ein Standard-Icon auf der Website aus. - **Speichern** Sie alle Einstellungen. [ ![](https://www.toujou.de/_assets/processed/Tkb71DteL8RLqO5JIWMRDhKS3BL__aKM9dK_8CnGThA/q:85/c:1920:1078.6516853933:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtX3RvcGJhci1hY3Rpb24tdmVya251ZXBmdW5nXzM5NWM2NzU4M2Q:t/cb:016ed21356e60a940c18ffa9c46e813b3a3b3e92/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvdG9wYmFyLWFjdGlvbi12ZXJrbnVlcGZ1bmcucG5n) ](https://www.toujou.de/_assets/processed/kQRUWt3yNsYEuzAqADnyxY03hvzvHcmpEoQzjivQtKo/q:85/w:1024/h:576/fn:Y3NtX3RvcGJhci1hY3Rpb24tdmVya251ZXBmdW5nXzM5ZjQ2NWI3Zjg:t/cb:016ed21356e60a940c18ffa9c46e813b3a3b3e92/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzE5X3F1aWNrbGlua3MvdG9wYmFyLWFjdGlvbi12ZXJrbnVlcGZ1bmcucG5n) ### TopBar Actions in den Theme Settings auswählen - Wechseln Sie in die Modulleiste **toujou Theme**. Navigieren Sie im Reiter *Theme* zum Bereich *TopBar Actions* und wählen Sie eine Collection aus. Klicken Sie hierfür auf das **Dropdown-Menü**. - Speichern Sie die Änderungen. Anschließend erscheinen die Verlinkungen in der TopBar Ihrer Website. --- Hinweise, Tipps & Tricks ---------------------------- Wer TYPO3 kennt, weiß, dass viele Wege nach Rom führen. toujou ist TYPO3. Wir weisen Sie an dieser Stelle auf wichtige Informationen und den einen oder anderen Kniff hin, den Sie bei der Erstellung und Bearbeitung Ihrer Website beachten sollten. Die TopBar Actions bieten somit eine redaktionell einstellbare Möglichkeit, neben Menüreitern weitere wichtige Seiten außerhalb des Footers und der Quicklinks zu platzieren. In der Anzahl der Items – und somit bei der Anzahl der Links – sind Sie prinzipiell frei. Bitte denken Sie jedoch stets daran, dass die TopBar nicht unbegrenzt Platz bietet – je nach Endgerät. Eine sorgfältige Priorisierung und Auswahl ist demnach unerlässlich. Möchten Sie einen Datensatz für die TopBar Actions bearbeiten, suchen Sie über das Listenmodul und mit Auswahl der jeweiligen Seite im Seitenbaum in der Seitenansicht den Link Collection Datensatz und klicken Sie auf den Bearbeiten-Button (Stift-Icon). Basiert Ihre Website nicht auf dem kojo-Theme, stehen Ihnen die themenverwandten [Navigationsicons](https://www.toujou.de/tutorials/seiteneigenschaften/navigationsicons/) zur Verfügung, die Ihnen ebenfalls ermöglichen, in der TopBar eine Verlinkung zu einzelnen Seiten zu generieren. Bitte beachten Sie, dass die Darstellung dieser Option im Frontend theme-abhängig ist. --- Verknüpfte Elemente ------------------- Elemente aus der [toujou-Elementbibliothek](https://www.toujou.de/service/elementbibliothek/), die mit diesen Einstellungen in Verbindung stehen. [Quicklinks](https://www.toujou.de/tutorials/quicklinks/) [Social Media Bar](https://www.toujou.de/service/elementbibliothek/widgets/social-media-bar/) [Card Collections](https://www.toujou.de/service/elementbibliothek/collections/) [toujou-Theme](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [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/)