Skip to Content
Technical Articles
Author's profile photo Christian Happel

A flexible header including top level navigation for your SAP Jam intranet

The modern intranet powered by SAP Jam

A lot of customers are using SAP Jam Collaboration as their modern intranet solution, or have integrated it as their collaboration platform in an existing IT landscape of multiple solutions, all together making up their intranet. (See these videos from customer Sunpower or Durham County)

With the upcoming Q4 release of SAP Jam we now offer these customers a lot more flexibility to customize the header to either change it slightly, add icons to pages or apps they want to have available to every employee from wherever they are in the intranet, or even to completely replace it with an html-based header that aligns with the layout of their already existing intranet solutions.

In this blog I’ll introduce this concept with two examples.


Intranet landscapes consist of multiple apps

SAP offers a wide variety of business applications to its customers, from CRM solutions like SAP Hybris Marketing or SAP Hybris Cloud for Customer, to HR solutions from SuccessFactors, to ERP solutions like S/4HANA.

All these apps can be accessed and launched by employees from the Fiori Launchpad. The Fiori Launchpad then displays the apps, personalized for every user based on his role and authorizations.

Customers who are using SAP Jam as their intranet and any other SAP business application might want to provide a prominent link to the respective Fiori Launchpad.

In a similar way customers might want to provide a link to something like a phone book. In our example we will just use the employee search page of SAP Jam and also highlight that at the top of the intranet page.


How to add top-level navigation buttons in the custom header

Here’s the final result we want to achieve: Two additional icon-buttons in the top left corner, one that launches the Fiori Launchpad, the other one that opens the employee search in SAP Jam.


1. Provide icon pictures

First thing we need to, are the two icons. You can host these icons on any webserver to get a publicly accessible URL for them. The easier way in my opinion though is to just upload them into a public group or into the home page content section in Jam directly.

Once you uploaded them, navigate to it in Jam and do a right click on the Download button and copy a shortcut to the picture directly.


2. Enable custom header

Now that you have the URLs of the pictures you can include them into your header.

For that, go to the branding section in the Admin panel and enable the custom header:


3. Add custom html code

Once you enabled the custom header option you will see html code for the standard delivery of SAP Jam. You can now easily remove certain icons if needed, or you edit the html to exactly how you want it.

In our example we just add the following code before and behind the divider line (<li class=”jdch-divider” aria-hidden=”true”><div>&nbsp;</div></li>):

<a href=”<https://<your SAP Jam datacenter>>”> <img src=”<URL of the people image that you copied earlier>>” alt=”Fiori Launchpad” style=”width:25px;height:25px;”> </a>

<a href=”<URL of your Fiori Launchpad>”> <img src=”<URL of the Fiori Launchpad image that you copied earlier>>” alt=”Fiori Launchpad” style=”width:25px;height:25px;”> </a>

Now save your changes and the header changes as following:



Fully customized sample code

In addition to this simple example you can also try out how a fully customized header would look like. Just use the sample code we published here:

This is how the header will look like using the sample code:



Let us know your feedback and what you come up with in your customized header.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Tobias Schneider
      Tobias Schneider

      Very good and easy description, thanks Christian! 🙂

      Author's profile photo Christian Happel
      Christian Happel
      Blog Post Author

      Updated with a link to sample code that you can use to try out a fully customized header, including third-party code integration.

      Author's profile photo Salai Sivaprakash
      Salai Sivaprakash

      Hi Christian,

      Would it be possible to provide a side navigation bar within a group, for the group members to navigate the content? We are exploring using JAM for content management of our design and process documentations. But the navigation seems to be hard. We are looking to build a menu tree on the side, like in SAP help documentation. Can you give some direction?


      Author's profile photo Christian Happel
      Christian Happel
      Blog Post Author


      There are a couple of ways to tackle this:

      First of all, we are considering allowing to hide the standard left-hand navigation in groups in one of our upcoming releases. This would give you more flexibility in designing the group overview pages of your SAP Jam Collaboration group.

      By default it's possible to define multiple overview pages and sub-pages to allow navigation to the content that is of most relevance.

      One other way to structure content is to use the content widget and filter only for folders. What this doesn't allow is a tree-structure where you can drill into each folder and sub-folder. But you can filter the widget down for exactly the folders you would like to highlight.

      If you really need to build out a tree-like structure you can use a text widget and define links to each folder and subfolder. This isn't dynamic though and would have to be defined manually including all updates.

      Another option would be to just point to the Content section itself and use the native navigation in there.

      Best, Christian


      Author's profile photo Chris Martin
      Chris Martin

      Hey Christian,

      We are just beginning to create a custom header for our Jam sites.  I was excited to see your post, unfortunately the GitHub link is invalid.

      Is there a newer link where I can get the HTML code for the sample header shown above?




      Author's profile photo Christian Happel
      Christian Happel
      Blog Post Author

      Hi Chris,

      you can use the code from here instead:

      Best, Christian