Navigation Menu¶

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).

PARAMETER	DESCRIPTION
`menu`	a dictionary of tab names to tab content; the content can also be nested dictionaries (one level deep) strings are interpreted as markdown TYPE: `dict[str, JSONType]`
`orientation`	The orientation of the menu. TYPE: `Literal['horizontal', 'vertical']` DEFAULT: `'horizontal'`

RETURNS	DESCRIPTION
`Html`	An `Html` object.

Example

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",
            },
        },
    }
)