General Tips
If you want to customize the default settings in shinydashboard, you'll need to identify the relevant CSS tags for these elements and then create your own custom CSS file to override the defaults.
Keep in mind, if you anticipate making numerous changes, the shinydashboard framework may not be the best fit for your needs.
Solution for Your Specific Query
Upon inspecting the browser, you'll notice that the arrows are controlled by the .fa-angle-left:before tag. The symbol displayed is defined in the CSS as follows:
.fa-angle-left:before{content:"\f104"}
To change it to a right arrow, you simply need to replace \f104 with \f105:
Referencing the documentation here, you can incorporate your custom CSS as displayed below:
- Create the file
www/custom.css in the same directory as your Shiny dashboard.
- Add the following code snippet to the custom CSS file:
.fa-angle-left:before{content:"\f105"}
If you want the arrow to point downward after clicking, include the additional snippet below:
.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
transform: rotate(90deg);
}
- After completing these steps, insert the code below in your
sidebarMenu:
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
Example of Implementation
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);
}