Search code examples
rshinyshinydashboardshinyapps

How to place elements above the dashboardHeader


I'm a beginner in Shiny and I'm looking to develop my first app. I'm having difficulty because I would like to add a top header bar to my dashboard, with a logo and the name of my study group on the upper left side of the page, and on the right side, a "Stop App" button. I would appreciate some help in achieving this page configuration like in the image.

ui <- dashboardPage(
  dashboardHeader(title = "My first app"),
  dashboardSidebar(),
  dashboardBody()
)

server <- function(input, output, session) {
}

shinyApp(ui = ui, server = server)

enter image description here


Solution

  • We can wrap the dashboardPage in a body-tag to achive this:

    library(shiny)
    library(shinydashboard)
    
    ui <- tags$body(
      tags$img(src = "https://www.r-project.org/logo/Rlogo.svg", width = '60px'),
      tags$span("My Team Name", style = "margin-left:25px;"),
      actionButton("mybutton", "My Button", icon = icon("plus"), style = "float:right; margin-top:5px; margin-right:5px"),
      dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody()
      )
    )
    
    server <- function(input, output, session) {}
    
    shinyApp(ui, server)
    

    result

    Here you can find a related answer.