--- title: "Configuring primary navigation" slug: "header-primary-navigation" description: "Add custom menu-like navigations on your Knowledge base site. Document360's header's primary navigation is the bar next to the logo at the top." tags: ["Navigation", "Customization"] updated: 2026-01-07T23:56:12Z published: 2026-01-31T09:30:11Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Configuring primary navigation The primary navigation header of Document360 is the top bar of your site. You can add menus in this space that help readers navigate to different pages from your Home page or Knowledge base site. --- ## Watch: How to customize the primary navigation in your Knowledge base site [Embedded content](https://www.floik.com/embed/6c8153d2-2726-4c62-b723-2bd209ff8c39/8f874a61-9f21-4d92-a1a6-04dc7e4186cd-flo.html) --- ## Accessing the Header - Primary navigation To access the customization settings of the header’s primary navigation, 1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Knowledge base site** > **Customize site**. 3. This page holds all the basic site design configurations. 4. Click **Customize site**. 5. Select **Site header & footer** from the dropdown available on the left navigation pane. 6. Expand the **Header** option and select **Primary navigation**. ![](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/GIF-Configuring_primary_navigation.gif) 7. Click **Add new item** to add a navigation menu either to the left or the right of the site header. The available navigation types are - Home - Documentation - Custom URL - Call to action - RSS feed - Ticket deflector - Glossary - API documentation - Custom page ![Image showing types of navigation available to add in the header](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767830109363.png) > [!NOTE] > ** NOTE > > You can only add up to 6 new items to the header. On exceeding the limit, you will get a warning prompt below the left navigation pane stating, "You have reached the maximum count of 6. To add a new link, remove one existing link." 1. Click the **default background color** to open the color picker and change the color of the primary navigation of the header. 2. **Edit**, **delete**, or **reorder**the menus using the options in the left navigation pane.![6-Screenshot-Accessing_the_Primary_navigation_left_pane_options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1730220371154.png) 3. Click **Preview** to see how your changes will appear on the knowledge base site. 4. Click **Save******to save your changes without applying them immediately. 5. Click **Publish******to make your recent changes visible to readers. 6. Click the **More** (**) icon and select **Reset to published version** to discard all saved and unsaved customizations and revert to the last published version. > [!NOTE] > ** NOTE > > The **Reset to published version** feature is available only for new Knowledge base site 2.0 projects created after March 29, 2025. ![Document360 interface showing primary navigation and settings with a warning message.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767830138116.png) ### Knowledge base site view ![7-Screenshot-Primary_navigation_KB_view](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/7-Screenshot-Primary_navigation_KB_view.png) --- ### FAQs #### How can I customize the header in Document360? To customize the header, you can add custom JavaScript code in **Settings** (**) >******Knowledge base site******>******Customize site** > **Custom CSS & JavaScript** in the Knowledge base portal. This allows you to modify the header to include additional elements, such as links or icons. #### Can I add social media icons to the header in Document360? Yes, you can add social media icons by appending links and icons to the header navigation area using custom JavaScript. For example, you can include icons for LinkedIn, Twitter, Facebook, and Instagram. #### How can I dynamically create a feedback link in the header? You can use JavaScript to create a feedback link dynamically. For example, a `mailto` link can be appended to the header with the current page title as the email subject. This allows users to send feedback about a specific page directly. #### How do I add buttons to the Knowledge base site header? You can add colorful buttons to the Primary navigation header by following these steps: 1. Navigate to **Settings** (**) in the left navigation bar****in the Knowledge base portal. 2. In the left navigation pane, navigate to **Knowledge base site** > **Customize site**. 3. This page holds all the basic site design configurations. 4. Click **Customize site**. 5. Select **Site header & footer** from the dropdown available on the left navigation pane. 6. Expand the **Header** option and select **Primary navigation**. 7. Click **Add new item**to add a navigation menu either to the left or the right of the site header. The **Add new item** panel will appear. 8. In the **Select type** dropdown, choose **Call to action**. 9. Fill in the following fields: 1. **Title**: Enter the text to display on the button. 2. **Link**: Add a hyperlink, email address, or telephone number. 3. Select the desired text color and background color. 10. Select the **Open link in new tab** checkbox to open the link in a new tab. 11. Click **Add**. ![Adding a call to action button in the Knowledge base site header.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1767830165525.png)