NavebarMenu is always highlighted

Question

I have navbarPage inside which there are three navbarMenu . But the first navbarMenu ie, "Help" is always highlighted by default and the navbarMenu tabpanel "Manual" is always highlighted with this. How to avoid this. Sample code is shown below.

ui.r

 shinyUI(fluidPage(theme = "bootstrap.css", (navbarPage("B Version", position = c("fixed-top"), fluid=TRUE, navbarMenu("Help", tabPanel( a("Manual", target="_blank", href="Manual.pdf") ), tabPanel( a("Supporte", target="_blank", href="gpl.pdf") ), tabPanel( a("Tutorials", downloadLink("AbE", "Expression", class=" fa fa-cloud-download"), downloadLink("DiEx", "Expression", class=" fa fa-cloud-download") ) ) ), navbarMenu("Sample Data", tabPanel( downloadLink("AData", " Aff", class=" fa fa-cloud-download") ), tabPanel( downloadLink("CData", " Code", class=" fa fa-cloud-download") ), tabPanel( downloadLink("IData", " Il", class=" fa fa-cloud-download") ) ), navbarMenu("Stand-Alone Version", tabPanel( downloadLink("CodeandData", " app", class=" fa fa-cloud-download") ), tabPanel( a("Stand-alone Manual", target = "_blank", href= "Stand-alone.pdf") ) ) ) ) ) ) 

server.r

 shinyServer(function(input, output,session) { }) 

----------------------------------------------- --- -----------------

* Edit

This part shows how it reacts to the response provided by @amrrs. It displays data when the cursor is pressed, and then disappears again.

ui.r

 shinyUI(fluidPage(theme = "bootstrap.css", tags$script("setInterval(function(){ $('.active').removeClass('active');//remove class active },1000);"), (navbarPage("B Version", position = c("fixed-top"), fluid=TRUE,selected = "none", navbarMenu("Help", tabPanel( a("Manual", target="_blank", href="Manual.pdf") ), tabPanel( a("Supporte", target="_blank", href="gpl.pdf") ), tabPanel( a("Tutorials", downloadLink("AbE", "Expression", class=" fa fa-cloud-download"), downloadLink("DiEx", "Expression", class=" fa fa-cloud-download") ) ) ), navbarMenu("Sample Data", tabPanel( downloadLink("AData", " Aff", class=" fa fa-cloud-download") ), tabPanel( downloadLink("CData", " Code", class=" fa fa-cloud-download") ), tabPanel( downloadLink("IData", " Il", class=" fa fa-cloud-download") ) ), navbarMenu("Stand-Alone Version", tabPanel( downloadLink("CodeandData", " app", class=" fa fa-cloud-download") ), tabPanel( a("Stand-alone Manual", target = "_blank", href= "Stand-alone.pdf") ) ) ) ), br(), br(), sidebarLayout( sidebarPanel( h5("Upload Data Files",style="bold"), fileInput("files", "Choose CSV/txt processed files or raw files", multiple = "TRUE", accept=c('text/csv', 'text/comma-separated-values, text/plain', '.csv','.cel','.TXT','.txt')) ), mainPanel( tabsetPanel(id = "MaTabs", tabPanel("Source-data", dataTableOutput("sourced")) ) ) ))) 

server.r

 shinyServer(function(input, output,session) { output$sourced <- renderDataTable(mtcars) }) 

Answer 1

Based on this answer adds a small js snippet.

Updated hidden activity code only for nav:

  shinyUI(fluidPage(theme = "bootstrap.css", tags$script("setInterval(function(){ $('.nav').removeClass('active');//remove class active },1000);"), (navbarPage("B Version", position = c("fixed-top"), fluid=TRUE,selected = "none", navbarMenu("Help", tabPanel( a("Manual", target="_blank", href="Manual.pdf") ), tabPanel( a("Supporte", target="_blank", href="gpl.pdf") ), tabPanel( a("Tutorials", downloadLink("AbE", "Expression", class=" fa fa-cloud-download"), downloadLink("DiEx", "Expression", class=" fa fa-cloud-download") ) ) ), navbarMenu("Sample Data", tabPanel( downloadLink("AData", " Aff", class=" fa fa-cloud-download") ), tabPanel( downloadLink("CData", " Code", class=" fa fa-cloud-download") ), tabPanel( downloadLink("IData", " Il", class=" fa fa-cloud-download") ) ), navbarMenu("Stand-Alone Version", tabPanel( downloadLink("CodeandData", " app", class=" fa fa-cloud-download") ), tabPanel( a("Stand-alone Manual", target = "_blank", href= "Stand-alone.pdf") ) ) ) ), br(), br(), sidebarLayout( sidebarPanel( h5("Upload Data Files",style="bold"), fileInput("files", "Choose CSV/txt processed files or raw files", multiple = "TRUE", accept=c('text/csv', 'text/comma-separated-values, text/plain', '.csv','.cel','.TXT','.txt')) ), mainPanel( tabsetPanel(id = "MaTabs", tabPanel("Source-data", dataTableOutput("sourced")) ) ) ))) 

Answer 2

To remove selection from the first navbarMenu , you can add the selected = "none" argument to navbarPage . To remove selection from navbarMenu tabpanel , you can use the following css:

tags$style(type = 'text/css', ".navbar-default .navbar-nav .open .dropdown-menu .active a{color : #333; background-color:#f5f5f5;}")

So, in your code, it will be something like this:

 shinyUI(fluidPage(theme = "bootstrap.css", tags$style(type = 'text/css', ".navbar-default .navbar-nav .open .dropdown-menu .active a{color : #333; background-color:#f5f5f5;}"), (navbarPage("B Version", position = c("fixed-top"), fluid=TRUE,selected = "none", navbarMenu("Help", tabPanel( a("Manual", target="_blank", href="Manual.pdf") ), tabPanel( a("Supporte", target="_blank", href="gpl.pdf") ), tabPanel( a("Tutorials", downloadLink("AbE", "Expression", class=" fa fa-cloud-download"), downloadLink("DiEx", "Expression", class=" fa fa-cloud-download") ) ) ), navbarMenu("Sample Data", tabPanel( downloadLink("AData", " Aff", class=" fa fa-cloud-download") ), tabPanel( downloadLink("CData", " Code", class=" fa fa-cloud-download") ), tabPanel( downloadLink("IData", " Il", class=" fa fa-cloud-download") ) ), navbarMenu("Stand-Alone Version", tabPanel( downloadLink("CodeandData", " app", class=" fa fa-cloud-download") ), tabPanel( a("Stand-alone Manual", target = "_blank", href= "Stand-alone.pdf") ) ) ) ) ) ) 

With this, you get output like:

and