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.