Adding a Company Logo to Shinydashboard Header

Adding a company Logo to ShinyDashboard header

I've been working with a bit of a hack for this, (and I know you didn't ask for it, but here's a clickable logo while we're at it):

library(shiny)
library(shinydashboard)

dbHeader <- dashboardHeader()
dbHeader$children[[2]]$children <-  tags$a(href='http://mycompanyishere.com',
                                           tags$img(src='logo.png',height='60',width='200'))

dashboardPage(
       dbHeader,
       dashboardSidebar(),
       dashboardBody()
)

So this nests a shiny.tag inside the header. The second slot in this particular shiny object is the logo slot (You'll need a 'logo.png' in your /www/ folder in the app directory)

EDIT:

I just checked, and as of right now, this hack should no longer be necessary, you can insert the html directly from the dashboardHeader function via the title= parameter, (Before, that parameter was enforcing text only),

I think the answer might still be useful as a method to modify existing shiny functions where things ARE hardcoded in though.

Here's the method now:

dashboardPage(
    dashboardHeader(title = tags$a(href='http://mycompanyishere.com',
                                    tags$img(src='logo.png')))

or, adding a little more magic to the logo (I also use my logo as a loading bar):

# Takes a location 'href', an image location 'src', a loading gif 'loadingsrc'
# height, width and alt text, and produces a loading logo that activates while
# Shiny is busy
loadingLogo <- function(href, src, loadingsrc, height = NULL, width = NULL, alt = NULL) {
  tagList(
    tags$head(
      tags$script(
        "setInterval(function(){
                     if ($('html').attr('class')=='shiny-busy') {
                     $('div.busy').show();
                     $('div.notbusy').hide();
                     } else {
                     $('div.busy').hide();
                     $('div.notbusy').show();
           }
         },100)")
  ),
  tags$a(href=href,
         div(class = "busy",  
             img(src=loadingsrc,height = height, width = width, alt = alt)),
         div(class = 'notbusy',
             img(src = src, height = height, width = width, alt = alt))
   )
  )
}

dashboardBody(
  dashboardHeader(title = loadingLogo('http://mycompanyishere.com',
                                      'logo.png',
                                      'loader.gif'),
  dashboardSidebar(),
  dashboardBody()
)

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

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!

shinydashboard, logo and title in navbar?

try this:

library(shiny)
library(shinydashboard)

header_img <- div(
    img(src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", height="45px"),
    div(
        class = "my-title",
        h4('Title'), h5('Subtitle'),
        tags$style(".my-title :is(h4, h5){color: white; font-weight: bold;}")
    ),
    style = "display: flex;"
)

header <-  htmltools::tagQuery(dashboardHeader(title = ""))
header <- header$
    addAttrs(style = "position: relative")$ # add some styles to the header 
    find(".navbar.navbar-static-top")$ # find the header right side
    append(header_img)$ # inject our img
    allTags()

ui <- function(){
    dashboardPage(
        header,
        dashboardSidebar(),
        dashboardBody()
    )
}

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

shinyApp(ui=ui, server = server)

There is another similar question: How have a image in the center of the dashboard header in Shinydashboard R?

Add picture in dashboardHeader

Just create a new folder with the name "www" in the same directory as your script and add your picture in that

How can I add logo besides project name in shiny dashboard?

It is possible to set an image and text side by side as following.

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
anchor <- tags$a(href='http://www.example.com',
                 tags$img(src='logo.png', height='60', width='50'),
                 'project name')

header$children[[2]]$children <- tags$div(
    tags$head(tags$style(HTML(".name { background-color: black }"))),
    anchor,
    class = 'name')

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

shinyApp(ui, server = function(input, output, session) {})

How have a image in the center of the dashboard header in Shinydashboard R?

Here you go

There is no way you can add the image to the header part on the right side with the function from shinydashboard, but let's have fun with the latest htmltools by injecting styles and tags into the header.

library(shinydashboard)
library(shiny)
header_img <- tags$img(
    src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
    style = 'height: 50px; width: 100px; position: absolute; left: 50%; transform: translateX(-50%);'
)
header <-  htmltools::tagQuery(dashboardHeader(title = ""))
header <- header$
    addAttrs(style = "position: relative")$ # add some styles to the header 
    find(".navbar.navbar-static-top")$ # find the header right side
    append(header_img)$ # inject our img
    allTags()

ui <- dashboardPage(
    header,
    dashboardSidebar(
        sidebarMenuOutput("menu")
    ),
    dashboardBody()
)

server <- function(input, output) {
    output$menu <- renderMenu({
        sidebarMenu(
            menuItem("Overview", icon = icon("tachometer"))
            
        )
    })
}
shinyApp(ui, server)

The img is placed on the center of right side header, not the center of the entire header length. If you want to adjust to the center of the whole length, try to change translateX(-50%) of the img to a number you like.

Move logo to the left side of dashboard header in shiny dashboard

The item you want to move is a div with class .navbar-custom-menu.

Add this to your custom css in tags$head(tags$style(HTML(...))) to force it to float left:

.navbar-custom-menu {
       float: left!important;
}

The !important is necessary to prevent it from being overwritten by css elsewhere.

---

Related Topics