Sidebars

A sidebar layout creates a sidebar in your Shiny app, typically used for inputs, and a large main area, typically used for outputs.

A sidebar layout creates a sidebar, typically used for inputs, and a large main area, typically used for outputs.

Relevant Functions

  • ui.layout_sidebar
    ui.layout_sidebar(sidebar, *args, fillable=True, fill=True, bg=None, fg=None, border=None, border_radius=None, border_color=None, gap=None, padding=None, height=None, **kwargs)

  • 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, fillable=False, resizable=True, **kwargs)

  • ui.update_sidebar
    ui.update_sidebar(id, *, show=None, session=None)

  • ui.page_sidebar
    ui.page_sidebar(sidebar, *args, title=None, fillable=False, fillable_mobile=False, window_title=MISSING, lang=None, theme=None, **kwargs)

No matching items

Sidebar on the left

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.py
from shiny import App, ui

app_ui = ui.page_sidebar(  
    ui.sidebar("Sidebar", bg="#f8f8f8"),  
    "Main content",  
)  


def server(input, output, session):
    pass


app = App(app_ui, server)

from shiny.express import ui

with ui.sidebar(bg="#f8f8f8"):  
    "Sidebar"  

"Main content"  
from shiny import App, ui

app_ui = ui.page_sidebar(  
    ui.sidebar("Sidebar", bg="#f8f8f8"),  
    "Main content",  
)  


def server(input, output, session):
    pass


app = App(app_ui, server)

Follow these steps to add a left-side sidebar to your app:

  1. Add ui.layout_sidebar() inside any Shiny UI page method (e.g., ui.page_fluid()). ui.layout_sidebar() creates a sidebar layout.

  2. Pass ui.sidebar()as the first argument of ui.layout_sidebar() to create the sidebar. By default, the position parameter of ui.sidebar() is “left” and the sidebar will appear on the left.

  3. Supply additional components (output components, cards, text, etc.) to ui.layout_sidebar() to define the contents of the main content area.

Sidebar on the right

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.py
from shiny import App, ui

app_ui = ui.page_sidebar(  
    ui.sidebar("Sidebar", position="right", bg="#f8f8f8"),  
    "Main content",
)  


def server(input, output, session):
    pass


app = App(app_ui, server)

from shiny.express import ui

with ui.sidebar(position="right", bg="#f8f8f8"):  
    "Sidebar"  

"Main content"
from shiny import App, ui

app_ui = ui.page_sidebar(  
    ui.sidebar("Sidebar", position="right", bg="#f8f8f8"),  
    "Main content",
)  


def server(input, output, session):
    pass


app = App(app_ui, server)

Follow these steps to add a right-side sidebar to your app:

  1. Add ui.layout_sidebar() inside any Shiny UI page method (e.g., ui.page_fluid()). ui.layout_sidebar() creates a sidebar layout.

  2. Pass ui.sidebar()as the first argument of ui.layout_sidebar() to create the sidebar.

  3. Pass position="right" to ui.sidebar(). The position argument controls where the sidebar appears relative to the main content.

  4. Supply components (e.g., inputs) to ui.sidebar() to define the sidebar’s contents. Supply additional components (e.g., output components, cards, etc.) to ui.layout_sidebar() to define the contents of the main content area.

Sidebar within a card

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 175

## file: app.py
from shiny import App, ui

app_ui = ui.page_fillable(
    ui.card(  
        ui.card_header("Card with sidebar"),
        ui.layout_sidebar(  
            ui.sidebar("Sidebar", bg="#f8f8f8"),  
            "Card content",  
        ),  
    )  
)


def server(input, output, session):
    pass


app = App(app_ui, server)

from shiny.express import ui

ui.page_opts(fillable=True)

with ui.card():  
    ui.card_header("Card with sidebar")

    with ui.layout_sidebar():  
        with ui.sidebar(bg="#f8f8f8"):  
            "Sidebar"  

        "Card content"  
from shiny import App, ui

app_ui = ui.page_fillable(
    ui.card(  
        ui.card_header("Card with sidebar"),
        ui.layout_sidebar(  
            ui.sidebar("Sidebar", bg="#f8f8f8"),  
            "Card content",  
        ),  
    )  
)


def server(input, output, session):
    pass


app = App(app_ui, server)

Follow these steps to add a sidebar within a card to your app:

  1. Add ui.card() to the UI of your app to create a card.
  2. Pass ui.layout_sidebar() to ui.card() to define a sidebar layout within the card.
  3. Add ui.sidebar() and additional elements to ui.layout_sidebar() to define the sidebar and main content as usual.
  4. Add inputs or other components as desired to ui.sidebar() to define the sidebar’s contents.

Collapsed sidebar

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.py
from shiny import App, ui

app_ui = ui.page_sidebar(
    ui.sidebar("Sidebar", bg="#f8f8f8", open="closed"),  
    "Main content",
)


def server(input, output, session):
    pass


app = App(app_ui, server)

from shiny.express import ui

with ui.sidebar(open="closed", bg="#f8f8f8"):  
    "Sidebar"

"Main content"
from shiny import App, ui

app_ui = ui.page_sidebar(
    ui.sidebar("Sidebar", bg="#f8f8f8", open="closed"),  
    "Main content",
)


def server(input, output, session):
    pass


app = App(app_ui, server)

ui.sidebar() has an open parameter that defines whether the sidebar appears open or closed when the app launches. To create a sidebar that is initially closed, set the open parameter to "closed".

The other options for open are:

  • "desktop": The default. The sidebar starts open on a desktop screen and closed on mobile.
  • "open": The sidebar starts open and can be closed.
  • "always": The sidebar is always open and cannot be closed.