Aplio
Hugo
Navbar

Navbar

Configuring Navbar Items are very straightforward. To configure the navbar items in the Aplio template, follow these steps:

  • Open the hugo.toml file in your Aplio template project.

Logo

To set the logo of the website displayed on the navbar, go to the themes/static/images folder and add your logo file (e.g., images/logo.svg or images/logo.png). Then, edit the value of logo in the hugo.toml file to match the path and filename of your logo file. To change log in dark mode, follow the same process and replace the value of logDark in the hugo.toml.

Menu Items

Customize the menu items by editing the objects within the [[menus.main]]. Each object represents a menu item and has the following properties:

  • identifier: An identifier for the menu item to set the parent.
  • name: The name of the menu item displayed on the navbar.
  • pageRef: The path or URL the menu item should navigate to.
  • weight: Set this value set order of the menu items.
[[menus.main]]
  name = "About"
  identifier = "about"
  pageRef = "/about"
  weight = 2

Sub Menu Items

To add a submenu item, create a new [[menus.main]] . Inside the [[menus.main]] , add a new property named parent along with the other main menu properties. add the identifier name of the parent menu here.

[[menus.main]]
  name = "Home 5"
  pageRef  = "/home-5"
  parent = "home"
  weight = 15

By following these steps and customizing the [[menus.main]] array in the hugo.toml file, you can configure the navbar items in the Aplio template according to your preferences.