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