Shiny WebApp and UI: add style and dropdown menu in the header

Question

I'm just starting using R and Shiny App and I'm a bit confused about how to achieve what I'm trying to do. I want to change the UI of my Shiny App. As a C# developer, I work with HTML / CSS , AdminLTE and so on. I can't find a proper documentation how to change the UI in a Shiny App.

What I want to achieve in the UI is something like the following image:

First, I removed the sidebar. Now, my problem is to box the UI. In the header, I want to add a dropdown menu with few options. Then, I want in the middle of the page to have a panel with 2 column: in the first column first row I desire to see the graph generate by R , then same text around it to explain the graph.

On top of that, I want to change the style for example of tabs or buttons.

After 2 days of work, I wrote this code but it is very far from what I want to achieve.

library(shiny)
library(shinydashboard)
 
# Define UI for application that draws a histogram
ui <- navbarPage(
    "Test",
    tabPanel(
        "Introduction",
        titlePanel(
            div(
                windowTitle = "Test window"
            )
        ),
        div(class = "my-class", 
            h3("LAI287 basal insulin study"),
            p("Lorem ipsum dolor sit amet..."),
            p("Lorem ipsum dolor sit amet..."),
            actionButton(
                inputId = "btnStart",
                label = "Start analysis",
                className = "btn-primary"
            )
        )
    ),
    tabPanel(
        "Attribute specification"
    ),
    tabPanel(
        dropdownMenu(type = "notifications",
                     notificationItem(
                         text = "5 new users today",
                         icon("users")
                     ),
                     notificationItem(
                         text = "12 items delivered",
                         icon("truck"),
                         status = "success"
                     ),
                     notificationItem(
                         text = "Server load at 86%",
                         icon = icon("exclamation-triangle"),
                         status = "warning"
                     )
        )
    )
)
 
# Define server logic required to draw a histogram
server <- function(input, output) {
    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
 
        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}
 
# Run the application 
shinyApp(ui = ui, server = server)

The result of this code is in the following screenshot. The only dropdown I found was for messages or notifications .

I know AdminLTE quite well but I don't understand how to write the code for Shiny App. Do you have any idea or suggestion how I can implement this UI? Is there any good tutorial I can read?

Update

I found some documentation on RStudio Shiny dashboard . First, I don't understand the difference between dashboardPage and navbarPage . Can I add a navbarPage to a dashboardPage ?

From the documentation, I added this code:

box(
  title = "Histogram", status = "primary", solidHeader = TRUE,
  collapsible = TRUE,
  plotOutput("plot3", height = 250)
),

box(
  title = "Inputs", status = "warning", solidHeader = TRUE,
  "Box content here", br(), "More box content",
  sliderInput("slider", "Slider input:", 1, 100, 50),
  textInput("text", "Text input:")
)

and I expect something like

but my result is like that (thanks Jan for the menu)

I saw on the other page of the documentation that it is possible to add

dashboardPage(skin = "blue")

but in my case I don't have a dashboardPage .

Answer 1

Are you aware of the navbarMenu function? You can add menu items to the navbarPage with it:

navbarPage("App Title",
  tabPanel("Plot"),
  navbarMenu("More",
    tabPanel("Summary"),
    "----",
    "Section header",
    tabPanel("Table")
  )
)

Layouting can be done with fluid layouts, eg

fluidRow(
    column(width = 4,
      "4"
    ),
    column(width = 3, offset = 2,
      "3 offset 2"
    )

See the layout guide for the necessary details.

Answer 2

If you are familiar with AdminLTE then I strongly recommend using bs4Dash . It is a very robust package that allows for the use of boxes and other features that are regularly a part of AdminLTE (including Bootstrap 4). But the core of the language is still Shiny, so you may need to work through a few basic examples before attempting anything with greater complexity.

You can change colors, font-sizes, etc. in bs4Dash by following the instructions on this page .

For a demo of what is possible, see here .

I've provided a very basic example at the bottom of this answer.

Otherwise adding a dropdown navigation in bs4Dash is a bit tricky, and will require a combination of Javascript, CSS, and HTML. Luckily, you can modify all of these things.

Good luck!

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
    header = dashboardHeader(
        leftUi = tagList(
            dropdownMenu(
                badgeStatus = "info",
                type = "notifications",
                notificationItem(
                    inputId = "notice1",
                    text = "Put text here!",
                    status = "danger"
                )
            ),
            dropdownMenu(
                badgeStatus = "info",
                type = "tasks",
                taskItem(
                    inputId = "notice2",
                    text = "My progress",
                    color = "orange",
                    value = 10
                )
            )
        )
    ),
    dashboardSidebar(disable = T),
            body = dashboardBody(
            fluidRow(
                column(width = 8,
                       box(width = NULL, title = "Old Faithful Geyser Data",
                           collapsible = F,
                           wellPanel( sliderInput("bins",
                                                  "Number of bins:",
                                                  min = 1,
                                                  max = 50,
                                                  value = 30)),
                           plotOutput("distPlot")
                       ),
                       box(width = NULL, title = NULL, collapsible = F,
                          fluidRow(
                              column(width = 5,
                                     tags$img(src = "https://i.stack.imgur.com/EslMF.png", width = '100%')
                                     ),
                              column(width = 7,
                                     tags$h4("Card Title"),
                                     tags$p("Some text here")
                              )
                          )
                       )
                
                      ),
                column(width = 4,
                       box(width = NULL, title = "Header", status = "info", collapsible = F),
                       box(width = NULL, title = "Header", status = "success", collapsible = F),
                       box(width = NULL, title = "Header", status = "secondary", collapsible = F)
                       )
                     )
                ),
            controlbar = dashboardControlbar(
                collapsed = FALSE,
                div(class = "p-3", skinSelector()),
                pinned = TRUE
            )
            )

server <- function(input, output) {

    output$distPlot <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

shinyApp(ui = ui, server = server)