Adding images in the title and at the right of navbarPage

Question

I would like to include a small image at the left of the title of my navbarPage, and to include another image completely at the right of this same navbarPage. I found this answer which provides the same layout than the one I would like to have. The problem is that this solution does not provide a fully reproducible example and I can't figure out how to include the chunks of code in the ui part.

Does anybody know how to make a reproducible example from this answer?

Here's what I've tried so far:

library(shiny)

ui <- navbarPage(
  tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
  )),
  tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a>`</div>');
    console.log(header)")
  ),

  title = div(img(src="image.png", height = '40px', width = '40px'), "something"),
  tabPanel("foo")
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

This is the image called image.png. I put it in the www folder, which is placed in my app directory.

There are mainly two things to solve: * some text is displayed on the below the navbar whereas it shouldn't be displayed at all * the image and the text at the left are not centered

Vedha Viyash · Answer 1 · 2020-02-10T21:09:20.730

I did not make any change to your code (well except the tags$head() at the begining, but that's an add on).

The only problem with your code is not the problem in your code, is the problem in your files structure.
You have to place your images inside a new folder called www (Note that the folder www is in the same place as your R code which is app.R or ui.R).

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "shortcut icon", type = "image/png", href = "image.png"),
    tags$title("Browser tab title")
  ),
  navbarPage(
    tags$script(HTML("var header = $('.navbar > .container-fluid');
 header.append('<div style=\"float:right\"><h3>This is R</h3></div>');"
    )),
    tags$script(HTML("var header = $('.navbar > .container-fluid');
header.append('<div style=\"float:right\"><ahref=\"URL\"><img src=\"image.png\" alt=\"alt\" style=\"float:right;width:33px;height:41px;padding-top:10px;\"> </a></div>');
    console.log(header)")
    ),
    title = tags$div(img(src="image.png", height = '40px', width = '40px'), "something"),
    tabPanel("foo")
  )
)
server <- function(input, output, session) {

}

shinyApp(ui, server)

Note: I've added the navbarPage inside a fluidPage because without the fluidPage, the title of the NavBarPage will be the title in the browser tab!
But now the main UI is the fluidPage so it's title will be the browser title.
this also gives you flexiblity to add a new image for the browser tab, different from the navbar page's tab.
Here's the screen shot of the output.
Hope this helps!

as said in my post, the image is placed in ```www```. Your screenshot clearly shows that the layout is not good: the image and the title are not really centered, there"s a backtick next to the image at the right, and a part of the code is displayed on the page whereas it shouldn't be. Is it possible to correct it? — bretauv, Feb 10 '20 at 20:46
Sorry I didn't read your question properly, You can remove the ` by removing it inside "`". But I couldn't find a solution for the messed up tabs due to addition of these scripts. So I highly recommend you to try out "bs4Dash", It's a modern dashboard with all these features. For a quick start you can visit here https://github.com/vedhav/bs4DashExample — Vedha Viyash, Feb 10 '20 at 21:06
Thanks, I will check this out but it seems to be a big change of design for not a big problem (by the way, there are some errors in your example with ```DropdownMenuItem``` for example) — bretauv, Feb 10 '20 at 21:16

Adding images in the title and at the right of navbarPage

1 Answers1

Linked