I’ve been working on porting my ancient main website to Hugo on and off for almost a year. The reason my site hasn’t had a major update in over 20 years is the difficulty in creating site menus.
The original site was designed with a full custom theme in FrontPage with its great drag and drop GUI menu builder. In 20 years I have never found any other tool that makes menu creation so easy. I’d heard the very expensive Macromedia (now Adobe) Dreamweaver has something but I’ve never been able to try it out, and frankly won’t spend that kind of money on a personal website.
Every year I’d search for something with an easy to use menu builder but I’ve never found anything. So I finally gave up and settled for the Hugo static site builder system. It sucks having to create the menu system in plain text but I had to give in.
One thing that has bugged me is that nowhere could I find a definitive explanation of how the menu system sorts entries. Today I persisted in searching and was able to piece together an answer and come up with a methodology that works for me.
Here’s a list of the important points
- Order within the menu configuration text is ignored because Hugo menus can be defined in front matter or in two different ways in the site configuration. This makes it difficult to near impossible to allow a code position sort order.
- The default sort is ascending by weight then alphabetical by name within a menu level
Most of the time I want my menus sorted by name with only one item forced to a specific position, so I’ve come up with this strategy.
- Manually sort the parent and child menu entries in the order you want them to display as a visual reference.
- Assign a weight to each top level (parent) item starting with 10 and incrementing by 10 for each parent level
- Assign the same weight as the parent to each sub level (child) item
- When rendered, if the order is different compared to the desired order, adjust the weight of the menu items to compensate.