How can I insert an image into the navbar on a shiny navbarPage()

Question

I am builidng a shiny application using a navbarPage() layout. I would like to insert an image to be on the right hand side of the screen, in the navigation bar. It would look like the navigation bar at the top of, for instance, the stackoverflow sites, but with an logo at the far right. I have tried:

shinyUI(
   navbarPage (title="test Page" ,
      img(src="mylogo.gif", style="float:right; padding-right:25px"),
      tabPanel(title="Panel 1",...)
 ))

However all this does is display the image in the far right below the navigation bar, instead of the content of the first tab (Note - the image is in the www directory as required).

I can use the icon= argument, but that put the icon on the tab in the browser.

Any ideas on how to put the image on the navigation bar itself?

Chantal

and why don't you just code it as $logo = "<img src....... />"; ??? – Timberland

I don't follow, I tried adding this where I have the img() now and all I get is an error about an unexpected $. Where should I add this? – Chantal

change: shinyUI( navbarPage (title="test Page" , img(src="mylogo.gif", style="float:right; padding-right:25px"), tabPanel(title="Panel 1",...) )) into: $logo = "<img src..etc.etc.. />"; and just do echo($logo); on the place you need/want to add it – Timberland

I don't really get why you're doing it like this. it's only 1 logo... and even if it should support multiple theme logo's I would do it like: $logo = Array('theme1' => '<img src="..." />', 'theme2' => '<img src="..." />'); and you still end up as writing it as html anyways xD – Timberland

Oh wait I read your question wrong xD I am actually taking it as plain php not shinyUI – Timberland

Answer 1

I can now answer this question, at least for shiny 0.10.0. The general idea is to set the title= to a div() that contains both the image and the text for the the title.

This however, creates a new problem in that the icon= argument no longer works, and you cannot set a title for the window. To get around this I followed Andy Singleton's advice here.The advice is to create a fluidPage() above the navbarPage() that can be used to hold the window title and icon. By making this page 0 pixels in height, it is hidden on the app. Here is the key bits of code.

ui.r:

shnyUI(
  fluidPage(
     list(tags$head(HTML('<link rel="icon", href="MyIcon.png", 
                                   type="image/png" />'))),
     div(style="padding: 1px 0px; width: '100%'",
         titlePanel(
                title="", windowTitle="My Window Title"
         )
      ),
      navbarPage(
         title=div(img(src="myLogo.gif"), "My Title in the Navbar"),
         tabPanel(....

Chantal

Answer 2

For those of you who have more than one image in the navbar, the title= will only work for one of the images, unless you like horrendous formatting.

This code below allows the user to append the header with a new image that is also hyperlinked. I used this to create a GitHub logo and link my repository.

# Create Right Side Logo/Image with Link       
tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><a href=\"URL\"><img src=\"Logo.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a></div>');
    console.log(header)")
    ),

header.append through </a></div>');NEEDS TO BE IN ONE ROW OF CODE IN R

All we are doing is tagging this section of code as HTML script, therefore everything is passed as a character string to R, and read as HTML code. Luckily we can change the size of the picture, and move it around using padding-left,right,top,bottom: _px.

Note that container-fluid is my nav-bar, but it may be different for your app. Additional formatting options can be included in the style portion of the code.

Note that you may also add text, and link it in this manner as well.

# Create Right Side Text
 tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>Follow us on GitHub</h3></div>');
 )),

Again make sure header.append through </div>'); are in the same line of code in R

Cawley

I fail to load the image, if I save the script in .js file. The code is read but does not include the image – Hobbledehoy

hi, I know the last edition was made more than a year ago but I would really like to have a navbarpage similar to yours and I can't figure out how to include your code in the ui. Would you mind adding a small reproducible example to your post (if possible with the github image as well)? – Rootless

actually I posted this as a new question here – Rootless

Just to complement this excellent answer: you can paste the tags$script() inside the title call. For example: navbarPage(title=div("Some Title", tags$script(...)), rest of code). I was unsure at first where to place this additional piece of code, but if you specify the title as a div() you can simply include it there. – Hypermetropia

Great answer! I guess it's obvious for everybody but took me a while to figure out, there is a missing space in <ahref=\"URL\">. – Osmose

@Chabo, how did you make your buttons aligned to the bottom of the bar and how did you changed colour of it? – Macrophage

Answer 3

This is based on @John Paul's answer but seems simpler to me. First put your page title in a variable since we will use it twice -- as the window title and on our page:

PAGE_TITLE <- "My great title"

Below in your fluid page:

  titlePanel(windowTitle = PAGE_TITLE,
             title =
               div(
                 img(
                   src = "my_logo.png",
                   height = 100,
                   width = 100,
                   style = "margin:10px 10px"
                 ),
                 PAGE_TITLE
               )
             ),

M

Answer 4

Here is a solution I made based on the previous great answers:

 ui <- 
   fluidPage(  
       list(
         tags$head(
           HTML('<link rel="icon" href="favicon.png" 
                type="image/png" />'))),

    navbarPage("App user name", windowTitle = "App name",
    ...

The place for saving images is "www" folder on the Shiny app server:

shinyApp/app.R
shinyApp/www/favicon.png

Vilma