Discuss

Vertical Navigation

On this page

In this tutorial we will show you how to create a vertical Navigation for your site, which for example, you can place in your sidebar.

We have a really simple layout - two columns, one has a width of 3cols and the other one 9cols. We want to add a sidebar menu in the left column:

Screenshot_1|690x368

Click the add inside button:

Screenshot_2|690x368

Open Lists and select Nav:

Screenshot_3|690x368

Then click the add inside button for the Nav:

Screenshot_4|690x368

And add Nav Item:

Screenshot_5|690x368

Add as many Nav items, as you need. You see that they are aligned horizontally, and not vertically as we need them:

Screenshot_6|690x368

Select the Nav component in App Structure and then under Flex Flow select Direction: Vertical:

Screenshot_7|690x368

The Nav Items are now vertically aligned an take 100% of the column width. Now you can style them as you need, using the Text color and background properties in the Properties Panel:

Screenshot_8|690x368


WapplerPrevious|101x31   WapplerNext|77x31