Shiny NavBar add additional info

Question

Since my code is long I have considered the example code from here

I tried adding the following code (after last tabPanel) from here. But no luck.

tags$script(HTML("var header = $('.navbar > .container');
                        header.append('<div Company name text here>')"))

All I want is a plain text (information) to be on the right hand side of the NavBar.

SBista · Accepted Answer · 2018-10-06T04:33:24.797

The following code gives you what you want. The main problem was with tour html tags.

library(shiny)


server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}


ui <-shinyUI(navbarPage("Navbar!",
           tabPanel("Plot",
                    sidebarLayout(
                      sidebarPanel(
                        radioButtons("plotType", "Plot type",
                                     c("Scatter"="p", "Line"="l")
                        )
                      ),
                      mainPanel(
                        plotOutput("plot")
                      )
                    )
           ),
           tabPanel("Summary",
                    verbatimTextOutput("summary")
           ),


           tags$script(HTML("var header = $('.navbar > .container');
                       header.append('<div style=\"float:right\"><h3>Company name text here</h3></div>');
                       console.log(header)"))
))

shinyApp(ui = ui, server = server)

Hope it helps!

[EDIT]: Due to recent changes in the navbar classes the above code doesn't work anymore. The below code seems to work:

library(shiny)


server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}


ui <-shinyUI(navbarPage("Navbar!",
                        tabPanel("Plot",
                                 sidebarLayout(
                                   sidebarPanel(
                                     radioButtons("plotType", "Plot type",
                                                  c("Scatter"="p", "Line"="l")
                                     )
                                   ),
                                   mainPanel(
                                     plotOutput("plot")
                                   )
                                 )
                        ),
                        tabPanel("Summary",
                                 verbatimTextOutput("summary")
                        ),


                        tags$script(HTML("var header = $('.navbar> .container-fluid');
                       header.append('<div style=\"float:right\"><h3>Company name text here</h3></div>');
                       console.log(header)"))
))

shinyApp(ui = ui, server = server)

The only change is that in the html script .navbar > .container has been change to .navbar> .container-fluid.

@MLavoie thanks for the heads up! I have edited the answer so that it works with the latest `shiny` package. — SBista, Oct 06 '18 at 04:28
This code works for me, but it adds hidden button on the laeft with no text which contains JS code oftags%script. — Mislav, Oct 09 '19 at 11:32

score 0 · Answer 2 · answered Oct 29 '20 at 20:55

I found another elegant/minimalist way to add text into the navbar using the package "shinyjs", with the added benefit of what i wanted, the ability to stack text on the right hand side of the navbar. It is in the "shinyjs::html()" function located in "server"

library(shiny)

ui <- fluidPage(
    shinyjs::useShinyjs(),#this line NEEDS to be somewhere in the ui!
    navbarPage(
        title = HTML("<b><u>Title</u></b>"),
        id = 'banner'
    )
)

server <- function(input, output) {
    
    shinyjs::addClass(id = "banner", class = "navbar-right")#moves navbar right
    #this next line is the one APPENDING text to the navbar, thanks to "add = TRUE"
    shinyjs::html(id = "banner", html = "<p>companyName</p><p>company@place.com</p>", add = TRUE)

}

# Run the application 
shinyApp(ui = ui, server = server)

Shiny NavBar add additional info

2 Answers2

Linked