如何将Shiny仪表盘头部内容左对齐？附相关代码

Got it, let's get your dashboard header content aligned to the left—here's the adjusted code and breakdown of what changed:

Modified UI Code #

library(RJDBC)
library(dplyr)
library(shiny)
library(ggplot2)
library(scales)
library(shinydashboard)
library(gridExtra)
library(DT)
library(reshape2)
library(ggthemes)
library(plotly)

dashboardPage(
  dashboardHeader(
    # Add custom CSS to override default right alignment of header elements
    tags$head(
      tags$style(HTML("
        .navbar-custom-menu {
          float: left !important;
          margin-left: 10px; /* Optional: Add spacing from the dashboard logo */
        }
      "))
    ),
    tags$li(class = "dropdown",
            navbarPage("header",
                      tabPanel("Plots", style = "text-align:left;"),
                      tabPanel("Plot1"),
                      tabPanel("Plot2"),
                      tabPanel("Plot3"),
                      tabPanel("Plot4")))
  ),
  dashboardSidebar(
    sidebarMenuOutput(outputId = "sidebar"),
    uiOutput("sidebarmenu")
  ),
  dashboardBody(
    uiOutput("body"),
    uiOutput("tabbox"),
    uiOutput("dashboardbody")
  )
)

Key Changes Explained: #

• Custom CSS Override: We added inline CSS targeting the .navbar-custom-menu class (this is the built-in container for header dropdowns in shinydashboard). Setting float: left !important forces the dropdown content to shift left, overriding the default right-aligned behavior. The optional margin-left adds a clean gap between the dashboard logo and your header tabs.
• Tab Panel Text Alignment: Changed the style attribute in the first tab panel (you could also apply this directly to navbarPage) from align:right; to text-align:left; to ensure the tab labels themselves are left-aligned within their containers.

If you want the tabs to start at the absolute far left (removing the default dashboard logo), just add title = "" to dashboardHeader():

dashboardHeader(title = "",
  # rest of your header code...
)

That should make your header content perfectly left-aligned as you wanted!

内容的提问来源于stack exchange，提问作者ROHIT JHA