Boostrap 4 dashboard dropdown menu

dropdownMenu creates an adminLTE3 dashboard dropdown menu, to be inserted in a dashboardHeader.

messageItem creates a message item to place in a dropdownMenu.

messageItem creates a message item to place in a dropdownMenu.

taskItem creates a task item to place in a dropdownMenu.

Usage

bs4DropdownMenu(
  ...,
  type = c("messages", "notifications", "tasks"),
  badgeStatus = "primary",
  icon = NULL,
  headerText = NULL,
  .list = NULL,
  href = NULL
)

messageItem(
  from,
  message,
  icon = shiny::icon("user"),
  time = NULL,
  href = NULL,
  image = NULL,
  color = "secondary",
  inputId = NULL
)

notificationItem(
  text,
  icon = shiny::icon("triangle-exclamation"),
  status = "success",
  href = NULL,
  inputId = NULL
)

taskItem(text, value = 0, color = "info", href = NULL, inputId = NULL)

dropdownMenu(
  ...,
  type = c("messages", "notifications", "tasks"),
  badgeStatus = "primary",
  icon = NULL,
  headerText = NULL,
  .list = NULL,
  href = NULL
)

Arguments

...

Items to put in the menu. Typically, message menus should contain messageItems, notification menus should contain notificationItems, and task menus should contain taskItems.

type

The type of menu. Should be one of "messages", "notifications", "tasks".

badgeStatus

The status of the badge which displays the number of items in the menu. This determines the badge's color. Valid statuses are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

. A value of NULL means to not display a badge.

icon

An icon tag, created by icon.

headerText

An optional text argument used for the header of the dropdown menu (this is only visible when the menu is expanded). If none is provided by the user, the default is "You have x messages," where x is the number of items in the menu (if the type is specified to be "notifications" or "tasks," the default text shows "You have x notifications" or "You have x tasks," respectively).

.list

An optional list containing items to put in the menu Same as the ... arguments, but in list format. This can be useful when working with programmatically generated items.

href

An optional URL to link to.

from

Who the message is from.

message

Text of the message.

time

String representing the time the message was sent. Any string may be used. For example, it could be a relative date/time like "5 minutes", "today", or "12:30pm yesterday", or an absolute time, like "2014-12-01 13:45". If NULL, no time will be displayed.

image

User image.

color

A color for the bar. Valid colors are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

• gray-dark: #343a40 .

• gray: #adb5bd .

• white: #fff .

• indigo: #6610f2 .

• lightblue: #3c8dbc .

• navy: #001f3f .

• purple: #605ca8 .

• fuchsia: #f012be .

• pink: #e83e8c .

• maroon: #d81b60 .

• orange: #ff851b .

• lime: #01ff70 .

• teal: #39cccc .

• olive: #3d9970 .

inputId

Whether to allow the item to act as a actionButton.

text

The task text.

status

The status of the item. This determines the item's background color. Valid statuses are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

• gray-dark: #343a40 .

• gray: #adb5bd .

• white: #fff .

• indigo: #6610f2 .

• lightblue: #3c8dbc .

• navy: #001f3f .

• purple: #605ca8 .

• fuchsia: #f012be .

• pink: #e83e8c .

• maroon: #d81b60 .

• orange: #ff851b .

• lime: #01ff70 .

• teal: #39cccc .

• olive: #3d9970 .

value

A percent value to use for the bar.

See also

dashboardHeader for example usage.

Author

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(
        rightUi = dropdownMenu(
          badgeStatus = "danger",
          type = "messages",
          messageItem(
            inputId = "triggerAction1",
            message = "message 1",
            from = "Divad Nojnarg",
            image = "https://adminlte.io/themes/v3/dist/img/user3-128x128.jpg",
            time = "today",
            color = "lime"
          )
        ),
        leftUi = tagList(
          dropdownMenu(
            badgeStatus = "info",
            type = "notifications",
            notificationItem(
              inputId = "triggerAction2",
              text = "Error!",
              status = "danger"
            )
          ),
          dropdownMenu(
            badgeStatus = "info",
            type = "tasks",
            taskItem(
              inputId = "triggerAction3",
              text = "My progress",
              color = "orange",
              value = 10
            )
          )
        )
      ),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "dropdownMenu",
      body = dashboardBody()
    ),
    server = function(input, output) {
      observeEvent(input$triggerAction1, {
        showModal(modalDialog(
          title = "Important message",
          "This is an important message!"
        ))
      })
    }
  )
}