How to Add Menu Items to Your Hugo Site

How to Add Menu Items to Your Hugo Site To add menu items to your Hugo site, you’ll need to modify your site’s configuration file and the front matter of your content files. Here’s how you can do it: Step 1: Update the Configuration File Edit your site’s configuration file (config.toml, config.yaml, or config.json). I’ll use config.toml as an example: # config.toml baseURL = "http://example.org/" languageCode = "en-us" title = "My Hugo Site" theme = "your-theme" [menu] [[menu.main]] identifier = "home" name = "Home" url = "/" weight = 1 [[menu.main]] identifier = "about" name = "About" url = "/about/" weight = 2 [[menu.main]] identifier = "blog" name = "Blog" url = "/posts/" weight = 3 identifier: Unique identifier for the menu item. name: Display name of the menu item. url: URL or path to the page. weight: Determines the order of the menu items (lower weights appear first). Step 2: Update the Front Matter of Content Files Add the menu definition to the front matter of your content files. For example, in a markdown file: ...

February 23, 2025 · 3 min · TC