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.

Sidebar on the left

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.R
library(shiny)
library(bslib)

ui <- page_sidebar(
  sidebar = sidebar("Sidebar", bg="#f8f8f8"),
  "Main content"
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

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

1. Use page_sidebar(), from the bslib package, to create a layout with a sidebar.

2. Use page_sidebar()’s sidebar argument and sidebar() to create a sidebar.

3. Supply components (inputs components, text, etc.) to sidebar() to define the contents of the sidebar.

4. Supply additional components to page_sidebar() to define the contents of the main content area.

Sidebar on the right

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.R
library(shiny)
library(bslib)

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

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

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

1. Use page_sidebar(), from the bslib package, to create a layout with a sidebar.

2. Use page_sidebar()’s sidebar argument and sidebar() to create a sidebar.

3. Set sidebar()’s position argument to "right" to place the sidebar on the right.

4. Supply components (inputs components, text, etc.) to sidebar() to define the contents of the sidebar.

5. Supply additional components to page_sidebar() to define the contents of the main content area.

Sidebar within a card

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 200

## file: app.R
library(shiny)
library(bslib)

ui <- page_fillable(
  card(
    card_header("Sidebar within a card"),
    layout_sidebar(
      sidebar = sidebar("Sidebar", bg="#f8f8f8"),
      "Main content"
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

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

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

Collapsed sidebar

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 125

## file: app.R
library(shiny)
library(bslib)

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

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

sidebar() has an open argument 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.