How to open a menu SubItem with an actionButton

Question

I'm developing my first shiny app and I want to put some buttons on the mainPage that redirect to the menu subItens I've created.

I tried to do this using the menu subItens link, but it didn't work. So, I copied the code I used to do the menu subItens and put it in the actionButton code. It works well, but just on the first click. I need to reload the page to the button work again.

Do you guys have any idea how to fix it?

Here is the menuSubItem code

sidebarMenu( id = "tabs",
          menuItem("Conjuntura", tabName = "conjuntura", icon = icon("chart-bar"),
                   menuSubItem("Visão Geral",
                               tabName = "visao_geral"),
                   menuSubItem("Atividade Econômica",
                               tabName = "atividade_economica"),
dashboardBody(
        tabItems(
          # tab visão geral
          tabItem(
            tabName = "visao_geral",
            mod_conj_titulo_ui("titulo_ui_1")
          ),
          # tab conjuntura
          tabItem(
            tabName = "atividade_economica",
            mod_conj_atividade_economica_ui("atividade_economica_ui_1"),
            mod_conj_atividade_economica_es_ui("atividade_economica_es_ui_1")
            )

Here is the button code

actionButton(inputId = "atividade_economica", 
                 label = menuSubItem(HTML("<br>Atividade<br>Econômica"),
                                     tabName = "atividade_economica", 
                                     icon = icon("chart-line", class = "icon")),
                 class = "button"
                 )

I didn't put anything in the server to run the button. I think that that's the problem.

Please post a [MRE](https://stackoverflow.com/help/minimal-reproducible-example) so that we can reproduce the issue and shows how you are using the `actionButton`. — YBS, Nov 01 '21 at 22:10

thothal · Answer 1 · 2021-11-04T07:39:56.730

The easiest is to rely on the anyways loaded bootstrap JavaScript library, to handle the toggling for you. Thus, you just need to place a <a> tag somewhere, which has the appropriate data-toggle and data-value attributes properly set.

Some additional JavaScript to properly highlight the selected tab in the menu bar makes the whole approahc round:

library(shinydashboard)
library(shiny)

js <- HTML(paste("$(() => $('.mimic-menu').on('click', function() {",
                 "   const menu_item = $(this).data('value');",
                 "   const $parent = $('.sidebar-menu [data-value=\"' + menu_item + '\"]').closest('li');",
                 "   $('.sidebar-menu li').removeClass('active');",
                 "   $parent.addClass('active');",
                 "}));", sep = "\n"))

header <- dashboardHeader()

sidebar <- dashboardSidebar(
   sidebarMenu(
      id = "tabs",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets", badgeLabel = "new",
               badgeColor = "green"),
      menuItem("Charts", icon = icon("bar-chart-o"),
               menuSubItem("Sub-item 1", tabName = "subitem1"),
               menuSubItem("Sub-item 2", tabName = "subitem2")
      )
   )
)
body <- dashboardBody(
   tags$head(tags$script(js)),
   tabItems(
      tabItem("dashboard",
              div(p("Dashboard tab content"))
      ),
      tabItem("widgets",
              "Widgets tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem1",
              "Sub-item 1 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      ),
      tabItem("subitem2",
              "Sub-item 2 tab content",
              tags$a(href = "#shiny-tab-dashboard", `data-toggle` = "tab",
                     class = "btn btn-default mimic-menu",
                     `data-value` = "dashboard", "Click to go to dashboard")
      )
   )
)

shinyApp(
   ui = dashboardPage(header, sidebar, body),
   server = function(input, output) { }
)

Explanation

All we need to do is to use an <a> tag, which sets the attributes data-toggle = "tab" and data-value = <name of the tab we want to switch to>.
Then, bootstrap does the switching for us automagically.
However, this leads to the unclean state that the last selected menu item in the sidebar is highlighted, even if we switched the tab.
Thus, we add some custom JavaScript which reacts on clicks on the self-made links to select the proper item in the sidebar menu.
To give the link the look and feel of a button, we add the btn and btn-default class. The mimic-menu class is functional, to allow for triggering the aforementioned code.

Screenshot

Thank you! Unfortunately, it didn't work. The button works, but it opens a blank link. — Isabelly, Nov 03 '21 at 16:50
Well, without a minimal working example it will be difficult to tell. The example I showed, works on my PC at least. I will add a gif to show. — thothal, Nov 04 '21 at 07:19
Thank you for your help. I'm really new at this and I'm still learning how to do things. — Isabelly, Nov 08 '21 at 18:43

How to open a menu SubItem with an actionButton

1 Answers1

Explanation

Screenshot