In Part I of this series, we created the design for a navigation bar. Unfortunately, none of the navigation links are functional yet. Time to change that!

Objectives

We will implement the following features:

• Clicking the company logo leads to the home page.
• Clicking the home button also leads to the home page.
• Clicking Services leads to a page explaining the what the company can do for its users.
• Clicking Login and Register leads to the pages we made in the previous tutorials.

Before we can route to the homepage, we must first create it. Follow the steps in Part I of this series for a detailed explanation. Check that your new homepage appears in the template hierarchy.

Company logo

To get started, go to the navigation bar master template from the previous tutorials. Click the image component that represents the company logo. Navigate to the Actions tab in the component menu and click the plus button. After renaming the new action, it will appear in the list:

The action should consist of the following function calls:

Configure the Route to page component to link to the homepage:

Done! Clicking the company logo will now lead the user to the homepage.

Other links

Titles and planes cannot be used as links in NoCode-X yet. This section will be updated when this feature becomes available.

Changing the cursor

You may have noticed that when you hover over the titles of the navigation bar in preview, your cursor will turn into an I-beam shape. This makes it seem like our links aren’t really links at all. Let’s change that.

Click one of the titles, open the Style tab in the component menu and go to the Style subsection, as seen below:

In the top right, click the On hover button. These are the styling options for the title that become visible when the user hovers their cursor over the component. Scroll down and select the type of cursor you want.

You can also add other effects to the title in the On hover menu. For example, changing its background color when the user hovers over it will make it clear that this is a clickable button. Experiment with the different styling options to create your ideal navigation bar. More details about styling components can be found in the Component Style article.

Up next

In the next tutorial, we will explore how to create two types of users: patients and doctors. Each should have access to their own page. A third type, administrators, should be able to access both pages.