Sidebar

marimo.sidebar

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

Bases: Html

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

RETURNS	DESCRIPTION
Html	An Html object. TYPE: Html

text property

text: str

A string of HTML representing this element.

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