Vertical Menu, Foundation
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 first 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 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.