How to add a company Logo to ShinyDashboard header (Not mainPanel or mainHeader)

Question

I tried to refer to below answers but the logo is locate inside the main panel but not the header panel... Any solution?

• Adding a company Logo to ShinyDashboar

Answer 1

the solution is to conceal your image, such that shiny renders it like it would have rendered a normal dropdownMenu item.

As you might have seen from your console, dashboardHeader throws errors

Error in FUN(X[[i]], ...) : Expected tag to be of type li

if you try to insert any custom HTML. And if you choose a li tag, it even elaborates

Error in FUN(X[[i]], ...) : Expected tag to have class 'dropdown'

So here is your deal, add your image in a li wrapper with class dropdown and you are good to go.

Sample code:

library(shinydashboard)
library(shiny)

runApp(
  shinyApp(
    ui = shinyUI(
      dashboardPage(
          dashboardHeader(title = 'Reporting Dashboard',
            tags$li(class = "dropdown",
                    tags$a(href="http://snap.uaf.edu", target="_blank", 
                           tags$img(height = "20px", alt="SNAP Logo", src="https://www.snap.uaf.edu/sites/default/files/pictures/snap_symbol_color.png")
                    )
            ),
            dropdownMenuOutput('messageMenu'),
            dropdownMenu(type = 'notifications',
                         notificationItem(text = '5 new users today', icon('users')),
                         notificationItem(text = '12 items delivered', 
                                          icon('truck'), status = 'success'),
                         notificationItem(text = 'Server load at 86%', 
                                          icon = icon('exclamation-triangle'), 
                                          status = 'warning')),
            dropdownMenu(type = 'tasks',
                         badgeStatus = 'success',
                         taskItem(value = 90, color = 'green', 'Documentation'),
                         taskItem(value = 17, color = 'aqua', 'Project X'),
                         taskItem(value = 75, color = 'yellow', 'Server deployment'),
                         taskItem(value = 80, color = 'red', 'Overall project'))
          ),

          dashboardSidebar(),
          dashboardBody()
      )
    ), 

    server = function(input, output){}

  ), launch.browser = TRUE
)

Hope this helps!