"Enhance your shinydashboard with a customizable header dropdown feature that allows you

I am trying to create a vertical grouped dropdown menu in the header panel that contains multiple links. Currently, I can only achieve a flat horizontal layout using tags$li. I want to place linkA and linkB under grouplinkAB, allowing users to open one of them in a new window. I attempted to use dropdownMenu(type='notifications'...) as shown in the code snippet below, but I'm unsure how to specify the group name "grouplinkAB" and prevent the links from opening in a new window when clicked. Additionally, I would like to hide the text "You have 2 notifications" and accomplish this using tags$li and tags$ul, even though my knowledge of HTML is limited.

library(shinydashboard)
library(shiny)

runApp(
  shinyApp(
    ui = shinyUI(
      dashboardPage(
        dashboardHeader(title='Reporting Dashboard',
                        tags$li(class="dropdown",tags$a("grouplinkAB",href="http://stackoverflow.com/", target="_blank")),
                        tags$li(class="dropdown",tags$a("linkA",href="http://stackoverflow.com/", target="_blank")),
                        tags$li(class="dropdown",tags$a("linkB",href="http://stackoverflow.com/", target="_blank")),
                        dropdownMenu(type='notifications',
                                     notificationItem(text='linkA',href="http://stackoverflow.com/"),
                                     notificationItem(text='linkB',href="http://stackoverflow.com/")
                                     )
        ),
        dashboardSidebar(),
        dashboardBody()
      )
    ), 
    server = function(input, output){}
  ), launch.browser = TRUE
)
htmlcssrshinyshinydashboard

Answer №1

After coming across a similar request about a year ago, I decided to dig deeper this time around. Upon examining the dropdownMenu code, it was clear that it wasn't initially designed to handle the specific requirement. However, I realized that with some modifications, it could be tailored to meet the desired functionality quite easily.

Instead of tweaking the existing code, I took the initiative to develop a new version of dropdownMenu specifically optimized for this purpose.

Below is the customized code:

library(shinydashboard)

dropdownHack <- function (...,badgeStatus = NULL, .list = NULL,menuname=NULL) 
{
  if (!is.null(badgeStatus)){
    shinydashboard:::validateStatus(badgeStatus)
  }
  items <- c(list(...), .list)
  lapply(items, shinydashboard:::tagAssert, type = "li")
  dropdownClass <- paste0("dropdown ", "text-menu")
  numItems <- length(items)
  if (is.null(badgeStatus)) {
    badge <- NULL
  }
  else {
    badge <- span(class = paste0("label label-", badgeStatus), numItems)
  }
  tags$li(class = dropdownClass, a( href="#", class="dropdown-toggle", 
                                    `data-toggle`="dropdown", menuname, badge),
          tags$ul(class = "dropdown-menu",  items  )
  )
}

menuitemHack <- function(text,href){
  notificationItem(text=text,href=href,icon=shiny::icon("rocket") )
}

runApp(
  shinyApp(
    ui = shinyUI(
      dashboardPage(
        dashboardHeader(title='Reporting Dashboard',
                        dropdownHack(menuname="GroupAB",
                                     menuitemHack(text='linkA',href="http://stackoverflow.com/"),
                                     menuitemHack(text='linkB',href="http://stackoverflow.com/")
                        ),
                        dropdownMenu(type='notifications',
                                   notificationItem(text='linkA',href="http://stackoverflow.com/"),
                                   notificationItem(text='linkB',href="http://stackoverflow.com/")
                        )
        ),
        dashboardSidebar(),
        dashboardBody()
      )
    ), 
    server = function(input, output){}
  ), launch.browser = TRUE
)

And this is the outcome:

https://i.sstatic.net/3zXqj.png

Important Points:

  • An icon is needed, you can choose from Font Awesome or Glyphicons options.
  • It's possible that any significant changes to the ShinyDashboard structure might cause issues, so be mindful of that.
  • Potentially, future versions may include support for this feature with just a few additional lines of code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display an image overlay upon hovering over a div

I've developed an add-on for Elementor that includes a card with the following HTML markup: <div class="card"> <div class="header"> <img src="img.jpg"> < ...

htmlcsselementor

What is the method for ensuring the banner image is visible behind the transparent navigation bar?

I recently used Bootstrap 4 to write the code below. In the image provided, I have outlined what my goal is with this code. Thank you! https://i.sstatic.net/oB6b6.jpg <style> div.jumbotron { background: #458392 url("img/ban ...

htmlcsstwitter-bootstrapnavbar

Prevent automatic scrolling to the top of the page after submitting a form. Remain at the current position on the

