The header and sidebar

Building Dashboards with shinydashboard

Png Kee Seng

Researcher

The header

The header is like the signboard of the restaurant
It can contain the dashboard title
It can contain dropdown menus
- E.g., messages, notifications, tasks

Here is an example of a simple store-front.

The header is like the signboard of a restaurant. It can contain other practical or aesthetic elements. Here is an example of what a complicated front-end looks like.

¹ Image by upklyak on Freepik

The shinydashboard title

The header is defined by dashboardHeader()
What if the title is too long?
- Set the titleWidth argument
- Default is 230 pixels

header <- dashboardHeader(title = "Soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")

header <- dashboardHeader(title = "Analysis for global soccer tournament")
                            titleWidth = 400)

The header width can be adjusted to accommodate long titles.

Adding a dropdown menu with a message

Dropdown menus can be added to the header
Three types of dropdown menus
- Messages
- Notifications
- Tasks
Add dropdownMenu() of type "messages"
- Add a messageItem()
- The icon is that of icon("user") by default
- We can also set time

header <- dashboardHeader(
  title = "Analysis for FIFA world cup",
  titleWidth = 300,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",

      time = "5 mins"

)))

Dropdown menu with one message item.

Adding a dropdown menu with multiple messages

Add another messageItem() within dropdownMenu() called "Twitter"

A dropdown menu with two message items.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"
    ),

    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")
    )
  )
)

Adding a dropdown menu with multiple items

We can also add other types of items
- messageItem()
- notificationItem()
- taskItem()
There are appearance differences
- messageItem(): Default icon is icon("user")
- notificationItem(): Default icon is icon("exclamation-triangle")
- taskItem(): Contains a progress bar

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",

    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),

    notificationItem("This is a notification."
    ),

    taskItem(value = 30, color = "blue",
      "Dashboard construction")
))

Adding a dropdown menu with multiple items

A dropdown menu with multiple items

Adding more dropdown menus

We can also add another dropdown menu

A header with more than one dropdown menu.

header <- dashboardHeader(
  title = "Analysis for global soccer tournament",
  titleWidth = 400,

  dropdownMenu(type = "messages",
    messageItem("Data division",
      "Keep up the good work!",
      time = "5 mins"),
    messageItem("Twitter",
      "You have a Tweet!",
      time = "1 hour", icon=icon("twitter")),
    notificationItem("This is a notification."),
    taskItem(value = 30, color = "blue",
      "Dashboard construction")),

  dropdownMenu(type = "notifications",
    notificationItem(icon = icon("users"),
      "This is another notification."
)))

The sidebar

The sidebar is defined by dashboardSidebar()
The width of the sidebar can be adjusted by setting width.
sidebarMenu() allows us to place several pages in a shinydashboard

A sidebar with two buttons

sidebar <- dashboardSidebar()

sidebar <- dashboardSidebar(width=400)

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
        icon = icon("chart-line")),
    menuItem("Statistics", icon = icon("file-excel"), 
        tabName = "stats")
  )
)

sidebar <- dashboardSidebar(disable = TRUE)

Adding a badge

A badge can also be added
- Set badgeLabel and badgeColor

A sidebar with additional badges

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),

             badgeLabel = "New content!", 
             badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "stats", 

             badgeLabel = "urgent", 
             badgeColor = "red")

  )
)

Adding subtabs

Subtabs can be added by adding menuSubItem()
Note that badges cannot be added to a tab containing subtabs

A sidebar containing subtabs

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
                     icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
                     icon=icon("user")))
  )
)

Adding inputs and outputs in the sidebar

Inputs and outputs can be added to the sidebar
We also have to define inputs and outputs in server

A sidebar containing a checkboxGroupInput().

sidebar <- dashboardSidebar(width=400,
  sidebarMenu(
    id = "pages",
    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", 
             badgeColor = "green"),
    menuItem("Statistics", icon = icon("file-excel"), 
            tabName = "stats", 
            menuSubItem("Team 1", tabName = "team1", 
            icon=icon("user")),
            menuSubItem("Team 2", tabName = "team2", 
            icon=icon("user"))),

    menuItem("A couple of checkboxes",  
             checkboxGroupInput("checkboxes", 
              "Day of the week", 
              choices =  c("Mon","Tue","Wed","Thu","Fri","Sat","Sun"),
              selected = c("Mon","Tue","Wed","Thu","Fri")))
  )
)

Let's practice!

Building Dashboards with shinydashboard