Vertical menu, Bootstrap

I found this menu at W3schools. On small screens, and in old browsers that don't support CSS grid, it is off-canvas and can be pulled into view with the 'open' button. In modern browsers, however, it becomes a left-aligned, visible navigation after the second breakpoint.

Initially, as off-canvas, the sidenav column has the width set to zero. In order to edit the nav items, give the nav column a width (e.g.200px), and then change it back to zero when done. It's a good idea to make the 'sidenav' element into a 'symbol', so that you don't have to go around and make updates on several pages.

When hovering over a menu item, Bootstrap seems to have underlined as a default, even though the settings in SD are not showing this. To get rid of the underlining, first apply underlined for the hover state, then apply no decoration (not just removing the style). A bit cumbersome, but that fixes it.

There is a hidden html element at the bottom of the 'main' container. It contains some javascript needed for the slide in/out of the menu, and for the menu width. The width can be edited, I went for 300px. After switching to CSS grid, the grid settings you make will take care of the menu width.

When adding content to the 'main' container, it would be best to keep the html element below other elements. I chose to put the scripts into a html element instead of adding them to the Page manager, where they might be forgotten. But if course, if you prefer using the Page manager, just move the scripts.

To make a component, you need to grab the container 'page-wrapper' and then edit out this text. Make sure you don't happen to delete the hidden html element at the same time, and remember to keep it on every page.

I have made both a Bootstrap and a Foundation version of this menu.