Navigate From One Page to Another

In this section, we will talk about how to use navigations on Monday Hero and edit them.

Adding navigation to your app is necessary to provide a well-structured user experience. You can direct your users from one page to another according to their actions within your app. In this way, your users complete the tasks they need to complete without getting lost in the application.

Adding Navigation

1. Click the 'Navigations' from the menu at the left and select an entry page. This is the first page your users will interact when they launch your app. Login/signup pages or onboarding flows are good choices for this step.

Selecting an entry page

2. Select and right-click the component you want to add navigation. Choose the 'Add Navigation' option from the drop-down menu.

Adding navigation with Monday Hero

3. Select the parameters about the navigation from the pop-up that appears on the screen.

Different parameters need to set for navigation.

• Select a 'Destination Page' value. It is the page your user will navigate when they click the selected component.

• Select a 'Navigation Type' value. There are two options here called push and back.

  • Use push option to navigate from the selected page to the destination page.

  • Use back option to return from the destination page to the selected page.

• Adding animation during navigation is not an active feature right now. It is in development and will be ready soon.

4. Click 'Add' to finish.

Click add to finish.

You're all ready to navigate!

Final result after adding navigation

Monday Hero Navigation Code

iOS

loginButton.addTarget(
    self.coordinator,
    action: #selector(MainCoordinator.openListPage), 
    for: .touchUpInside)

Flutter

onTap: () {
    Navigator.pushNamed(
        context,
        AppRoutes.listScreen,
        );
}

Editing Navigation

If you want to make changes after adding navigations, you can make these changes with Monday Hero. You can delete existing navigations or edit them to navigate to a different page.

You can see the list of all the navigations in the screen from the 'Navigations' panel. You can delete or edit the navigations you have added from here.

List of navigations in the selected screen

1. Click on the navigation you want to change in the list.

Delete or edit the navigations

2. Select the edit or delete option in the drop-down menu and make changes.

Editing a navigation

3. Save your changes.

Saving changes

You are ready to navigate through the pages within the app!