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:


*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.


Type Description
Sidebar A Sidebar object.

See Also


#| 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.sidebar("Left sidebar content", id="sidebar_left"),
            ui.sidebar("Right sidebar content", id="sidebar_right", position="right"),
            ui.sidebar("Closed sidebar content", id="sidebar_closed", open="closed"),
            ui.sidebar("Always sidebar content", id="sidebar_always", open="always"),

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

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

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

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

app = App(app_ui, server)