🍃 Hugo Theme Dream 3.5 introduces Zen mode. Read more →
Custom Nav Items

Append Custom Items to the Navbar

This doc will guide you on how to append custom items to the navbar.

You can add arbitrary items to the navbar by setting the [params.navItems] in your hugo.toml, below is an example:

💡

For a good visual experience, it is recommended not to add too many customisation items, i.e. just highlight the navigation items you want the user to see.

[params]
[params.navItems]
series = { href = "/series", icon = "planet", title = "Series" }
github = { href = "https://github.com/g1eny0ung", target = "_blank", icon = "logo-github", title = "GitHub" }

In this example, we define two keys series and github under params.navItems, Dream will find them and append them to the navbar by default.

You can also reorder custom items with the default items by setting the reorderNavItems parameter in your hugo.toml:

reorderNavItems = ["github", "search", "rss", "posts", "categories", "tags", "series"]

The same goes for collapseNavItems, you can also collapse custom items to a dropdown menu:

collapseNavItems = ["series"]

The next section will describe the properties in the sub-tables we used in the example before.

Properties

Each sub-table (object) can have the following properties.

Required

  • href: The URL of the item.
  • title: The title of the item.

Optional

Migrate to v3