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?

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(....