CODEWITHSUNDEEP
rshinyshinydashboard
FortuneFaded
FortuneFaded

Reputation: 1329

R Shiny Dashboard - Custom Dropdown Menu In Header

From the shiny dashboard github, I've gathered that it's possible to create drop down menus at the top right of the header, but there are only 3 "types" (messages, notifications, and tasks).

https://rstudio.github.io/shinydashboard/structure.html#structure-overview

Is there a method for creating a custom dropdown? I'd like to make a settings dropdown, where I give the user some checkboxes that they can use to adjust the dashboard in ways (displaying/hiding things, filtering data, etc.)

Upvotes: 0

Views: 7288

Answers (2)

Billy34
Billy34

Reputation: 2174

I customized one of the three types of menu to allow this. You could then add actionItem(s) for items. tabSelect property when true simulate the selection of a sidebarMenuItem.

dropdownActionMenu <- function (..., title=NULL, icon = NULL, .list = NULL, header=NULL) {
  items <- c(list(...), .list)
  lapply(items, shinydashboard:::tagAssert, type = "li")
  type <- "notifications" # TODO créer action + CSS
  dropdownClass <- paste0("dropdown ", type, "-menu")
  tags$li(class = dropdownClass, a(href = "#", class = "dropdown-toggle",
    `data-toggle` = "dropdown", icon, title), tags$ul(class = "dropdown-menu",
    if(!is.null(header)) tags$li(class="header",header),
    tags$li(tags$ul(class = "menu", items))))
}

actionItem = function (inputId, text, icon = NULL, tabSelect=FALSE) {
  if(!is.null(icon)) {
    shinydashboard:::tagAssert(icon, type = "i")
    icon <- tagAppendAttributes(icon, class = paste0("text-", "success"))
  }
  if(tabSelect) {
    tags$li(a(onclick=paste0("shinyjs.tabSelect('",inputId,"')"),icon,text))
  } else {
    tags$li(actionLink(inputId,text,icon))
  }
}

javascript function to select tab (to be inserted after useShinyjs() in body)

extendShinyjs(text="shinyjs.tabSelect=function(tabName){$('a[data-value='+tabName+']').click();}")

Sample code

dashboardHeader(
  dropdownActionMenu(title="test",
    actionItem("mnuFirst","First"),
    actionItem("mnuSecond","Second")
  )
)

Upvotes: 2

dracodoc
dracodoc

Reputation: 2763

Shiny Dashboard is based on admin LTE. So the existing type of drop downs are designed for admin LTE use case, which is quite different from many Shiny app usage.

If something is not even available in admin LTE, it's less likely to be supported in Shiny dashboard.

For your specific question, you can put some controls in the side bar. Another possibility is to use the wrench icon in box, which is not implemented in Shiny yet.

Upvotes: 0

Related Questions