How to implement a multiple-level-drop-down menu in Shiny

shiny
1

Hi, All

I am considering to implement a cascading dropdown menu, the children's menu items are dependent on their parents' selections.

I am not sure what's the best approach to achieve this.

Can I implement this by manipulating the existing Shiny widgets or should I build my input objects (Shiny - Build custom input objects) ? What is the effort to implement this?

image

Any comments are really appreciated.

Liang

1 Like
2

I think navbarMenu will do the trick?

navbarPage("App Title",
  tabPanel("Plot"),
  navbarMenu("More",
    tabPanel("Summary"),
    "----",
    "Section header",
    tabPanel("Table"),
    navbarMenu("Even more",
       tabPanel("whatever")
   )
  )
)

Haven't tested it though.

3

Nice idea @stkrog. I'd expect that to work but it doesn't seem to. A caret is shown for Even more but the sub-menu is not accessible. See example below

library(shiny)
ui <- navbarPage("Navbar",
  navbarMenu("More",
    tabPanel("Plot", plotOutput("plot")),
    tabPanel("Summary 1", verbatimTextOutput("summary1")),
    navbarMenu("Even more",
      tabPanel("Summary 2", verbatimTextOutput("summary2"))
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars)
  })

  output$summary1 <- renderPrint({
    summary(cars)
  })

  output$summary2 <- renderPrint({
    summary(mtcars)
  })
}

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

Should have look for issues first it seems :slight_smile:

5

Yeah, I found that one too (issue #469) when I looked deeper :slight_smile:. It's from 2014, and no solution in 2017, so hopes are low...

6

Maybe but there is still hope. See the example below

https://twitter.com/daattali/status/979456342179037189?s=19

7

I am afraid I do not have a solution, but I can offer some history and hopefully insight. For any unaware, shiny's ui functions and features are built on top of Bootstrap. Bootstrap is a library of web components built with JavaScript, HTML, and CSS. The latest iteration of Bootstrap is version 4 and does not support multi-level menus. However, at one time Boostrap did include these menus. In the second version of Bootstrap multi-level menus were a native component and are listed under "Sub menus on dropdowns" here. Then in the next and third iteration of Bootstrap the team changed the focus of the library. Bootstrap 3 emphasized itself as a "framework for mobile first projects." This new emphasis seems to have lead Mark Otto, one of Bootstrap's creators, to remove multi-level menus as they are not mobile friendly. Thus, Bootstrap 3 shipped without these menus. I get the impression users never gave up on the idea and during development of the fourth and current iteration of Bootstrap the menus were again brought up.

(After reading through that issue I appreciate the R community all the more)

Unfortunately, the component was again ignored. However, many have risen to the challenge of creating an alternative and would I try Google-ing around for "bootstrap 4 multi level menu/dropdown/navbar."

Coming back around to shiny, even if a later version of Bootstrap would include these menus, Bootstrap 3, the version currently used by shiny, will not. The Bootstrap team still pushes small updates, see here for upcoming tweaks and fixes, but I cannot see them retroactively adding such a component. Alternatively someone could build a standalone menu component on top of Bootstrap 3 specifically for shiny and submit a pull request. I would check-in with the shiny team first on that one.

I hope the mini history lesson was entertaining. I am sorry I don't have a tried and true solution.

p.s. I would also welcome an issue or pull request to dull, a Bootstrap 4 version of shiny I have been working on.

2 Likes