Aplio
NuxtJs
Navbar

Navbar

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

  • Open the data/NavBarMenuData.json file in your Aplio template project.

  • Locate the direct json file data/NavBarMenuData.json file. This file holds an array of objects representing the navbar items.

Logo

To set the logo of the website displayed on the navbar, go to the public/images folder and add your logo file (e.g., images/logo.svg or images/logo.png). Then, edit the value of logoLight in the NavBarMenuData.json 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 NavBarMenuData.json.

Navbar Button Link

To add a button link to the navbar menu, modify the value of btnLink in the NavBarMenuData.json object. By default, it is set to the request-demo page. Replace the value with the desired URL or route for the button link.

Menu Items

Customize the menu items by editing the objects within the menuData array. Each object represents a menu item and has the following properties:

  • id: An identifier for the menu item.
  • title: The title of the menu item displayed on the navbar.
  • path: The path or URL the menu item should navigate to.
  • newTab: Set this value to true if you want the link to open in a new tab, or false to open in the same tab.
{ "id": 2, "title": "About", "path": "/about", "newTab": false },

Sub Menu Items

To add a submenu item, create a new submenu array inside a menu item object where you want to add the submenu. Inside the submenu array, add objects with the same properties as regular menu items (i.e., id, title, path, newTab).

{ "id": 5, "title": "News", "submenu": [ { "id": 5.1, "title": "blog grid",
"path": "/blog", "newTab": false }, { "id": 5.2, "title": "Blog list", "path":
"/blog-list", "newTab": false }, { "id": 5.3, "title": "Blog categories",
"path": "/categories/Marketing", "newTab": false }, { "id": 5.4, "title": "Blog
tags", "path": "/tags/Benefits", "newTab": false } ] },

Here's an example of adding a new menu item and a submenu item:

{ "id": 2, "title": "About", "path": "/about", "newTab": false }, { "id": 5,
"title": "News", "submenu": [ { "id": 5.1, "title": "blog grid", "path":
"/blog", "newTab": false }, { "id": 5.2, "title": "Blog list", "path":
"/blog-list", "newTab": false }, { "id": 5.3, "title": "Blog categories",
"path": "/categories/Marketing", "newTab": false }, { "id": 5.4, "title": "Blog
tags", "path": "/tags/Benefits", "newTab": false } ] },

By following these steps and customizing the menuData array in the data/data.js file, you can configure the navbar items in the Aplio template according to your preferences.

Create a PageFooter