Navbar

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

Open the data/navbar.json file in your Aplio template project.
Locate the const menuData variable in the data/navbar.json file. This variable 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 navbar.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 data.json.

Navbar Button Link

To add a button link to the navbar menu, modify the value of btnLink in the menuData 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: 51,
      title: "Service Details",
      path: "/services/design-service",
      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: 51,
      title: "Service Details",
      path: "/services/design-service",
      newTab: false,
    },
  ],
},

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

Create a New Page Footer