Navbar
Configuring Navbar Items are very straightforward. To configure the navbar items in the GrowthUS template, follow these steps:
-
Open the
data/data.js
file in your GrowthUS template project. -
Locate the
const menuData
variable in thedata/data.js
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 logo
in the data.js
file to match the path and filename of your logo file.
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 contact 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: 6,
title: "Blog",
path: "/blog",
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)
.
submenu: [
{
id: 71,
title: "Service Details",
path: "/services/design-service",
newTab: false,
},
],
Here's an example of adding a new menu
item and a submenu
item:
{
id: 6,
title: "Blog",
path: "/blog",
newTab: false,
submenu: [
{
id: 71,
title: "Service Details",
path: "/services/design-service",
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 GrowthUS template according to your preferences.