Section Menu

Display a contextual site-wide navigation with links.

After Dark uses Hugo’s Section Menu for “Lazy” Bloggers to create a site-wide navigational aid. The section menu is disabled by default.

Interactive Example

Enable it from menu.main layout config in your site configuration:

[params.layout.menu.main]
  hidden = true # set `false` or remove to show section menu

With the menu enabled navigation links will begin appearing automatically on a per-section basis whenever Published Content is available within that section.

Customizing

Adjust link names and menu positions by adding the following code block to your Site Configuration and modifying it to meet your needs:

[[menu.main]]
  name = "Home"
  weight = 1
  identifier = "home"
  url = "/"

[[menu.main]]
  name = "Posts"
  weight = 2
  identifier = "post"
  url = "/post/"

Exclude menu items by identifier:

[params.layout.menu.main]
  exclude = ["home", "post"] # exclude homepage and blog postings

Decorate links with SVG icons using pre and post:

[[menu.main]]
  name = "Search"
  identifier = "search"
  url = "/search/"
  post = "<svg aria-hidden=\"true\" class=\"i-search\" viewBox=\"0 0 32 32\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\"><circle cx=\"14\" cy=\"14\" r=\"12\" /><path d=\"M23 23 L30 30\" /></svg>"

Link to stand-alone pages using Front Matter menu setting:

title = "About"
menu = "main"

Change the link title to differentiate from page:

title = "About Us"
menu = "main"
linktitle = "About"

Position items using Menu Entry Variables for more control:

title = "About Us"
[menu.main]
  name = "About"
  weight = 5

Provide your own config settings for use in Custom Layouts:

[params.layout.menu.main.custom]
  social_icons = ["telegram", "mastodon", "matrix"]

And access them via your customized navmenu.html, if present:

{{ range .settings.custom.social_icons }}
  {{ partial "social-links.html" . }}
{{ end }}

Create a second menu immediately after the first:

[[menu.main]]
  name = "Posts"
  weight = 2
  identifier = "post"
  url = "/post/"

[[menu.utility]]
  name = "Email"
  weight = 1
  identifier = "email"
  url = "mailto:d0x3d@posteo.com"

And position it to the right using Custom Styles:

.hack > header {
  display: grid;
  grid-template-columns: 1fr minmax(min-content, auto);
  column-gap: 20px;
  grid-template-areas: "nav nav";
}

See Menus in Hugo for additional capabilities. For help with CSS Grid Layout get your feet wet at cssgridgarden.com.