Skip to main content

Navbar Menu - Layout Component

This component allows you to add a navigation bar or a header menu to help end-users to navigate through your web application and access information.

Accessing a Navbar​

To add a navbar, go to the “Layout” category under the Components panel and drag and drop the "Navbar" component in the canvas.

DrapCode Builder Adding Navbar

Anatomy of a Navbar​

The navbar component is made up of the following layers:

  • Navbar: The outermost layer of the Navbar component which contains the link component and the navbar container.
  • Navbar Container: It comprises the second layer of the navbar component which contains the layer of “Navbar Navigation”.
  • Link: It also comprises the second layer of the navbar component. It allows you to add a link in the navbar.
  • Navbar Navigation: The third layer of the navbar component contains menu links to land on different pages.
  • Menu Link: The fourth layer of the navbar component contains the name of the page link to guide the end-user.
DrapCode Builder Adding Container

Adding Page Links in Navbar​

To add page links to navbar, click on the menu link you want to edit and open its settings. Under the page settings, choose the page you want users to land on after clicking on that menu link and tick the checkbox, as "Open in new tab" if you want.

DrapCode Builder Linking Navbar