Using panels without navigation menu in r Shiny?

Question

Is it possible to use panels with navbarPage, navlistPanel, navbarMenu or tabsetPanel without showing the navigation menu?

I wrote the following script:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),

  navbarPage
  (
    title = NULL, id = "navBar",

    tabPanel
    (
      title = "01", value = "panel01",
      h1("First panel", align = "center"),
      actionButton("next01", "Next", width = "10%")
    ),

    tabPanel
    (
      title = "02", value = "panel02",
      h1("Second panel", align = "center"),
      actionButton("prev02", "Previous", width = "10%")
    )
  )
)

server <- function(input, output, session)
{
  observe(
  {
    hide(selector = "#navBar li a[data-value=panel02]")
  })

  observeEvent(input$next01,
  {
    hide(selector = "#navBar li a[data-value=panel01]")
    show(selector = "#navBar li a[data-value=panel02]")
    updateNavbarPage(session, "navBar", selected="panel02")
  })

  observeEvent(input$prev02,
  {
    hide(selector = "#navBar li a[data-value=panel02]")
    show(selector = "#navBar li a[data-value=panel01]")
    updateNavbarPage(session, "navBar", selected="panel01")
  })
}

shinyApp(ui = ui, server = server)

Since I have a 'previous' and 'next' button at the bottom of each panel, I don't need the menu and would like to get rid of the navigation menu on top of each panel.

It would be easier to help you if you provided a minimal [reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). — MrFlick, Oct 03 '17 at 15:45
The menu is already hidden with your code, no ? Or you want to get rid of "01" and "02" ? — Stéphane Laurent, Oct 04 '17 at 18:29
Yes, I would like to get rid of "01" and "02" and the gray bar in which they appear. — WJH, Oct 04 '17 at 20:31
You could add `hide(selector = "#navBar")` inside your `observe` — SBista, Oct 09 '17 at 14:41
Thank you! Is it also possible to get rid of the gray background of the navigation bar? — WJH, Oct 10 '17 at 15:56

SBista · Accepted Answer · 2017-10-19T16:06:14.970

As mentioned in the comment to hide the navigation menu you can add hide(selector = "#navBar") inside your observe.

To get rid of the gray background of the navigation bar you can add the following css tag in your ui: tags$style(type='text/css', "nav.navbar.navbar-default.navbar-static-top{border-color: #f5f5f5;background-color: #f5f5f5;}")

To further decrease the height of the navigation bar you can add the following two css tags: tags$style(type='text/css', ".navbar{min-height: 0px; margin-bottom: 0px;}") tags$style(type='text/css', ".navbar-brand{height: 0px; padding: 0px 0px;}")

So adding all these your code will look as follows:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$style(type='text/css', "nav.navbar.navbar-default.navbar-static-top{border-color: #f5f5f5;background-color: #f5f5f5;}"),
  tags$style(type='text/css', ".navbar{min-height: 0px; margin-bottom: 0px;}"),
  tags$style(type='text/css', ".navbar-brand{height: 0px; padding: 0px 0px;}"),
  navbarPage
  (
    title = NULL, id = "navBar",

    tabPanel
    (
      title = "01", value = "panel01",
      h1("First panel", align = "center"),
      actionButton("next01", "Next", width = "10%")
    ),

    tabPanel
    (
      title = "02", value = "panel02",
      h1("Second panel", align = "center"),
      actionButton("prev02", "Previous", width = "10%")
    )
  )
)

server <- function(input, output, session)
{
  observe(
    {
      hide(selector = "#navBar li a[data-value=panel02]")
      hide(selector = "#navBar")
    })

  observeEvent(input$next01,
               {
                 hide(selector = "#navBar li a[data-value=panel01]")
                 show(selector = "#navBar li a[data-value=panel02]")
                 updateNavbarPage(session, "navBar", selected="panel02")
               })

  observeEvent(input$prev02,
               {
                 hide(selector = "#navBar li a[data-value=panel02]")
                 show(selector = "#navBar li a[data-value=panel01]")
                 updateNavbarPage(session, "navBar", selected="panel01")
               })
}

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

Hope it helps!

Many thanks, this is exactly what I was looking for! – WJH Oct 19 '17 at 15:24 — WJH, Oct 19 '17 at 15:24

Using panels without navigation menu in r Shiny?

1 Answers1