Search code examples
cssrshinyshinydashboard

How can I make a tab of a shinydashboard invisible?

I've tried using CSS styling (that works on buttons) to hide the third tab of the following app:

library(shiny)
library(shinydashboard)
library(shinyDashboardPlus)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
      id = "tabs",  # Set an ID for the sidebar menu
      menuItem("Tab 1", tabName = "tab1"),
      menuItem("Tab 2", tabName = "tab2"),
      menuItem("Invisible Tab", tabName = "invisible_tab", style = "visibility: hidden;")
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",
        useShinyjs()
      ),
      tabItem(
        tabName = "tab2",
        useShinyjs(), 
        h3("tab2")
      ),
      tabItem(
        tabName = "invisible_tab",
        h3("Invisible Tab Content")
      )
    )
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

The content of the tab is not displayed, but the title of the tab remains in the sidebar... How can I hide it just as is did not exist?

Solution

  • All menuItem are defined by an <a> tag with an href attribute which is constructed as #shiny-tab-[tabName], where tabName is the corresponding parameter of menuItem.

    Hence if you define your menuItem using

    menuItem("Invisible Tab", tabName = "invisible_tab")

    then you can apply the CSS

    a[href = '#shiny-tab-invisible_tab']{
    visibility: hidden;
}

    for setting it unvisible.

    enter image description here

    library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
        tags$head(tags$style(HTML("
                                  a[href = '#shiny-tab-invisible_tab']{
                                      visibility: hidden;
                                  }
                                  "))),
        sidebarMenu(
            id = "tabs",  # Set an ID for the sidebar menu
            menuItem("Tab 1", tabName = "tab1"),
            menuItem("Tab 2", tabName = "tab2"),
            menuItem("Invisible Tab", tabName = "invisible_tab")
        )
    ),
    dashboardBody(
        tabItems(
            tabItem(
                tabName = "tab1",
                useShinyjs()
            ),
            tabItem(
                tabName = "tab2",
                useShinyjs(), 
                h3("tab2")
            ),
            tabItem(
                tabName = "invisible_tab",
                h3("Invisible Tab Content")
            )
        )
    )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)