ui.sidebar

ui.sidebar(
    *args
    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
)

Sidebar element

Create a collapsing sidebar layout by providing a sidebar() object to the sidebar= argument of:

• layout_sidebar
  • Creates a sidebar layout component which can be dropped inside any Shiny UI page method (e.g. page_fillable) or card context.
• navset_bar, navset_card_tab, and navset_card_pill
  • Creates a multi page/tab UI with a singular sidebar() (which is shown on every page/tab).

Parameters

*args : TagChild | TagAttrs = ()

Contents of the sidebar. Or tag attributes that are supplied to the resolved Tag object.

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.

Returns

: Sidebar

A Sidebar object.

See Also

• layout_sidebar
• navset_bar
• navset_card_tab
• navset_card_pill

Examples

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

## file: app.py
from shiny import App, Inputs, Outputs, Session, render, ui

app_ui = ui.page_fluid(
    ui.card(
        ui.layout_sidebar(
            ui.sidebar("Left sidebar content", id="sidebar_left"),
            ui.output_text_verbatim("state_left"),
        )
    ),
    ui.card(
        ui.layout_sidebar(
            ui.sidebar("Right sidebar content", id="sidebar_right", position="right"),
            ui.output_text_verbatim("state_right"),
        ),
    ),
    ui.card(
        ui.layout_sidebar(
            ui.sidebar("Closed sidebar content", id="sidebar_closed", open="closed"),
            ui.output_text_verbatim("state_closed"),
        )
    ),
    ui.card(
        ui.layout_sidebar(
            ui.sidebar("Always sidebar content", id="sidebar_always", open="always"),
            ui.output_text_verbatim("state_always"),
        )
    ),
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.text
    def state_left():
        return f"input.sidebar_left(): {input.sidebar_left()}"

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

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

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


app = App(app_ui, server)