htmlrshinyshinydashboardbs4dash

Position title in the header in shinydashboard


Having this basic shiny app: I would like to position my title in the header like indicated in red in the image below:

There are already some solutions Add text on right of shinydashboard header but I am wondering if there is a more "straight" way?

The solution by @matrixloading is appealing but not satisfactory because of the dot in front of the text:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(),
  dashboardBody(
    # Boxes need to be put in a row (or column)
    fluidRow(
      box(plotOutput("plot1", height = 250)),
      
      box(
        title = "Controls",
        sliderInput("slider", "Number of observations:", 1, 100, 50)
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)
  
  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

enter image description here


Solution

  • We can append a child element inside de nav element of the dashboardHeader.

    dashboardHeader(title = "Basic dashboard") |>
        tagAppendChild(
          div(
            "This is My Title",
            style = "
          display: block;
          font-size: 1.5em;
          margin-block-start: 0.5em;
          font-weight: bold;
          color: darkred;
          margin-right: 50%",
            align = "right"
          ),
          .cssSelector = "nav"
        )
    

    enter image description here