Routes

marimo.routes(routes: dict[str, Callable[[], object] | Callable[[], Coroutine[None, None, object]] | object]) → None

Renders a list of routes that are switched based on the URL path.

Routes currently don’t support nested routes, or dynamic routes (e.g. #/user/:id). If you’d like to see these features, please let us know on GitHub: https://github.com/marimo-team/marimo/issues

For a simple-page-application (SPA) experience, you should use hash-based routing. For example, prefix your routes with #/.

If you are using a multi-page-application (MPA) with marimo.create_asgi_app, you should use path-based routing. For example, prefix your routes with /.

Examples.

mo.routes(
    {
        "#/": render_home,
        "#/about": render_about,
        "#/contact": render_contact,
        mo.routes.CATCH_ALL: render_home,
    }
)

Args.

• routes: a dictionary of routes, where the key is the URL path and the value is a function that returns the content to display.

Returns.

• An Html object.

Full example with a sidebar

Here is a marimo program that uses routes with a sidebar.

import marimo

app = marimo.App()

@app.cell
def __():
   import marimo as mo
   return


@app.cell
def __():
    mo.sidebar(
        [
            mo.md("# marimo"),
            mo.nav_menu(
                {
                    "#/": f"{mo.icon('lucide:home')} Home",
                    "#/about": f"{mo.icon('lucide:user')} About",
                    "#/contact": f"{mo.icon('lucide:phone')} Contact",
                    "Links": {
                        "https://twitter.com/marimo_io": "Twitter",
                        "https://github.com/marimo-team/marimo": "GitHub",
                    },
                },
                orientation="vertical",
            ),
        ]
    )
    return

@app.cell
def __():
    mo.routes({
        "#/": mo.md("# Home"),
        "#/about": mo.md("# About"),
        "#/contact": mo.md("# Contact"),
        mo.routes.CATCH_ALL: mo.md("# Home"),
    })
    return