Skip to contents

Create a Boostrap 4 dashboard main sidebar

Source: R/dashboardSidebar.R, R/aliases.R
dashboardSidebar.Rd

dashboardSidebar creates an adminLTE3 dashboard main sidebar to insert in the sidebar slot of dashboardPage.

updateSidebar toggles a dashboardSidebar on the client.

sidebarMenu creates a menu for dashboardSidebar.

menuItem creates an item to put in sidebarMenu.

menuSubItem creates an item to put in menuItem.

sidebarHeader creates a header to put in dashboardSidebar.

sidebarUserPanel creates a user Panel to put in dashboardSidebar.

updateTabItems controls the active tab of tabItems from the server. It behaves just like updateTabsetPanel.

Usage

bs4DashSidebar(
  ...,
  disable = FALSE,
  width = NULL,
  skin = NULL,
  status = "primary",
  elevation = 4,
  collapsed = FALSE,
  minified = TRUE,
  expandOnHover = TRUE,
  fixed = TRUE,
  id = NULL,
  customArea = NULL
)

updatebs4Sidebar(id, session = shiny::getDefaultReactiveDomain())

bs4SidebarMenu(
  ...,
  id = NULL,
  .list = NULL,
  flat = FALSE,
  compact = FALSE,
  childIndent = TRUE,
  legacy = FALSE
)

bs4SidebarMenuItem(
  text,
  ...,
  icon = NULL,
  badgeLabel = NULL,
  badgeColor = "success",
  tabName = NULL,
  href = NULL,
  newTab = TRUE,
  selected = NULL,
  expandedName = as.character(gsub("[[:space:]]", "", text)),
  startExpanded = FALSE,
  condition = NULL,
  .list = NULL
)

bs4SidebarMenuSubItem(
  text,
  tabName = NULL,
  href = NULL,
  newTab = NULL,
  icon = shiny::icon("angles-right"),
  selected = NULL
)

bs4SidebarHeader(title)

bs4SidebarUserPanel(name, image = NULL)

updatebs4TabItems(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  selected = NULL
)

dashboardSidebar(
  ...,
  disable = FALSE,
  width = NULL,
  skin = NULL,
  status = "primary",
  elevation = 4,
  collapsed = FALSE,
  minified = TRUE,
  expandOnHover = TRUE,
  fixed = TRUE,
  id = NULL,
  customArea = NULL
)

updateSidebar(id, session = shiny::getDefaultReactiveDomain())

sidebarHeader(title)

sidebarMenu(
  ...,
  id = NULL,
  .list = NULL,
  flat = FALSE,
  compact = FALSE,
  childIndent = TRUE,
  legacy = FALSE
)

sidebarUserPanel(name, image = NULL)

menuItem(
  text,
  ...,
  icon = NULL,
  badgeLabel = NULL,
  badgeColor = "success",
  tabName = NULL,
  href = NULL,
  newTab = TRUE,
  selected = NULL,
  expandedName = as.character(gsub("[[:space:]]", "", text)),
  startExpanded = FALSE,
  condition = NULL,
  .list = NULL
)

menuSubItem(
  text,
  tabName = NULL,
  href = NULL,
  newTab = NULL,
  icon = shiny::icon("angles-right"),
  selected = NULL
)

updateTabItems(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  selected = NULL
)

Arguments

...

menuSubItem.

disable

If TRUE, the sidebar will be disabled.

width

The width of the sidebar. This must either be a number which specifies the width in pixels, or a string that specifies the width in CSS units.

skin

Sidebar skin. "dark" or "light". Matches the dashboardPage dark parameter value.

status

Sidebar status. Valid statuses are defined as follows:

  • primary: #007bff .

  • secondary: #6c757d .

  • info: #17a2b8 .

  • success: #28a745 .

  • warning: #ffc107 .

  • danger: #dc3545 .

  • gray-dark: #343a40 .

  • gray: #adb5bd .

  • white: #fff .

  • indigo: #6610f2 .

  • lightblue: #3c8dbc .

  • navy: #001f3f .

  • purple: #605ca8 .

  • fuchsia: #f012be .

  • pink: #e83e8c .

  • maroon: #d81b60 .

  • orange: #ff851b .

  • lime: #01ff70 .

  • teal: #39cccc .

  • olive: #3d9970 .

elevation

Sidebar elevation. 4 by default (until 5).

collapsed

If TRUE, the sidebar will be collapsed on app startup.

minified

Whether to slightly close the sidebar but still show item icons. Default to TRUE.

expandOnHover

Whether to expand the sidebar om hover. TRUE by default.

fixed

Whether to fix the sidebar. Default to TRUE.

id

For sidebarMenu, if id is present, this id will be used for a Shiny input value, and it will report which tab is selected. For example, if id="tabs", then input$tabs will be the tabName of the currently-selected menuItem.

customArea

Sidebar bottom space area. Only works if sidebar is fixed.

session

Shiny session object.

.list

An optional list containing items to put in the menu Same as the ... arguments, but in list format. This can be useful when working with programmatically generated items.

flat

Whether sidebar items should have a flat design. FALSE by default.

compact

Whether items should be compacted. FALSE by default.

childIndent

Whether to indent children. TRUE by default.

legacy

Whether to use the old adminLTE2 item selection display. Default to FALSE.

text

Item name.

icon

An icon tag, created by icon. If NULL, don't display an icon.

badgeLabel

A label for an optional badge. Usually a number or a short word like "new".

badgeColor

