Switch between the tabItems shiny dashboard

Question

I'am in the process of creating a shiny dashbord, I create 3 tabItems the problem is that when I click on one of the menuItem I can not click on again, i can't switch between the tabItems . Can someone help me please the code R #UI

 library(shiny)
 library(shinydashboard)

 shinyUI(dashboardPage(skin = "black",
 dashboardHeader(title = h4("Tableau de bord des élections",style =      "color:navy"),
 titleWidth = 300
 ),
 dashboardSidebar(id="", 
 menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
 menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
 menuItem(h4(strong("Interprétation")), tabName = "Interprétation")),



 dashboardBody(
    tabItems(
        tabItem(tabName = "dashboard",h2("Analyse du comportement électoral  des citoyens tunisiens", align="center",style = "color:navy") ),

        tabItem(tabName = "Prédiction", h2("Prédiction du vote",    align="center",style = "color:blue")),
        tabItem(tabName = "Interprétation", h2("Interprétation"))

        )
        )))

Could you include either the code you're working with, or a sample that generates the same problem? [Example](http://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example/5963610#5963610) — Sam, Aug 12 '16 at 20:00

score 11 · Answer 1 · answered Sep 12 '17 at 16:09

I know that your problem has been solved and that you probably won't change your code ~1years later, but for others like me encountering this problem I have a simpler solution.

You have to wrap all "menuItem" in the sideBarMenu() fonction. This will solve the problem and make the items in the menu bigger.

library(shiny)
library(shinydashboard)

shinyUI(dashboardPage(skin = "black",
dashboardHeader(title = h4("Tableau de bord des élections",style =      
"color:navy"),
titleWidth = 300
),
dashboardSidebar(id="", sidebarMenu(
menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
menuItem(h4(strong("Interprétation")), tabName = "Interprétation"))),

dashboardBody(
tabItems(
    tabItem(tabName = "dashboard",h2("Analyse du comportement électoral  des citoyens tunisiens", align="center",style = "color:navy") ),

    tabItem(tabName = "Prédiction", h2("Prédiction du vote",    align="center",style = "color:blue")),
    tabItem(tabName = "Interprétation", h2("Interprétation"))

    )
)))

score 0 · Answer 2 · edited May 23 '17 at 12:08

Good to know I'm not the only one who's run into this issue! If I understand your problem correctly, I had this same problem a couple months ago - Switching between menuSubItems in shinyDashboard. Try changing your sidebar code to add this: (I am certainly not the author of this snippet - but it solved my problem)

dashboardSidebar(id="", 
                 tags$head(
                   tags$script(
                     HTML(
                       "
                        $(document).ready(function(){
                          // Bind classes to menu items, easiet to fill in manually
                          var ids = ['dashboard','Prédiction','Interprétation'];
                          for(i=0; i<ids.length; i++){
                            $('a[data-value='+ids[i]+']').addClass('my_subitem_class');
                          }

                          // Register click handeler
                          $('.my_subitem_class').on('click',function(){
                            // Unactive menuSubItems
                            $('.my_subitem_class').parent().removeClass('active');
                          })
                        })
                        "
                     )
                   )
                 ),

                 menuItem(h4(strong("Dashboard", align = "center")), tabName = "dashboard"),
                 menuItem(h4(strong("Prédiction")), tabName = "Prédiction"),
                 menuItem(h4(strong("Interprétation")), tabName = "Interprétation"))

If you add new tabs, you can add their tabNames to the var ids line.

Switch between the tabItems shiny dashboard

2 Answers2