Vertical Nav

Vertical Nav

The demo is the actual site menu. It will collapse and disappear off-screen when not in use.

Note that there is a HTML element which is set to display none, containing a small script that makes the menu work. I would advise you to keep it at the bottom of your page. Right below the head section is an unstyled container where you can put your site content. It is there to prevent adding something by mistake to the menu or head section.

Editing the menu: Find the container with the class name .sidenav. It has a width of 0px. Change that to e.g. 250px, then it will be visible and can be edited. Set the width back to 0px when you are done.

Hot tip: Make the menu into a 'symbol', so that if you update it on one page, the menu on the other pages will be synced to show the same update.

Placeholder Picture

Download this component for 'mobile-up'

Placeholder Picture

Download this component for 'desktop-down'