Growthus
Nextjs
Navbar

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 the data/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.