---
title: "Navigationsicons: Anleitung für Symbole in der Topbar"
url: "https://www.toujou.com/service/tutorials/page-properties/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-09-14
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/service/tutorials/)
4. [Page properties](https://www.toujou.de/service/tutorials/page-properties/)
5. [Navigationsicons](https://www.toujou.de/service/tutorials/page-properties/navigationsicons/)

   Navigation icons
================

Navigation icons in the topbar are a useful and visually enhancing tool for website navigation. In toujou all pages in the service navigation of the topbar can be stored as a link. In this tutorial we give you all the information on the [preconditions](#c1010275) and necessary steps.

[Sample view](#c10102693) [Step by step guide](#c1010271) [Pieces of advice](#c1010274)

---

  Sample view
-------------

    [ ![Examples view of a navigation icon next to the burger menu](https://www.toujou.de/_assets/processed/A_IASNWqKPkByuRLE20xz3JCOn9bnQVks5q2vBMQPqo/q:85/w:433/h:270/fn:Y3NtX05hdmlnYXRpb25faWNvbl9iZWlzcGllbF9mMTFlNWE3MDky:t/cb:c1089c1c58c03d8505b5923eba2e7da2d69fb560/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9OYXZpZ2F0aW9uX2ljb25fYmVpc3BpZWwuanBn)        Example of two navigation icons next to the burger menu in medatsu theme (click on the image to go to meet-medatsu.toujou.com).  ](http://meet-medatsu.toujou.com)  ---

  Manual
--------

     [ ![](https://www.toujou.de/_assets/processed/jy3cjehf_owssTmnF2quu9lQONuESfL1q2UdIXk7nBs/q:85/w:433/h:244/fn:Y3NtX2VuLW5hdmlnYXRpb25zaWNvbi1zdGVwLTFfMGRlNzc2ZDA2ZA:t/cb:93ab4b6c9d97ee6916b84fe2367e9dfcbeeec601/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9lbi1uYXZpZ2F0aW9uc2ljb24tc3RlcC0xLnBuZw) ](https://www.toujou.de/_assets/processed/0SPAxNCbtAg57sWoTthennmr98ekfdKan5ch31uXMlg/q:85/w:1024/h:576/fn:Y3NtX2VuLW5hdmlnYXRpb25zaWNvbi1zdGVwLTFfZWIyNDgwYmUyMQ:t/cb:93ab4b6c9d97ee6916b84fe2367e9dfcbeeec601/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9lbi1uYXZpZ2F0aW9uc2ljb24tc3RlcC0xLnBuZw) ### Insert page in Service Navigation folder

- In order to display the icon in the service navigation of the top bar, the corresponding page must be located in the folder Service Navigation. The imprint and privacy page are stored there by default. [Additional pages](https://www.toujou.de/service/tutorials/pages-navigation/#c1004668) can be added at any time.
- If you want to link an already existing page through an icon that shouldn't be stored in this folder, you can create a new page in *Service Navigation* with an [external link](https://www.toujou.de/service/tutorials/pages-navigation/#c1004668). Do not forget to enter the website address in the URL field.

      [ ![](https://www.toujou.de/_assets/processed/WUdPUyAuL10j44JpBGGq4q7hlodv_BGdbKg38l24V98/q:85/w:433/h:244/fn:Y3NtX2VuLW5hdmlnYXRpb25zaWNvbi1zdGVwLTJfYWExNzU5ZjVmNg:t/cb:f02666125fa306aa8e63480046b271693b0c8623/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9lbi1uYXZpZ2F0aW9uc2ljb24tc3RlcC0yLnBuZw) ](https://www.toujou.de/_assets/processed/J6db2iafZI-4XrZMHNLTpjKN04shfLGiuRZtvuLqp0s/q:85/w:1024/h:576/fn:Y3NtX2VuLW5hdmlnYXRpb25zaWNvbi1zdGVwLTJfMzcwNGI0MTI1NQ:t/cb:f02666125fa306aa8e63480046b271693b0c8623/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA4X3BhZ2VfcHJvcGVydGllcy9OYXZpZ2F0aW9ucy1JY29ucy9lbi1uYXZpZ2F0aW9uc2ljb24tc3RlcC0yLnBuZw) ### Add a navigation icon

- To select a navigation icon for a page, click the **page properties** of the page you want an icon to associate with.
- Select in the *General* tab the desired icon in the *Navigation Icon* section by clicking the dropdown menu. toujou offers you about 50 icons.
- **Save** the settings.

 ---

 Pieces of advice
----------------

Displaying the navigation icons on your website needs two conditions to work. Your website has to run on the **[medatsu theme](https://www.toujou.de/features/toujou-themes/medatsu/)**. You can check to see which theme you have in the [toujou settings](https://www.toujou.de/service/toujou-set-up/theme-settings/#c1001543). It is also necessary that the pages are stored in the **Service Navigation folder**.

In toujou you will find about **50 navigation icons** by default. Please contact our [service team](mailto:service@toujou.com) if you can't find the icon you are searching for.

**Responsive Design**: The space in the topbar on mobile devices is limited. Please keep this in mind when choosing the number of icons.