Skip to Content
Author's profile photo Karol Kalisz

Design Studio SDK: Side Navigation Component

There is already Design Studio SDK: (dynamic) Accordion Component, there is a Design Studio SDK: Tree Component. And now in SAPUI5 version 2.34 there is a new component for navigation purposes.. SAPUI5 Explored Side Navigation.

Since today you can use this control in Design Studio.

The Use Case

you want to create a side navigation which is collapsable (only icons are visible) and expandable (then the texts are visible).

The component has 2 sections – one on the top and second (fixed) on bottom side.

It looks like this (expanded and collapsed):


Functions are quite simple.

1. You can collapse and expand (property and script)

2. you can define items – in 2 levels (the original component has undefined number of levels, but in design studio we have only 2)

3. you can also define fixed items (those bound from bottom)

In Runtime

when collapsed, you see only icons and the menu is a popup.


When expanded, it looks like a accordion or at least very similar.



to avoid collisions in keys, there are 2 events with example script.


APPLICATION.log(“Sel: ” + SIDENAVIGATION_1.getItemSelectedKey());


APPLICATION.log(“Sel: ” + SIDENAVIGATION_1.getFixedItemSelectedKey());

with this you can react on the selection.

Events & Spec

The button has selection event, press event and in the specification you can also use multi select. If you use single select, you can use toggle mechanism (pressed button is marked) or just a button w/o marking selection.

Help / API Specification

Go directly to the help site and find the component:

Download & Use

This component is available on the community package, as in SCN Design Studio SDK Development Community

Example as BIAPP:


org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual…

Enhancements Ideas?

in this case it is just a start of development…

if you have good ideas (to those who would like to contribute but cannot code…) – place an “issue” with tag “enhancement” under Issues · org-scn-design-studio-community/sdkpackage · GitHub

Assigned Tags

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

      Hi karol,
      I tried using side navigation.
      However, an accordion different from the one I clicked on will be opened.
      Do you know about this behavior?
      Also, are you planning to release a new version of Side Navigation?

      Waiting for your reply.

      Thanks in Advance.


      Author's profile photo Karol Kalisz
      Karol Kalisz
      Blog Post Author

      can you please make some screenshot of your accordion?

      Author's profile photo Martin Pankraz
      Martin Pankraz

      Hi Karol,


      I can confirm Kousuke's finding. Whenever you have an item with expander and you click on it, every other "collapsed" item will uncollapse as well. It seems the collapse event happens for the whole sidenavigation instead of per item. Would you mind looking at it?


      Kind regards


      Author's profile photo Martin Pankraz
      Martin Pankraz

      Hi Karol,


      I added the sap belize theme to our shared library to make sure the sidenavigation renders correctly with Lumira 2.x.


      Kind regards


      Author's profile photo P. Loman
      P. Loman

      Hello Karol,

      We are trying to use this component in our application but or not able to add a subitem via a script.

      The script we are using is: SIDENAVIGATION_1.addItems("parentkey","subkey","subtext"," ");

      Do can you help us out and tell us what we are doing wrong?

      Kind regards,