After submitting a form, I want to prevent the page from automatically scrolling back up. How can I keep the same position on the page after form submission? <script type="text/javascript"> var frm = $('#form'); frm.submit(function ...

javascriptphpjqueryhtmlajax

Unable to dispatch the form on a connected page using jQuery Mobile

I have encountered an issue while trying to submit a form using jQuery Mobile. The problem arises when the form is placed on a linked page, as it fails to submit properly. To illustrate, if my home page is mysite.com/page.html, placing the form code on tha ...

jqueryhtmlformsjquery-mobile

What is the mechanism behind image pasting in Firefox's imgur integration?

Start by launching an image editing software and make a copy of any desired image. Avoid copying directly from a web browser as I will explain the reason later on. Navigate to "http://imgur.com" using Firefox. To paste the copied image, simply press Ctrl+V ...

javascripthtmlfirefoxclipboardimgur

maintaining page state without navigating

I'm exploring the concept of using HTML5 pushState and I have found it to be quite effective. I am able to add states, navigate back in the browser, and everything seems to function properly. However, upon refreshing the page, I am consistently met wi ...

htmlroutespushstate

html Tips for referencing a file in an input tag

Imagine you have a basic form with an <input type="file"> tag. What I aim to achieve is, once the user selects a file (which is an image), I want to display that file on the same page for viewing - providing a better user experience. I attempted to ...

jqueryhtml

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page. I am looking to build an HTML document with several <section> tags, as outlined below. <html> <head> </head> <body> <sectio ...

javascriptjqueryhtmlcss

jQuery Mobile - Implementing Persistent Toolbars along with a custom back button functionality

UPDATE Here is a fiddle of the problem: https://jsfiddle.net/9k449qs2/ - attempt to select the header using your picker, but every time you click it will select the whole page instead. I am currently working on a project that includes a persistent header ...

htmlcsscordovajquery-mobilesingle-page-application

Instructions on conducting a Post Hoc analysis using the Tukey method within the agricolae package

I utilized the following libraries: library(lsmeans) and library(multcomp) lm(Chlorophyll ~ Treatment + Stage + Treatment:Stage, "") Now I'm curious about conducting a post-hoc test after performing TW ANOVA in R. Can this be achieved using the ag ...

rgraphanovaposthoctukey

How can I make a single <input> element that can handle both files and urls simultaneously?

Is there a way to enable my users to import both local and remote files using just one input field? A possible solution, inspired by Stackoverflow, is to implement tabs: Another approach could be using radio buttons like this: <style> .display ...

jqueryhtmlcssformsfile-upload

What is the process for transforming a string into a dictionary using jinja2?

I have a variable called {{data}} which contains a string formatted like this: *{"a": "1", "b": "2", "c": 3, "d": 4}* My goal is to access the values in this format: *{{data.a}} --> 1 {{data.b ...

pythonhtmljinja2

Scaling CSS images to fit within a specific area without distorting them

Is there a way to ensure that an image fits within a specified area using CSS or other methods? For example, if I have images of various sizes and want them all to fit into a div of 150px by 100px without stretching or distorting them. I just want the imag ...

cssoverflowscaledistortion

Is there a way to create a navigation menu that highlights as we scroll down the page?

Check out this example of what I am looking for. https://i.stack.imgur.com/fdzvZ.png If you scroll, you will notice that the left menu highlights. Sub-menus will extend when the corresponding menu is highlighted and collapse when other menus are highlig ...

javascripthtmlnavscrollspy

Updating data in a SQL database using PHP when a button is clicked

This Question was created to address a previous issue where I had multiple questions instead of focusing on one specific question Objective When the user selects three variables to access data, they should be able to click a button to modify one aspect o ...

javascriptphpjqueryhtmlmysql

When applying styles in Polymer, it's important to take into account the width and height

Having trouble setting the width of elements within container elements in Polymer. Here's a simple example that illustrates the issue: <!doctype html> <html> <head> <base href="https://polygit.org/polymer+:master/webcomponent ...

cssshadow-dompolymer-2.x

Having trouble getting the jQuery toggle function to work properly with div elements

I'm struggling with some divs that are not behaving as expected. When I click the button, it opens and changes the text to "Collapse", but when I click it again, it doesn't change the text back to "Find Support". Additionally, if I click on a dif ...

jqueryhtmlcss

Transitioning to the Full Website with PHP Sessions - Discrepancies in Styling

I've encountered an issue when trying to switch from a mobile site to a full site using sessions. The styles on the full site do not load unless I refresh the page, at which point they finally appear. On my mobile page, there's a link that direct ...

phphtml

Guide to displaying highcharts using external json data for numerous series

Having an issue with using angularjs and highcharts with multiple series where the data is coming from an external JSON file. When trying to access the data with a for loop using data.data[i].data, it's not working properly. Can anyone offer assistanc ...

jqueryhtmlangularjsajaxhighcharts

Incorporating an image into a list of checkboxes post-connection

Looking for a way to populate a checkbox list through datasource/databind and then integrate an image with each checkbox? I can do both separately but struggling to combine them successfully. My task is to create a checkbox list of students for teachers t ...

c#htmlasp.netcheckbox