express.ui.sidebar

express.ui.sidebar(position='left', open=None, width=250, id=None, title=None, bg=None, fg=None, class_=None, max_height_mobile=None, gap=None, padding=None, **kwargs)

Context manager for sidebar element

This function wraps sidebar.

Parameters

width: CssUnit = 250

A valid CSS unit used for the width of the sidebar.

position: Literal[‘left’, ‘right’] = ‘left’

Where the sidebar should appear relative to the main content, one of "left" or "right".

open: Optional[SidebarOpenSpec | SidebarOpenValue | Literal[‘desktop’]] = None

The initial state of the sidebar. If a string, the possible values are:

• "open": the sidebar starts open
• "closed": the sidebar starts closed
• "always": the sidebar is always open and cannot be closed

Alternatively, you can provide a dictionary with keys "desktop" and "mobile" to set different initial states for desktop and mobile. For example, when {"desktop": "open", "mobile": "closed"} the sidebar is initialized in the open state on desktop screens or in the closed state on mobile screens.

id: Optional[str] = None

A character string. Required if wanting to reactively read (or update) the collapsible state in a Shiny app.

title: TagChild | str = None

A character title to be used as the sidebar title, which will be wrapped in a <div> element with class sidebar-title. You can also provide a custom Tag for the title element, in which case you’ll likely want to give this element class = "sidebar-title".

bg: Optional[str] = None

A background or foreground color.

class_: Optional[str] = None

CSS classes for the sidebar container element, in addition to the fixed .sidebar class.

max_height_mobile: Optional[str | float] = None

A CSS length unit (passed through as_css_unit) defining the maximum height of the horizontal sidebar when viewed on mobile devices. Only applies to always-open sidebars on mobile, where by default the sidebar container is placed below the main content container on mobile devices.

gap: Optional[CssUnit] = None

A CSS length unit defining the vertical gap (i.e., spacing) between elements provided to *args.

padding: Optional[CssUnit | list[CssUnit]] = None

Padding within the sidebar itself. This can be a numeric vector (which will be interpreted as pixels) or a character vector with valid CSS lengths. padding may be one to four values.

• If a single value, then that value will be used for all four sides.
• If two, then the first value will be used for the top and bottom, while the second value will be used for left and right.
• If three values, then the first will be used for top, the second will be left and right, and the third will be bottom.
• If four, then the values will be interpreted as top, right, bottom, and left respectively.

**kwargs: TagAttrValue = {}

Named attributes are supplied to the sidebar content container.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from shiny.express import input, render, ui

ui.page_opts(fillable=True)

with ui.card():
    with ui.layout_sidebar():
        with ui.sidebar(id="sidebar_left", open="desktop"):
            "Left sidebar content"

        @render.code
        def state_left():
            return f"input.sidebar_left(): {input.sidebar_left()}"


with ui.card():
    with ui.layout_sidebar():
        with ui.sidebar(id="sidebar_right", position="right", open="desktop"):
            "Right sidebar content"

        @render.code
        def state_right():
            return f"input.sidebar_right(): {input.sidebar_right()}"


with ui.card():
    with ui.layout_sidebar():
        with ui.sidebar(id="sidebar_closed", open="closed"):
            "Closed sidebar content"

        @render.code
        def state_closed():
            return f"input.sidebar_closed(): {input.sidebar_closed()}"


with ui.card():
    with ui.layout_sidebar():
        with ui.sidebar(id="sidebar_always", open="always"):
            "Always sidebar content"

        @render.code
        def state_always():
            return f"input.sidebar_always(): {input.sidebar_always()}"