Skip to content

Latest commit

 

History

History
38 lines (31 loc) · 1.87 KB

navigate-between-pages.md

File metadata and controls

38 lines (31 loc) · 1.87 KB
description
This page shows you steps to build an app to navigate between pages.

Navigate Between Pages

Appsmith provides the navigateTo function that lets you navigate between pages within your app. This guide shows you how to implement page navigation.

Set up page navigation

<iframe src="https://demo.arcade.software/4E2rERYsOCBeEoKHMK0j?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", colorScheme: "light" }} title="Appsmith | Connect Data"> </iframe>

You can use a Text widget or an Icon button to navigate between pages. To set up page navigation using an Icon button, follow these steps:

  1. Drop an Icon button widget and set it's onClick property to navigate to another page. You can do this in the following ways:

    • Using the Navigate to action and entering the page name or a URL to navigate to. This action tells the app where to navigate when the Icon is clicked.
    • Using the JS button and using the following code to navigate to a page within the app where page_name is the name of the target page:
    {{navigateTo("page_name")}}

    To navigate to an external URL, pass a full URL instead of a page name.

    Example:

    {{navigateTo('https://www.example.com')}}

  2. To open the linked page in a new browser tab or window, use the third parameter.

    Example:

    {{navigateTo('page_name', { }, 'NEW_WINDOW') }}

See also