1. Home
  2. Docs
  3. NoCode-X Documentation
  4. Tutorials
  5. Create a secure medical platform with NoCode-X (part III): Making the navigation bar functional

Create a secure medical platform with NoCode-X (part III): Making the navigation bar functional

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!


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 component actions tab for the company logo.

The action should consist of the following function calls:

Route to homepage action with its function calls visible.

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

The arguments tab for the invocation configuration of the route to page function call.

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:

Style section for the home button.

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.

Was this article helpful to you? Yes No

How can we help?