3

I want to build a multipage shiny application where I can control which page the user can see. Dean Attali does something similiar in this demonstration app, using shinyjs to hide and show each page.

I suppose there could also be ways to do this by using navbar(), navlist() or tabsetPanel(), if one can hide the navigation bar or the navigation list. Advantages would be to update pages simply via updateTabsetPanel(), updateNavbarPage() or updateNavlistPabel(), and that shinyjs is not neccesary any more.

So my question is: How can I hide the navigation bar of navbarPanel(), for example using CSS?

An example application can be found here: https://shiny.rstudio.com/gallery/navbar-example.html. I tried to include some CSS in this example to hide the navigation bar, but until now I only managed to hide everything (by setting .navbar to visibility:hidden) or everything but the navbar-title (by setting .navbar-nav to visibility:hidden). What is the correct element to hide - or the correct combination of elements to hide and of subelements to make visible again?

EDIT: As Chabo pointed out - the main problem seems to be that when the visibility for the navbar is set to hidden, or even display=none, the app does not set an active tab so nothing else shows up.

#https://shiny.rstudio.com/gallery/navbar-example.html

library(shiny)

ui<-  navbarPage("Navbar!",
                 tags$head(
                   #here something is wrong. 
                   # .navbar makes everything invisible
                   #.navbar-nav makes everything invisible but the navbar-title
                   tags$style(HTML("
                                   .navbar-nav{
                                      visibility: hidden;
                                   }

                                   ")
                              )
                   ),
           tabPanel("Plot",
                    sidebarLayout(
                      sidebarPanel(
                        radioButtons("plotType", "Plot type",
                                     c("Scatter"="p", "Line"="l")
                        )
                      ),
                      mainPanel(
                        plotOutput("plot")
                      )
                    )
           ),
           tabPanel("Summary",
                    verbatimTextOutput("summary")
           )
)



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)
    })
  }



shinyApp(ui, server)
Julian
  • 741
  • 8
  • 19
  • What did you try? I guess you can just add an id to your `navbarPanel` and use `shinyjs::hide` – Wilmar van Ommeren Nov 27 '18 at 14:22
  • I want to avoid `shinyjs`, and I also want to hide only the navigation bar of the navbarPanel, not the content. – Julian Nov 27 '18 at 15:08
  • 1
    I see your problem now. The main problem is that when the visibility for the navbar is set to hidden, or even `display=none`, the app does not set an active tab so nothing else shows up. One ugly workaround you could do is set all the navbar elements to white (background color) so that they do not show up but are still active. The only problem with this is that you can still scroll over the elements and they will show then. – Chabo Nov 28 '18 at 15:49
  • Also the option to move the element ouf of the viewport ("position" mentioned in https://www.sitepoint.com/five-ways-to-hide-elements-in-css/) doesn't seem to work. I suppose because of the dynamics of shiny setting or not setting the active tab according to visibility of the navbar, there will probably be no pure CSS-Solution? On the other hand, I am not really into CSS.I try and adapt found pieces, but I don't really know what I do... – Julian Nov 28 '18 at 16:50

0 Answers0