Chevron UI to Create More than One Level of Navigation

Overview

Normally, you have the first level of navigation for the prototype with the main tabs at the top and categories on the left side. However, you can have a second level and even a third level of navigation, where the tabs, and categories are all placed at the top.

Step-by-Step Guide

1. Follow the steps to Upload your Model/Create a Visualizer Type. Ensure to upload a flat file.

2. You get a prototype with the first level of navigation i.e. with tabs placed at the top and the sections on the left side.

   
   

3. To get a second or third level of navigation, follow the steps to Edit Group Variable.

   
   
4. Copy the following code and place it just after the flower bracket.

 "nav_bar_lightening": {
    "status": true,
    "tabs": {
      "background_selected": "#1D2847",
      "background": "#1090CF",
      "font_size": "16px",
      "color": "#FFFFFF",
      "color_selected": "#fff",
      "font_weight": 700
    },
    "categories": {
      "font_size": "15px",
      "color_selected": "#1D2847FF",
      "color": "#75b62dFF",
      "font_weight": 700
    }
  },

5. Click Save.

6. Click Prototype or click Value Collaborator to view the changes made.

   
   
   

5. You can see that there are three levels of navigation on the Prototype page.

Decoding the Code

"nav_bar_lightening": {
    "status": true,
    "tabs": {
      "background_selected": "#1D2847",
      "background": "#1090CF",
      "font_size": "16px",
      "color": "#FFFFFF",
      "color_selected": "#fff",
      "font_weight": 700
    },
    "categories": {
      "font_size": "15px",
      "color_selected": "#1D2847FF",
      "color": "#75b62dFF",
      "font_weight": 700
    }
  },

At the Tab Level

1. The term 'background selected' refers to the change in the background color of viewed tabs.

2. The term 'background' refers to the background color of unselected or unviewed tabs.

   
   

3. The terms 'font-size', 'color' and 'font-weight' refers to the size of the font, color of the font and the weight of the font.

   
   
4. The term 'color selected' refers to the font color of the selected or viewed tabs.

At the Category Level

All the terms explained above applies to Categories as well.