A color for the badge. Valid colors:

  • primary: #007bff .

  • secondary: #6c757d .

  • info: #17a2b8 .

  • success: #28a745 .

  • warning: #ffc107 .

  • danger: #dc3545 .

tabName

Should correspond exactly to the tabName given in tabItem.

href

An link address. Not compatible with tabName.

newTab

If href is supplied, should the link open in a new browser tab?

selected

If TRUE, this menuSubItem will start selected. If no item have selected=TRUE.

expandedName

A unique name given to each menuItem that serves to indicate which one (if any) is currently expanded. (This is only applicable to menuItems that have children and it is mostly only useful for bookmarking state.)

startExpanded

Whether to expand the menuItem at start.

condition

When using menuItem with conditionalPanel, write the condition here (see https://github.com/RinteRface/bs4Dash/issues/35).

title

title.

name

Name of the user.

image

A filename or URL to use for an image of the person. If it is a local file, the image should be contained under the www/ subdirectory of the application.

inputId

The id of the tabsetPanel, navlistPanel, or navbarPage object.

Note

See examples for a use case of the condition parameter.

See also

dashboardBody

Author

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(id = "sidebar"),
      body = dashboardBody(
        actionButton(inputId = "sidebarToggle", label = "Toggle Sidebar")
      )
    ),
    server = function(input, output, session) {
      observeEvent(input$sidebar, {
        if (input$sidebar) {
          showModal(modalDialog(
            title = "Alert",
            "The sidebar is opened.",
            easyClose = TRUE,
            footer = NULL
          ))
        }
      })

      observeEvent(input$sidebarToggle, {
        updateSidebar(id = "sidebar", session = session)
      })

      observe({
        print(input$sidebar)
      })
    }
  )
}
if (interactive()) {
  # sidebarItem with conditional value
  library(shiny)
  library(bs4Dash)

  ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
      sidebarMenu(
        id = "sidebarMenu",
        menuItem(
          text = "Tab 1",
          tabName = "tab1"
        ),
        menuItem(
          condition = "input.show == true",
          text = "Tab 2",
          tabName = "tab2"
        )
      )
    ),
    dashboardBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          h1("Welcome!"),
          checkboxInput("show", "Show Tab 2", FALSE)
        ),
        tabItem(
          tabName = "tab2",
          h1("Hey! You found me!")
        )
      )
    )
  )
  server <- function(input, output) {}
  shinyApp(ui = ui, server = server)
}
## Only run this example in interactive R sessions
if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(skin = "dark"),
      body = dashboardBody(
        tabItems(
          tabItem(
            tabName = "tab1",
            sliderInput("obs", "Number of observations:",
              min = 0, max = 1000, value = 500
            ),
            plotOutput("distPlot")
          ),
          tabItem(
            tabName = "tab2",
            checkboxGroupInput(
              "variable", "Variables to show:",
              c(
                "Cylinders" = "cyl",
                "Transmission" = "am",
                "Gears" = "gear"
              )
            ),
            tableOutput("data")
          ),
          tabItem(
            tabName = "tab3",
            checkboxInput("val", "Some value", FALSE),
            textOutput("value")
          ),
          tabItem(
            tabName = "tab4",
            "Nothing special here!"
          ),
          tabItem(
            tabName = "tab5",
            "Tab 5"
          ),
          tabItem(
            tabName = "tab6",
            "Tab 6"
          ),
          tabItem(
            tabName = "tab7",
            "Tab 7"
          )
        )
      ),
      sidebar = dashboardSidebar(
        skin = "light",
        inputId = "sidebarState",
        sidebarMenu(
          id = "sidebar",
          menuItem(
            text = "Tab 1",
            tabName = "tab1",
            icon = icon("van-shuttle")
          ),
          menuItem(
            text = "Tab 2",
            tabName = "tab2",
            icon = icon("shuttle-space"),
            selected = TRUE
          ),
          menuItem(
            text = "Item List 1",
            icon = icon("bars"),
            startExpanded = TRUE,
            menuSubItem(
              text = "Item 3",
              tabName = "tab3",
              icon = icon("circle")
            ),
            menuSubItem(
              text = "Item 4",
              tabName = "tab4",
              icon = icon("circle")
            )
          ),
          menuItem(
            text = "Item List 2",
            icon = icon("bars"),
            startExpanded = FALSE,
            menuSubItem(
              text = "Item 5",
              tabName = "tab5",
              icon = icon("circle")
            ),
            menuSubItem(
              text = "Item 6",
              tabName = "tab6",
              icon = icon("circle")
            )
          ),
          menuItem(
            text = "Tab 7",
            tabName = "tab7",
            icon = icon("house")
          )
        )
      ),
      controlbar = dashboardControlbar(
        skin = "light",
        sliderInput(
          inputId = "controller",
          label = "Update the first tabset",
          min = 1,
          max = 6,
          value = 2
        )
      ),
      footer = bs4DashFooter()
    ),
    server = function(input, output, session) {
      observe(print(input$sidebarItemExpanded))
      observe(print(input$sidebar))

      # update tabset1
      observeEvent(input$controller,
        {
          updateTabItems(
            session,
            inputId = "sidebar",
            selected = paste0("tab", input$controller)
          )
        },
        ignoreInit = TRUE
      )

      output$distPlot <- renderPlot({
        hist(rnorm(input$obs))
      })

      output$data <- renderTable(
        {
          mtcars[, c("mpg", input$variable), drop = FALSE]
        },
        rownames = TRUE
      )

      output$value <- renderText({
        input$val
      })
    }
  )
}