Selecting a tab inside nav_menu toggles the dropdown

Question

I have a question about nav_menu and nav_select from bslib.

When I try to select a tab that is nested inside a nav_menu, the page navigates to the new tab, but it also opens the nav_menu dropdown list as it were clicked, instead of selected from the server. Then, the dropdown does not close until the nav menu button is clicked again. Clicking elsewhere on the page does not toggle it.

Has anyone seen this? Is it expected behavior? Any ways around it? Thanks!

A reprex:

library(shiny)
library(bslib)
library(rlang)

nav_items <- function(prefix) {
  list(
    nav("a", tagList(
      paste(prefix, ": tab a content"),
      actionButton(inputId = "go_to_tab_c", label = "Go to tab C")
    )),
    nav("b", paste(prefix, ": tab b content")),
    nav_item(
      tags$a(icon("github"), "Shiny", href = "https://github.com/rstudio/shiny", target = "_blank")
    ),
    nav_spacer(),
    nav_menu(
      value = "ya",
      title = "Other links",
      align = "right",
      nav("c", paste(prefix, ": tab c content")),
      nav_item(
        tags$a(
          icon("r-project"),
          "RStudio",
          href = "https://rstudio.com",
          target = "_blank"
        )
      )
    )
  )
}

ui <- page_fluid(
  shinyjs::useShinyjs(),
  page_navbar(
    id = "main_nav",
    title = "Page",
    bg = "#0062cc",
    !!!nav_items(prefix = "page_navbar")
  )
)

server <- function(input, output, session) {
  observeEvent(input$go_to_tab_c, {
    nav_select(id = "main_nav", selected = "c")
  })

}

shinyApp(ui, server)

score 1 · Answer 1 · answered Jun 20 '23 at 18:55

For anyone arriving here, please read through this thread on the bslib repo about the underlying reason why this happens. In short, it's a change in Bootstrap 5 that propagates through bslib and then shiny. The thread also includes some example code how to close the nav_menu using some JS from the shiny server.

Selecting a tab inside nav_menu toggles the dropdown

1 Answers1