Static Navigation using ONE Go Template
Three main ways to create a navigation
I have found 3 main ways to create a navigation menu.
- Static menu that not need to be changed
- Dynamic menu created by web server (SSR)
- Dynamic menu created by Javascript (CSR)
Each of them has pros and cons. In this demo I will show you how I did a "static" side navigation.
Why Static menu?
If your site has a small number of pages or the navigation is "fixed", there is no need for dynamic navigation. Using Go Templates you can host both main menu and sub menus in ONE single template. And you can easily support several languages in a static menu.
Why NOT Static menu?
When the menu items grow above a certain level, it soon becomes hard to manage.
Why a 2-level menu?
Using 1-level navigation, the number of items are restricted. Navigation in 2 levels is a good compromise between usability and a higher number of sub menu items. Navigation beyond 2 levels often becomes confusing ("Where am I?").
2-level menus are more flexible. Things change over time and it should be easy to add new stuff without starting over. The 2-level makes it easier to add things without being too hard to navigate.The traditional admin menu with accordion menus is good, but is harder to manage on mobile. And if the number of main menu items are few, the 2-level menu can be split up into a common horizontal top menu and side nav for submenus.
Usability
My rule of "thick thumbs” is no button or clickable area should be smaller than 42px. A compromise between design and usability. This 2-level menu is designed with mobile in mind.