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?

This appears to be a bug in Shiny that occurs if the first item in a `navbarPage` is a `navbarMenu`. I've filed this as [issue #855](https://github.com/rstudio/shiny/issues/855) — Joe Cheng, Jun 08 '15 at 18:50
@JoeCheng I know it's not fixed, but is there any workaround for this? (I tried to add an empty tabpanel, but the result is just ugly) — lucacerone, Feb 16 '16 at 22:49

FvD · Answer 1 · 2019-07-25T17:11:41.333

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.

enter image description here

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.

Thanks, I appreciate the suggestion, and that may be a good enough workaround. But still I don't see why my example isn't the right thing to do when something just like it is clearly shown as an example by RStudio in the link that I provided. — MDe, Mar 16 '14 at 16:24
Great code and great image (the jargon killed me though). Thanks! — PatrickT, May 12 '14 at 09:04
When I run this example today I get "ERROR: $ operator is invalid for atomic vectors" - I presume something has changed in the Shiny API?... — Peter Ellis, Jul 25 '19 at 00:52
Thanks @PeterEllis, I was not aware of the change. It turns out we can no longer name the tabsetPanel itself. When you remove it, the example works again as intended. I will update the code above. — FvD, Jul 25 '19 at 17:10

R Shiny navbarMenu

1 Answers1

Linked