HTML5 Tips: Add a Vertical Menu to Your Site

• Tweet

A site’s menu is one of the most important elements on it. The menu gives visitors an overview of everything the site offers and guarantees a smooth browsing experience. It’s safe to say that the most common menu type is a horizontal one, placed in a prominent spot at the top.

However, some website layouts work better with a vertical menu that is placed on the side (left side for languages that are read left-to-right, and vice versa). Using a vertical menu is great because it breaks with the traditional layout without causing confusion for site visitors. The menu on the side remains clear, and internet users of all kinds already intuitively know to reach out to it.

Though Wix HTML5 templates are all set with horizontal menus, you can easily create a vertical menu on your own by following these steps:

• In the HTML5 editor, delete the horizontal menu from the template

Delete the horizontal menu from the template

• Click Add and choose Buttons & Menus

Click Add and choose Buttons & Menus

• Choose the kind of button you like and add it to your site

Choose the kind of button you like and add it to your site

• To customize the button design, click on it and choose Change Style

Click on it and choose Change Style

• Click Edit Style in the button category you want
• Change colors, shades and font according to your preferences
• When you’re happy with the design, click on the button and choose Duplicate

Click on the button and choose Duplicate

• Repeat this until you have enough buttons for all site pages
• Drag the duplicated buttons and set them up in a straight vertical line

Drag the duplicated buttons and set them up in a straight vertical line

• Now customize each button’s linking – click and choose Settings
• Change the button text according to the relevant page name
• Click on the Add Link field and choose Page

Click on the Add Link field and choose Page

• Select the page you want from the list and click OK

Select the page you want from the list and click OK

• Still in the Settings window, check the “show on all pages” checkbox

Check the “show on all pages” checkbox

• Repeat this for all buttons on the menu
• Save your work and go to Preview mode to check that all buttons are working properly

And – you’re vertical! Enjoy your new menu style and post the link to your website if you want to show off.