CODEWITHSUNDEEP
rpanelshiny
WJH
WJH

Reputation: 581

Using panels without navigation menu in r Shiny?

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.

Upvotes: 0

Views: 867

Answers (1)

SBista
SBista

Reputation: 7704

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!

Upvotes: 4

Related Questions