Horizontal Rule hr() in R Shiny Sidebar

Question

You can normally make a horizontal rule under UI elements with hr() when using fluidRow() in Shiny, but you can't do it in a sideBarPanel() under text. How can I make a horizontal rule, or something else like it, to divide text and UI elements in my sidebar?

Answer 1

In general the line is visible, but with very low contrast to the background. To make the line more visible you can modify the CSS code by including the following in the ui part:

  tags$head(
    tags$style(HTML("hr {border-top: 1px solid #000000;}"))
  ),

with tags$style(HTML(...)) you can include CSS in your app. The html tag for the line is hr. And the remaining parameter indicate specification of line choice, width, color, etc.

For a full working example see below:

library(shiny)
    
ui <- fluidPage(
  tags$head(
    tags$style(HTML("hr {border-top: 1px solid #000000;}"))
  ),
   sidebarLayout(
      sidebarPanel(
         "text",
         hr(),
         uiOutput("out")
      ),
      mainPanel(
         plotOutput("distPlot")
      )
   )
)

server <- function(input, output) {
  output$out <- renderUI({
    sliderInput("bins",
                "Number of bins:",
                min = 1,
                max = 50,
                value = 30)
  })
}


shinyApp(ui = ui, server = server)

Update 12.2020: Comment from David Ranzolin, see comment section.

You can also pass a style argument to hr() directly, e.g.: hr(style = "border-top: 1px solid #000000;")