Sidebar

marimo.sidebar

sidebar(
    item: object,
    footer: object | None = None,
    *,
    width: str | int | None = None,
)

Bases: ContainerHtml

An Html object that displays content in a sidebar.

This is a special layout component that will display the content in a sidebar layout, rather than below/above the cell.

This component still needs to be the last expression in the cell, in order to display correctly.

You may use more than one mo.sidebar - they will be displayed in the order they are called.

Examples:

mo.sidebar(
    [
        mo.md("# marimo"),
        mo.nav_menu(
            {
                "#home": 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",
        ),
    ]
)

PARAMETER	DESCRIPTION
item	The content to display in the sidebar. TYPE: object
footer	The content to display at the bottom of the sidebar. TYPE: object DEFAULT: None
width	The width of the sidebar when open. Can be any valid CSS width value (e.g. "300px", "20rem"). If not provided, defaults to the standard width. TYPE: str DEFAULT: None

text property

text: str

Re-render children live on every access.

batch

batch(*args: Any, **kwargs: Any) -> Any

callout

callout(*args: Any, **kwargs: Any) -> Html

center

center(*args: Any, **kwargs: Any) -> Html

left

left(*args: Any, **kwargs: Any) -> Html

right

right(*args: Any, **kwargs: Any) -> Html

style

style(*args: Any, **kwargs: Any) -> Html