Search code examples
rimageshinyheadershinydashboard

How to place an image above the header using shinydashboard

I want to put an image on top of the header of my shiny app using just like shown below but I don't know how to approach this issue.

Example

Here is the basic dashboard structure:

library(shiny)
library(shinydashboard)

ui <-  dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody()
)

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

shinyApp(ui, server)
Solution

  • We can simply wrap the dashboardPage in a body tag and include the image:

    library(shiny)
library(shinydashboard)

ui <- tags$body(
  tags$img(src = "https://i.sstatic.net/IqerJ.png", width = '100%'),
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody()
  )
)

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

shinyApp(ui, server)

    result

    Relevant info: https://github.com/rstudio/shiny/pull/660

    Here is another way to realize this: https://jonkatz2.github.io/2018/06/22/Image-In-Shinydashboard-Header

    PS: you might want to save that image in your local www folder instead of using imgur.com as the src.