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).
- Creates a multi page/tab UI with a singular
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 classsidebar-title
. You can also provide a custom Tag for the title element, in which case you’ll likely want to give this elementclass = "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
Type | Description |
---|---|
Sidebar | A Sidebar object. |
See Also
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)