Navigation Menu

/// marimo-embed size: xlarge

@app.cell
def __():
    nav_menu = mo.nav_menu({
        "/overview": "Overview",
        "Sales": {
            "/sales": {
                "label": "Sales",
                "description": "View sales and revenue",
            },
            "/sales/invoices": {
                "label": "Invoices",
                "description": "View invoices and payments",
            },
            "/sales/customers": {
                "label": "Customers",
                "description": "View customers and subscriptions",
            },
        },
        "Products": {
            "/products": {
                "label": "Products",
                "description": "View and manage products",
            },
            "/products/inventory": {
                "label": "Inventory",
                "description": "View inventory and stock levels",
            },
            "/products/categories": {
                "label": "Categories",
                "description": "View categories and products",
            },
        },
    })
    nav_menu
    return

///

marimo.nav_menu

nav_menu(
    menu: dict[str, JSONType],
    *,
    orientation: Literal[
        "horizontal", "vertical"
    ] = "horizontal"
) -> Html

Navigation menu component.

This is useful for creating a navigation menu with hyperlinks, most used when creating multi-page applications, with marimo.create_asgi_app (docs).

Examples.

nav_menu = mo.nav_menu(
    {
        "/overview": "Overview",
        "/sales": f"{mo.icon('lucide:shopping-cart')} Sales",
        "/products": f"{mo.icon('lucide:package')} Products",
    }
)

You can also nest dictionaries to create submenus

nav_menu = mo.nav_menu(
    {
        "/overview": "Overview",
        "Sales": {
            "/sales": "Overview",
            "/sales/invoices": {
                "label": "Invoices",
                "description": "View invoices",
            },
            "/sales/customers": {
                "label": "Customers",
                "description": "View customers",
            },
        },
    }
)

Args.

• menu: a dictionary of tab names to tab content; the content can also be nested dictionaries (one level deep) strings are interpreted as markdown

Returns.

• An Html object.