R Shiny navbarMenu

Question

I'm developing a Shiny app using the development version of the package, as documented here.

When I use navbarPage with tabsetPanel, everything works as expected:

library(shiny)

shinyUI(
    navbarPage("Page Title",

        tabPanel("Panel 1")
        tabPanel("Panel 2"),
        tabPanel("Panel 3"))
)

But when I add a navbarMenu to one of the tabs:

library(shiny)

shinyUI(
    navbarPage("Page Title",

        navbarMenu("Menu",
            tabPanel("Panel 1.1"),
            tabPanel("Panel 1.2")),
        tabPanel("Panel 2"),
        tabPanel("Panel 3"))
)

The text 'tab-pane active' appears on every tab of the app, even the ones not inside the navbarMenu. It seems like 'tab-pane active' is a CSS class that should be inside of a div tag, but somehow it's appearing as plain text in the page source code.

Does anyone have an idea about what's causing that, or how it can be fixed?

Answer 1

I wish I could find a good analogy or were a better writer to explain this in few words.

But I think of it in terms of containers and content. In your fist example you have a "navbar page". That is a container that can be filled with other "pages" such as tabPanels.

But tabPanels cannot be filled with tabPanels, only with content like graphs or tables that your R output is generating. If you want a page with multiple tabPanels you need a container that is able to contain them: a tabsetPanel (literally a set of tabpanels).

shinyUI(
    navbarPage("Page Title",
        tabPanel("Panel 1",
            tabsetPanel(
              tabPanel("Panel 1.1"),
              tabPanel("Panel 1.2")
            )),
        tabPanel("Panel 2"),
        tabPanel("Panel 3")
        )
)

now you will see that you have an extra "page" set by the tabsetPanel (a set of tabs) with its own tabs.

You can try to follow that analogy through with other examples on the shiny app layout guide that you link to. So for instance, in your example you will never be able to make a submenu but just adding another tabPanel to a tabPanel (a tabPanel cannot be a container for a tabPanel as we saw above). You would first need to say that you want a navbarMenu, which in fact can contain multiple tabPanels.

It seems complex because navigation and pages are very closely related, and if a container contains containers, it becomes in practice a navigation item. There are good hints in the terms that the RStudio team chose for these lay-out items, but it is not always immediately obvious how it works.