I would like to change the default arrow direction (as in the attached pic), so it will point to the right.

this is the current code:

      sidebarMenu(
        menuItem("Market data", tabName = "market data", icon = icon("users"), startExpanded = TRUE,
                 menuSubItem("Performance", tabName = "history", icon = icon("calendar-day")),
                 menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        ),
        
        menuItem("Consumer 1", tabName = "consumer1", icon = icon("user"), startExpanded = FALSE,
                 menuSubItem("Consumption", tabName = "consumption", icon = icon("history")),
                 menuSubItem("Profile", tabName = "profile", icon = icon("poll-h")),
                 menuSubItem("Forecast engine", tabName = "forecast", icon = icon("brain"))
        )

Thanks in advance

CodePudding user response：

General

In general, to change the defaults in shinydashboard you need to find the correct CSS tags for these elements and then add your own custom CSS file to overwrite the default.

If you plan on making a lot of these changes, the shinydashboard framework might not be right for you.

Specific solution to your question

With some poking around in the browser, you'll see that the tag for these arrows are .fa-angle-left:before. The symbol showed is defined with the following CSS:

.fa-angle-left:before{content:"\f104"}

To change it to a right arrow we need to change \f104 to \f105:

As noted in the documentation, you can add your own CSS-file as such:

• Add the file www/custom.css to the same folder as your Shiny dashboard is located.
• Add the following code to it:

.fa-angle-left:before{content:"\f105"}

If you want the arrow to still point down after you click it you also need to add

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}

• When this is done, you need to add the following code to your sidebarMenu:

tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        )

Working example

app.R

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    dashboardSidebar(
      sidebarMenu(
        tags$head(
          tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
        ),
        menuItem(
          "Market data",
          tabName = "market data",
          icon = icon("users"),
          menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
        )
      )
    )
  ),
  dashboardBody()
)

server <- function(input, output) {}

shinyApp(ui, server)

www/custom.css

.fa-angle-left:before{content:"\f105"}

.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
    transform: rotate(90deg);
}