Tabset navigation issue with Shiny/bslib

,

Hi all, I've got an issue with navigation within a shiny app that uses the bslib package. I have a button on a panel, that when clicked, should change the active panel in the app. It works fine, but there is a funky side effect where the tab link, which lives inside of a nav_menu() object, is displayed when the button is pressed. The sample shiny app code below demonstrates the problem. I am guessing that I'm just implementing this incorrectly out of ignorance, I'm pretty new to Shiny. What is the proper way to do this? This must be a common situation, but I'm not finding anything that speaks to it.

Cheers!

library(shiny)
library(bslib)

# Define UI for application that draws a histogram
ui <- page_navbar(
  id = "master-page",
  title = "My App",
  nav_panel(title = "One", actionButton("do_test", label = "Click me")),
  nav_spacer(),
  nav_menu(
    title = "Reports",
    align = "right",
    nav_panel(title = "Two", value="panel-2", p("Second page content.")),
    nav_panel("Three", value="panel-3", p("Third page content.")),
  )
)


# Define server logic required to draw a histogram
server <- function(input, output, session) {
  observeEvent(input$do_test, {
    nav_show("master-page", "panel-2", TRUE, session)
  }, ignoreInit = TRUE)
}

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

I'm not seeing that. This is what I see before I click the button:


This is what I see after clicking it:

Where do you see the tab link being displayed?

In your second screenshot, notice that the nav menu on the far right is expanded. I think that this is because that is the active tab and since it's in a menu, it is expanding. But this isn't a good user experience, so I'm trying to figure out how to suppress that behaviour.

Looks like a limitation in bslib. See here, which links to a bslib issue (including some code that might be usable to shut the menu after it drops down ... maybe).

Ah, that's interesting. Thank you. I can see why they do what they do from a UX/a11y perspective. I'll have to ponder the best way to handle it. Either a work around or refactor my tab navigation. Thanks for you help!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.