Skip to content

Navigation

This documentation page walks you through using the navbar and menu for navigation, the navigate function, and the on_navigate function for controlling page transitions.

Multi-page application

from taipy import Gui

root_md = "# Multi-page application"
home_md = "# Home"
about_md = "# About"

pages = {
    "/": root_md,
    "home": home_md,
    "about": about_md
}

Gui(pages=pages).run()
from taipy import Gui
import taipy.gui.builder as tgb

with tgb.Page() as root_page:
    tgb.text("# Multi-page application", mode="md")

with tgb.Page() as home_page:
    tgb.text("# Home", mode="md")

with tgb.Page() as about_page:
    tgb.text("# About", mode="md")

pages = {
    "/": root_page,
    "home": home_page,
    "about": about_page
}

Gui(pages=pages).run()

Using navbar

Navbar is a visual element that, by default, lets you navigate between pages. You can customize the navbar with properties like the list of pages you can navigate to.

from taipy import Gui

root_md = """
<|navbar|>
# Multi-page application
"""
home_md = "# Home"
about_md = "# About"

pages = {
    "/": root_md,
    "home": home_md,
    "about": about_md
}

Gui(pages=pages).run()
from taipy import Gui
import taipy.gui.builder as tgb

with tgb.Page() as root_page:
    tgb.navbar()
    tgb.text("# Multi-page application", mode="md")

with tgb.Page() as home_page:
    tgb.text("# Home", mode="md")

with tgb.Page() as about_page:
    tgb.text("# About", mode="md")

pages = {
    "/": root_page,
    "home": home_page,
    "about": about_page
}

Gui(pages=pages).run()

Using menus

The menu control displays a menu to the left of the page, allowing to navigate through the pages.

<|menu|label=Menu|lov={lov_pages}|on_action=menu_option_selected|>`
tgb.menu(label="Menu", lov=[...], on_action=menu_option_selected)

Menu

For example, this code creates a menu with two options:

from taipy import Gui, navigate

root_md = """
<|menu|label=Menu|lov={[('home', 'Home'), ('about', 'About')]}|on_action=menu_option_selected|>
# Multi-page application
"""

home_md = "# Home"
about_md = "# About"

def menu_option_selected(state, action, info):
    page = info["args"][0]
    navigate(state, to=page)

pages = {
    "/": root_md,
    "home": home_md,
    "about": about_md
}

Gui(pages=pages).run()
from taipy import Gui, navigate
import taipy.gui.builder as tgb

def menu_option_selected(state, action, info):
    page = info["args"][0]
    navigate(state, to=page)

with tgb.Page() as root_page:
    tgb.menu(label="Menu",
            lov=[('home', 'Page 1'), ('about', 'Page 2')],
            on_action=menu_option_selected)
    tgb.text("# Multi-page application", mode="md")

with tgb.Page() as home_page:
    tgb.text("# Home", mode="md")

with tgb.Page() as about_page:
    tgb.text("# About", mode="md")

pages = {
    "/": root_page,
    "home": home_page,
    "about": about_page
}

Gui(pages=pages).run()

Using the navigate function

The navigate() function allows for programmatically controlling navigation within callback functions. You can navigate to a page of this application or an external page.

from taipy import Gui, navigate

root_md = """
<|Click to go to Page 1|button|on_action=go_home|>
# Multi-page application
"""

home_md = "# Home"
about_md = "# About"

def go_home(state):
    navigate(state, "home")

pages = {
    "/": root_md,
    "home": home_md,
    "about": about_md
}

Gui(pages=pages).run()
from taipy import Gui, navigate
import taipy.gui.builder as tgb

def go_home(state):
    navigate(state, "home")

with tgb.Page() as root_page:
    tgb.button(label="Click to go to Page 1", on_action=go_home)
    tgb.text("# Multi-page application", mode="md")

with tgb.Page() as home_page:
    tgb.text("# Home", mode="md")

with tgb.Page() as about_page:
    tgb.text("# About", mode="md")

pages = {
    "/": root_page,
    "home": home_page,
    "about": about_page
}

Gui(pages=pages).run()

Using the on_navigate callback

The on_navigate callback allows for customizing the control over navigation, such as redirecting users based on conditions.

See more information for on_navigate.

from taipy import Gui, State

results_ready = False

def on_navigate(state: State, page_name: str):
    if page_name == "results" and not state.results_ready:
        return "no_results"
    return page_name

root_md = "# Multi-page application"
results_md = "# Results Page"
no_results_md = "# No Results Available"

pages = {
    "/": root_md,
    "results": results_md,
    "no_results": no_results_md
}

Gui(pages=pages).run()
from taipy import Gui, State
import taipy.gui.builder as tgb

results_ready = False

def on_navigate(state: State, page_name: str):
    if page_name == "results" and not state.results_ready:
        return "no_results"
    return page_name

with tgb.Page() as root_page:
    tgb.text("# Multi-page application", mode="md")

with tgb.Page() as results_page:
    tgb.text("# Results Page", mode="md")

with tgb.Page() as no_results_page:
    tgb.text("# No Results Available", mode="md")

pages = {
    "/": root_page,
    "results": results_page,
    "no_results": no_results_page
}

Gui(pages=pages).run()