---
title: "Create a vertical navigation bar"
canonical: "https://docs.cuesystem.com/space/CVCBP/842563618/Create%20a%20vertical%20navigation%20bar"
format: markdown
---
> Macro (prevnextnav-macro)

---

Select tab TouchPanel1 windows 

![image](media://f75aaa0e-ee98-4d24-ab5a-9eaac57ebe7f)

- Add a Vertical Navigation Bar from the Flat Navigation Bar collection.

- Double-click to enlarge the window with the navigation bar and set the size and position. To do this with the mouse, we need to set the Locked property to No.

![image](media://536b2190-413f-4e64-97ad-eeeb22078c8b)

![image](media://daf76acc-abc1-4082-84a9-016a8bef512e)

- Now we set the texts of the individual navigation buttons on the navigation bar.

![image](media://3787aab8-e11e-4f6d-8af0-c2dbfd0c01ad)

![image](media://b5038471-fa8a-4687-bcec-f9ea085e1a56)

- We will use one text, in which each item will be on a separate line.

![image](media://f0db6683-be55-43b4-92c9-e5665cf58662)

We will change the name of the text itself to txtMainNavigation for easier orientation in the program. 

![image](media://f2d19bf3-7a74-4ed6-8366-6f4d5dd4abe0)

![image](media://4f5b188b-4af4-4b0d-ae45-02957c9b4930)

- Now we set the font color and choose the font that we have already used for the Digital time object.

![image](media://dda96bfd-e769-4fee-98aa-3ce21bdbe2ef)

![image](media://dbc00b1b-3407-4a76-a105-16283fa24467)

![image](media://be09de24-5f21-40a5-b4be-626706d442fa)

![image](media://baf0207c-721e-49e8-84f8-98043d780283)

- Select the navigation bar background color, the selected item color, and the thickness of the line separating the individual items.

![image](media://413298bf-04ff-4261-b2fd-8bdcf73b2173)

![image](media://fc091d7a-4390-4634-8ced-9a2181275a2d)

![image](media://1c4ed5d5-2893-4557-adfa-a657793224dd)

![image](media://4d78e97a-d48f-48d2-85d0-4428d6c762eb)

![image](media://3f343eb3-5e60-4d0d-a9d2-1a001159d968)

- Now we set the icons for each item. We will use an object called Animation for this. This is a special graphic object that can contain multiple images.

![image](media://c6b949d4-d4eb-49d0-bedd-3abf10710a83)

![image](media://a40c49af-2556-46aa-a97f-25481cae2c1a)

![image](media://6b68a53e-dc52-4893-8917-478bf22e2975)

- We will insert individual images from the Cue Icons 1 White 64 collection into the animation. Each icon will be for one item in the Navigation Bar. The icons must be in the same order as the corresponding texts. Icons can be found in the folder where **Cue Visual Composer is installed, in the Data / Pictures / CueIcons1White64 subfolder.**

![image](media://0f4988c0-548c-4af3-bf55-56ab743ba084)

![image](media://e64c11c8-24b1-4649-8a84-aefe7b20bddd)

![image](media://81a1fbe7-5c8d-4268-bba2-4a271bdb6fda)

- Now use the Text Shift and Icon Shift properties to fine-tune the position of the texts and icons to make it look good.

![image](media://43ad9866-f17e-4678-8d3a-9a25bceb7fdf)

![image](media://b087dd0e-293b-43a3-808e-55ad88f079e4)

- We continue by preparing steps that will ensure the correct settings of the application after turning on the panel. Open the touch panel Modules and go to the Main section.
- Open the Autoexec process and enter the commands to open the Main Navigation Bar and Main Page windows after starting the program.

![image](media://89f16e86-294c-48f1-8ea0-29a9bda1d322)

- The commands are MainNavigationBar.ShowObject and MainPage.ShowObject.

![image](media://9388a3d4-3b28-4eef-936d-3ac2e95eb1e2)

> 📝 Advantageously, you can use Intellisense. Start typing the name of the object, **press Control + Space **and intellisense will automatically offer the best continuation of the expression you started typing.

- When you select a completed expression and press dot, the available functions are offered.

![image](media://34591410-eb29-43d1-8127-bae94b08dd74)

![image](media://0e220d23-b9b9-48e3-8cf0-ff5e8b6a7433)

- Now we can simulate the panel.

![image](media://6a21f6cb-5ce2-40f8-a2a8-66b27be2b5e7)

- Click the arrow next to the debug button and select TouchPanel1 Simulation.

![image](media://a87d0db0-c23f-4b8e-89c9-1072824f1a62)

![image](media://ef255f36-c58e-4ce3-9aff-85d8f8fc20a6)

- Now we will add windows to control the individual technologies.

---

> Macro (prevnextnav-macro)