How to make vertical tabs?

[Peder_Pedersen]

How do I create well-functioning vertical tabs that also look good on mobile phone screens?

[noahlovell]

Maybe a little late for what you need - but sharing for those who pass by this topic in the future.

With a few lines of code, it’s achievable

What you’ll need:

• A vertical menu element
• A multistate box

The code:

$w.onReady(function () {
    $w("#verticalMenu").menuItems = [{
            label: "Sets",
            id: "sets"
        },
        {
            label: "New",
            id: "new"
        }
    ]

	$w("#verticalMenu").onItemClick((event) => {
		let clickedId = event.item.id
		$w("#multiStateBox").changeState(clickedId)
	})
});

Here’s what happens:

• We set the vertical menu items via code - providing a label and id.
• When an item in the vertical menu is clicked, we get the id of that item
• We change the state of the multistate box according to the id.

It’s important to note that the id in the menu, should match the ids of the multistate box states.

Put it in a stack adn you’ll get something like this:

Note this demo applies to the Studio editor. Similar code would be needed on the Wix Editor.