| Title: | 'Bootstrap' 5 Dashboard Framework for 'shiny' Apps |
|---|---|
| Description: | Provides a dashboard layer for 'shiny' applications built on 'bslib' and 'Bootstrap' 5. Includes a dashboard page shell, sidebar navigation, cards, value boxes, header drop-down menus and feedback components that inherit the active 'bslib' theme and follow 'Bootstrap' design patterns. Function names mirror those of the 'shinydashboard' package wherever the underlying concepts are shared, allowing existing applications to migrate with minimal changes. |
| Authors: | Alexandros Kouretsis [aut, cre], Ardalan Mirshani [aut], Dominik Rafacz [aut], Novartis Open Source Initiative [cph] |
| Maintainer: | Alexandros Kouretsis <[email protected]> |
| License: | MIT + file LICENSE |
| Version: | 0.7.5.9000 |
| Built: | 2026-10-02 18:39:07 UTC |
| Source: | https://github.com/novartis/bslibdash |
Accordion container
Accordion item
accordion(..., id, width = 12, .list = NULL) accordionItem(..., title, status = NULL)accordion(..., id, width = 12, .list = NULL) accordionItem(..., title, status = NULL)
... |
Item content. |
id |
Unique accordion id. |
width |
The width of the accordion. |
.list |
Optional list of accordion items. |
title |
Item title. |
status |
Optional Bootstrap status color. When set, the item border
and header are tinted with the matching subtle status hue, aligned with
|
accordion() returns a bslib::accordion() tag that may be included
in a Shiny UI.
accordionItem() returns a bslib::accordion_panel() tag that may be
passed to accordion().
accordion( id = "filters", accordionItem(title = "Date range", shiny::p("Last 30 days")), accordionItem(title = "Region", shiny::p("All regions")) ) accordionItem( title = "Advanced settings", status = "info", shiny::p("Optional controls") )accordion( id = "filters", accordionItem(title = "Date range", shiny::p("Last 30 days")), accordionItem(title = "Region", shiny::p("All regions")) ) accordionItem( title = "Advanced settings", status = "info", shiny::p("Optional controls") )
Action button/link
actionButton( inputId, label, icon = NULL, width = NULL, ..., status = NULL, outline = FALSE, size = NULL, flat = FALSE )actionButton( inputId, label, icon = NULL, width = NULL, ..., status = NULL, outline = FALSE, size = NULL, flat = FALSE )
inputId |
The input slot used to access the value. |
label |
Button label. |
icon |
Optional icon. |
width |
Button width. |
... |
Named attributes applied to the button. |
status |
Bootstrap status color. |
outline |
Whether to display an outline style. |
size |
Button size. |
flat |
Whether to apply a flat style. |
Returns a UI element for an action button. The server value received
for the input corresponding to inputId will be an integer that increments
with each click.
actionButton( inputId = "refresh", label = "Refresh", icon = "arrow-clockwise", status = "primary" )actionButton( inputId = "refresh", label = "Refresh", icon = "arrow-clockwise", status = "primary" )
Create dashboard badge item
Backwards-compatible alias to badge()
badge(..., position = c("left", "right"), color, rounded = FALSE) dashboardBadge(..., position = c("left", "right"), color, rounded = FALSE)badge(..., position = c("left", "right"), color, rounded = FALSE) dashboardBadge(..., position = c("left", "right"), color, rounded = FALSE)
... |
Badge content. |
position |
Badge position: |
color |
Bootstrap status color. |
rounded |
Whether the badge is rounded. |
An htmltools::span() tag that may be included in a Shiny UI (e.g.
inside a menuItem() label).
badge("NEW", color = "success", position = "right", rounded = TRUE)badge("NEW", color = "success", position = "right", rounded = TRUE)
Create a card
Update a card from the server side
Backwards-compatible alias to updateBox()
box( ..., title = NULL, footer = NULL, status = NULL, background = NULL, width = 6, height = NULL, collapsible = FALSE, collapsed = FALSE, closable = FALSE, maximizable = FALSE, icon = NULL, label = NULL, id = NULL ) updateBox( id, action = c("remove", "toggle", "update", "restore", "toggleMaximize"), options = NULL, session = shiny::getDefaultReactiveDomain() ) updateCard( id, action = c("remove", "toggle", "update", "restore", "toggleMaximize"), options = NULL, session = shiny::getDefaultReactiveDomain() )box( ..., title = NULL, footer = NULL, status = NULL, background = NULL, width = 6, height = NULL, collapsible = FALSE, collapsed = FALSE, closable = FALSE, maximizable = FALSE, icon = NULL, label = NULL, id = NULL ) updateBox( id, action = c("remove", "toggle", "update", "restore", "toggleMaximize"), options = NULL, session = shiny::getDefaultReactiveDomain() ) updateCard( id, action = c("remove", "toggle", "update", "restore", "toggleMaximize"), options = NULL, session = shiny::getDefaultReactiveDomain() )
... |
Contents of the card. |
title |
Optional title. |
footer |
Optional footer. |
status |
Bootstrap status color applied to the card header background.
Accepted values are Bootstrap semantic names: |
background |
Bootstrap status color applied to the entire card
background. Accepts the same values as |
width |
Width of the card. An integer |
height |
Card height. |
collapsible |
Whether the card body can collapse. |
collapsed |
Whether the card starts collapsed. |
closable |
Whether the card can be hidden. |
maximizable |
Whether the card can be displayed full-screen. |
icon |
Header icon tag or icon name. |
label |
Header label content. |
id |
Id of the card created with |
action |
Action to trigger. |
options |
List of new options for |
session |
Shiny session. |
box() returns a bslib::card() tag, wrapped in a shiny::column()
when width is an integer between 1 and 12.
updateBox() and updateCard() return nothing. These functions are
called for their side-effects.
Other cards:
boxLayout()
box( "Card body", title = "Status", status = "primary", id = "status_box" ) boxLayout( box("A", title = "Card A"), box("B", title = "Card B"), type = "deck" ) if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid( shiny::actionButton("toggle", "Toggle card"), box("Card body", title = "Status", id = "status_box") ), server = function(input, output, session) { shiny::observeEvent(input$toggle, { updateBox("status_box", action = "toggle", session = session) }) } ) }box( "Card body", title = "Status", status = "primary", id = "status_box" ) boxLayout( box("A", title = "Card A"), box("B", title = "Card B"), type = "deck" ) if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid( shiny::actionButton("toggle", "Toggle card"), box("Card body", title = "Status", id = "status_box") ), server = function(input, output, session) { shiny::observeEvent(input$toggle, { updateBox("status_box", action = "toggle", session = session) }) } ) }
Container for cards
boxLayout(..., .list = NULL, type = c("group", "deck", "columns"))boxLayout(..., .list = NULL, type = c("group", "deck", "columns"))
... |
Slot for |
.list |
Optional list of cards. |
type |
Layout type. One of:
|
An htmltools::div() tag containing the supplied cards.
Other cards:
box()
boxLayout( box("Revenue", title = "KPI"), box("Trend", title = "Chart"), type = "deck" )boxLayout( box("Revenue", title = "KPI"), box("Trend", title = "Chart"), type = "deck" )
Builds a Bootstrap 5 theme via bslib::bs_theme() with the bslibdash brand
colour, typography and shape variables.
brand_bs_theme()brand_bs_theme()
Component CSS is no longer bundled into the theme: each bslibdash component
attaches its own theme-aware bslib::bs_dependency_defer() dependency, so
rendering a component with any bslib::bs_theme() produces the matching
bslibdash styles. brand_bs_theme() exists to set the Bootstrap-level
variables used as defaults by bslibdash page constructors.
dashboardPage() applies this theme by default. To customise it, override
variables or rules via bslib and pass the result through the page theme
argument:
dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(),
theme = brand_bs_theme() |>
bslib::bs_add_variables(primary = "#8B0000")
)
Returns a bslib::bs_theme() object.
theme <- brand_bs_theme() class(theme)theme <- brand_bs_theme() class(theme)
Column system
column(width, ..., offset = 0)column(width, ..., offset = 0)
width |
The grid width of the column. |
... |
Elements to include within the column. |
offset |
The number of columns to offset this column. |
A shiny::column() tag that may be included in a Shiny UI.
shiny::fluidRow( column(8, shiny::p("Main content")), column(4, shiny::p("Side panel")) )shiny::fluidRow( column(8, shiny::p("Main content")), column(4, shiny::p("Side panel")) )
Containers for tab content placed inside dashboardBody():
dashboardBody(...) tabItems(..., id = "sidebarMenu") tabItem(tabName = NULL, ...)dashboardBody(...) tabItems(..., id = "sidebarMenu") tabItem(tabName = NULL, ...)
... |
Items to put in the container. |
id |
Shared Shiny id for the sidebar menu and body tabset. Use the same
value in |
tabName |
The name of a tab. |
tabItems() is the parent container.
tabItem(tabName) is one tab; tabName must match the
corresponding menuItem() tabName.
dashboardBody() returns an htmltools::div() tag that may be passed
to dashboardPage().
tabItems() returns an htmltools::div() tag containing a hidden
shiny::tabsetPanel().
tabItem() returns an htmltools::tagList() that may be passed to
tabItems().
dashboardBody( tabItems( tabItem(tabName = "overview", shiny::h2("Overview")), tabItem(tabName = "reports", shiny::h2("Reports")) ) ) tabItems( tabItem(tabName = "overview", shiny::p("Overview content")), tabItem(tabName = "reports", shiny::p("Reports content")) ) tabItem( tabName = "overview", shiny::h2("Overview"), shiny::p("This is the overview tab.") )dashboardBody( tabItems( tabItem(tabName = "overview", shiny::h2("Overview")), tabItem(tabName = "reports", shiny::h2("Reports")) ) ) tabItems( tabItem(tabName = "overview", shiny::p("Overview content")), tabItem(tabName = "reports", shiny::p("Reports content")) ) tabItem( tabName = "overview", shiny::h2("Overview"), shiny::p("This is the overview tab.") )
Dashboard navbar
dashboardHeader( ..., title = NULL, rightUi = NULL, sidebarIcon = icon("bars"), disable = FALSE, .list = NULL )dashboardHeader( ..., title = NULL, rightUi = NULL, sidebarIcon = icon("bars"), disable = FALSE, .list = NULL )
... |
Header UI elements rendered on the right side. For migration
compatibility, a first unnamed scalar string is treated as |
title |
Dashboard title. |
rightUi |
Additional right-side UI content. This is equivalent to
passing content through |
sidebarIcon |
Icon of the main sidebar toggle. |
disable |
Whether to disable and omit the header. When |
.list |
Optional list of right-side header UI elements, merged with
|
A <nav> tag that may be passed to dashboardPage(), or NULL if
disable = TRUE.
dashboardHeader( title = "Operations", rightUi = dropdownMenu( type = "notifications", notificationItem("Server restarted", status = "info") ) )dashboardHeader( title = "Operations", rightUi = dropdownMenu( type = "notifications", notificationItem("Server restarted", status = "info") ) )
A bslib sidebar layout that arranges the four standard dashboard slots.
The title argument, when set, replaces the title text inside header
if dashboardHeader() was called without one.
dashboardPage( header, sidebar, body, title = NULL, footer = NULL, theme = brand_bs_theme() )dashboardPage( header, sidebar, body, title = NULL, footer = NULL, theme = brand_bs_theme() )
header |
Slot for |
sidebar |
Slot for |
body |
Slot for |
title |
Page/app title shown in the browser tab and dashboard header. |
footer |
Optional slot for |
theme |
A |
A bslib::page() tag that may be passed to the ui argument of
shiny::shinyApp().
ui <- dashboardPage( header = dashboardHeader(title = "bslibdash dashboard"), sidebar = dashboardSidebar( sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview") ) ), body = dashboardBody( tabItems( tabItem( tabName = "overview", box("Overview content", title = "Overview") ) ) ) )ui <- dashboardPage( header = dashboardHeader(title = "bslibdash dashboard"), sidebar = dashboardSidebar( sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview") ) ), body = dashboardBody( tabItems( tabItem( tabName = "overview", box("Overview content", title = "Overview") ) ) ) )
Create a dashboard main sidebar
Dashboard main sidebar menu
Dashboard sidebar menu item
Dashboard sidebar menu sub-item
Dashboard sidebar menu header
dashboardSidebar(..., disable = FALSE, width = NULL, collapsed = FALSE) sidebarMenu(..., id = NULL, .list = NULL) menuItem( text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "success", tabName = NULL, selected = NULL, expandedName = NULL, startExpanded = FALSE, condition = NULL ) menuSubItem( text, tabName = NULL, icon = bslibdash::icon("angle-double-right"), selected = NULL ) sidebarHeader(title)dashboardSidebar(..., disable = FALSE, width = NULL, collapsed = FALSE) sidebarMenu(..., id = NULL, .list = NULL) menuItem( text, ..., icon = NULL, badgeLabel = NULL, badgeColor = "success", tabName = NULL, selected = NULL, expandedName = NULL, startExpanded = FALSE, condition = NULL ) menuSubItem( text, tabName = NULL, icon = bslibdash::icon("angle-double-right"), selected = NULL ) sidebarHeader(title)
... |
|
disable |
Whether to disable and omit the sidebar. |
width |
Expanded sidebar width. Numeric values are interpreted as
pixels; CSS strings such as |
collapsed |
Whether the sidebar starts collapsed on desktop. |
id |
Shared Shiny id for the sidebar menu and body tabset. Use the same
value in |
.list |
Optional list of items. |
text |
Item name. |
icon |
Icon tag or icon name. |
badgeLabel |
Optional badge label. |
badgeColor |
Badge color. |
tabName |
Matching |
selected |
Whether the item starts selected. |
expandedName |
Optional unique name for the item's collapse panel. If omitted, a stable id is generated from the item text and children. Set explicitly for multiple items with the same text and children. |
startExpanded |
Whether children start expanded. |
condition |
Optional display condition stored as a data attribute. |
title |
Header title. |
dashboardSidebar() returns an <aside> tag that may be passed to
dashboardPage(), or NULL if disable = TRUE.
sidebarMenu() returns an htmltools::div() tag that may be passed
to dashboardSidebar().
menuItem() returns a menu item that may be passed to
sidebarMenu().
menuSubItem() returns a menu item that may be passed to
menuItem().
sidebarHeader() returns an htmltools::div() tag that may be passed
to sidebarMenu().
dashboardSidebar( sidebarMenu( id = "sidebarMenu", sidebarHeader("Main"), menuItem("Overview", tabName = "overview", icon = icon("house")), menuItem( "Reports", icon = icon("bar-chart"), menuSubItem("Daily", tabName = "reports_daily"), menuSubItem("Monthly", tabName = "reports_monthly") ) ) ) sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview", icon = icon("house")), menuItem("Settings", tabName = "settings", icon = icon("gear")) ) menuItem( "Reports", icon = icon("bar-chart"), menuSubItem("Daily", tabName = "reports_daily"), menuSubItem("Monthly", tabName = "reports_monthly") ) menuSubItem( "Daily report", tabName = "reports_daily", icon = bslibdash::icon("angle-double-right") ) sidebarHeader("Administration")dashboardSidebar( sidebarMenu( id = "sidebarMenu", sidebarHeader("Main"), menuItem("Overview", tabName = "overview", icon = icon("house")), menuItem( "Reports", icon = icon("bar-chart"), menuSubItem("Daily", tabName = "reports_daily"), menuSubItem("Monthly", tabName = "reports_monthly") ) ) ) sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview", icon = icon("house")), menuItem("Settings", tabName = "settings", icon = icon("gear")) ) menuItem( "Reports", icon = icon("bar-chart"), menuSubItem("Daily", tabName = "reports_daily"), menuSubItem("Monthly", tabName = "reports_monthly") ) menuSubItem( "Daily report", tabName = "reports_daily", icon = bslibdash::icon("angle-double-right") ) sidebarHeader("Administration")
Dropdown menu
Message item
Notification item
Task item
dropdownMenu( ..., 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 = bslibdash::icon("exclamation-triangle"), 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 ) messageItem( from, message, icon = shiny::icon("user"), time = NULL, href = NULL, image = NULL, color = "secondary", inputId = NULL ) notificationItem( text, icon = bslibdash::icon("exclamation-triangle"), status = "success", href = NULL, inputId = NULL ) taskItem(text, value = 0, color = "info", href = NULL, inputId = NULL)
... |
Menu item tags such as |
type |
Dropdown menu type. One of |
badgeStatus |
Bootstrap status color used for the badge count. |
icon |
Optional custom icon tag. |
headerText |
Optional text shown at the top of the dropdown panel. |
.list |
Optional list of menu item tags. |
href |
Optional URL for the "More" footer link. |
from |
Who the message is from. |
message |
Text of the message. |
time |
Optional message timestamp text. |
image |
Optional user image URL. |
color |
Bootstrap status color used for item accents. |
inputId |
Optional id to make the item behave like an action button. |
text |
Item text. |
status |
Bootstrap status color used for the icon. |
value |
Percent completion value. |
dropdownMenu() returns an htmltools::div() tag that may be passed
to dashboardHeader().
messageItem() returns a dropdown item that may be passed to
dropdownMenu().
notificationItem() returns a dropdown item that may be passed to
dropdownMenu().
taskItem() returns a dropdown item that may be passed to
dropdownMenu().
dropdownMenu( type = "notifications", badgeStatus = "warning", notificationItem("Backup completed", status = "success"), notificationItem("New deployment", status = "info") ) messageItem( from = "Ops bot", message = "Deployment finished successfully.", time = "5 mins ago", color = "success" ) notificationItem( text = "3 new alerts", status = "danger" ) taskItem( text = "Data refresh", value = 75, color = "info" )dropdownMenu( type = "notifications", badgeStatus = "warning", notificationItem("Backup completed", status = "success"), notificationItem("New deployment", status = "info") ) messageItem( from = "Ops bot", message = "Deployment finished successfully.", time = "5 mins ago", color = "success" ) notificationItem( text = "3 new alerts", status = "danger" ) taskItem( text = "Data refresh", value = 75, color = "info" )
Dropdown menu output
dropdownMenuOutput(outputId)dropdownMenuOutput(outputId)
outputId |
Output variable name. |
A shiny::uiOutput() container to be filled by
renderDropdownMenu().
dropdownMenuOutput("alerts_menu")dropdownMenuOutput("alerts_menu")
Create an bslibdash icon
icon(name, class = NULL, style = NULL, size = NULL, color = NULL, css = NULL)icon(name, class = NULL, style = NULL, size = NULL, color = NULL, css = NULL)
name |
Name of icon. |
class |
Additional classes. |
style |
Optional inline style string or named CSS list. |
size |
Icon size applied to a wrapping span. |
color |
Icon color applied to a wrapping span. |
css |
Named list of CSS properties applied to the icon tag. |
An HTML tag object that can be included in a Shiny UI.
if (interactive()) { icon("user") icon("bar-chart", class = "text-primary", size = "1.25rem") }if (interactive()) { icon("user") icon("bar-chart", class = "text-primary", size = "1.25rem") }
Info box
infoBox( title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, fill = FALSE )infoBox( title, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, fill = FALSE )
title |
Box title. |
value |
Value text. |
subtitle |
Optional subtitle text. |
icon |
An icon tag, created by |
color |
Box color. Supports both legacy |
width |
The width of the box in Bootstrap grid columns ( |
href |
Optional URL to link to. |
fill |
Whether to fill the entire box background with |
An htmltools::div() tag, wrapped in a shiny::column() unless
width is NULL.
infoBox( title = "CPU", value = "42%", subtitle = "Current usage", icon = icon("cpu"), color = "success" )infoBox( title = "CPU", value = "42%", subtitle = "Current usage", icon = icon("cpu"), color = "success" )
Info box output
infoBoxOutput(outputId, width = 4)infoBoxOutput(outputId, width = 4)
outputId |
Output variable name. |
width |
The width of the box in Bootstrap grid columns ( |
A shiny::uiOutput() container to be filled by renderInfoBox().
infoBoxOutput("system_status")infoBoxOutput("system_status")
Render a dropdown menu
renderDropdownMenu(expr, env = parent.frame(), quoted = FALSE)renderDropdownMenu(expr, env = parent.frame(), quoted = FALSE)
expr |
An expression that returns a dropdown menu tag. |
env |
The parent environment for the reactive expression. |
quoted |
Is |
A shiny::renderUI() function that may be assigned to an output
slot paired with dropdownMenuOutput().
if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(dropdownMenuOutput("alerts_menu")), server = function(input, output, session) { output$alerts_menu <- renderDropdownMenu({ dropdownMenu( type = "notifications", notificationItem("Job finished", status = "success") ) }) } ) }if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(dropdownMenuOutput("alerts_menu")), server = function(input, output, session) { output$alerts_menu <- renderDropdownMenu({ dropdownMenu( type = "notifications", notificationItem("Job finished", status = "success") ) }) } ) }
Render an info box
renderInfoBox(expr, env = parent.frame(), quoted = FALSE)renderInfoBox(expr, env = parent.frame(), quoted = FALSE)
expr |
An expression that returns an info box tag. |
env |
The parent environment for the reactive expression. |
quoted |
Is |
A shiny::renderUI() function that may be assigned to an output
slot paired with infoBoxOutput().
if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(infoBoxOutput("system_status")), server = function(input, output, session) { output$system_status <- renderInfoBox({ infoBox("CPU", "42%", icon = icon("cpu"), color = "success") }) } ) }if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(infoBoxOutput("system_status")), server = function(input, output, session) { output$system_status <- renderInfoBox({ infoBox("CPU", "42%", icon = icon("cpu"), color = "success") }) } ) }
Render a sidebar menu element
renderMenu(expr, env = parent.frame(), quoted = FALSE)renderMenu(expr, env = parent.frame(), quoted = FALSE)
expr |
An expression that returns a |
env |
The parent environment for the reactive expression. |
quoted |
Is |
A shiny::renderUI() function that may be assigned to an output
slot paired with menuItemOutput() or sidebarMenuOutput().
if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(menuItemOutput("dynamic_menu_item")), server = function(input, output, session) { output$dynamic_menu_item <- renderMenu({ menuItem("Overview", tabName = "overview", icon = icon("house")) }) } ) }if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(menuItemOutput("dynamic_menu_item")), server = function(input, output, session) { output$dynamic_menu_item <- renderMenu({ menuItem("Overview", tabName = "overview", icon = icon("house")) }) } ) }
Render a value box
renderValueBox(expr, env = parent.frame(), quoted = FALSE)renderValueBox(expr, env = parent.frame(), quoted = FALSE)
expr |
An expression that returns a value box tag. |
env |
The parent environment for the reactive expression. |
quoted |
Is |
A shiny::renderUI() function that may be assigned to an output
slot paired with valueBoxOutput().
if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(valueBoxOutput("tickets")), server = function(input, output, session) { output$tickets <- renderValueBox({ valueBox("128", "Open tickets", icon = icon("inbox"), color = "primary") }) } ) }if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(valueBoxOutput("tickets")), server = function(input, output, session) { output$tickets <- renderValueBox({ valueBox("128", "Open tickets", icon = icon("inbox"), color = "primary") }) } ) }
Sidebar menu output
sidebarMenuOutput(outputId)sidebarMenuOutput(outputId)
outputId |
Output variable name. |
A shiny::uiOutput() container to be filled by renderMenu().
sidebarMenuOutput("dynamic_sidebar_menu")sidebarMenuOutput("dynamic_sidebar_menu")
A search form consists of a text input field and a search button.
sidebarSearchForm( textId, buttonId, label = "Search...", icon = shiny::icon("search") )sidebarSearchForm( textId, buttonId, label = "Search...", icon = shiny::icon("search") )
textId |
Shiny input ID for the text input box. |
buttonId |
Shiny input ID for the search button. |
label |
Text label to display inside the search box. |
icon |
An icon tag, created by |
A <form> tag that may be passed to dashboardSidebar(). The server
values received for the inputs corresponding to textId and buttonId
will be the search string and the button click count.
sidebarSearchForm( textId = "sidebar_search", buttonId = "sidebar_search_btn", label = "Search records..." )sidebarSearchForm( textId = "sidebar_search", buttonId = "sidebar_search_btn", label = "Search records..." )
Displays a user identity block (avatar, name, optional subtitle) at the
top of the dashboard sidebar. Mirrors shinydashboard::sidebarUserPanel().
sidebarUserPanel(name, image = NULL, subtitle = NULL)sidebarUserPanel(name, image = NULL, subtitle = NULL)
name |
User name. Required. |
image |
Optional avatar. Either a URL string (rendered as |
subtitle |
Optional secondary text shown beneath the name. |
When the sidebar is collapsed on desktop, the name and subtitle are hidden and only the circular avatar remains, centered.
An htmltools::div() tag that may be passed to dashboardSidebar().
dashboardSidebar( sidebarUserPanel( name = "Jane Doe", subtitle = "Administrator" ), sidebarMenu( menuItem("Overview", tabName = "overview") ) )dashboardSidebar( sidebarUserPanel( name = "Jane Doe", subtitle = "Administrator" ), sidebarMenu( menuItem("Overview", tabName = "overview") ) )
Tab box
tabBox( ..., id = NULL, selected = NULL, title = NULL, width = 6, height = NULL, side = c("left", "right") )tabBox( ..., id = NULL, selected = NULL, title = NULL, width = 6, height = NULL, side = c("left", "right") )
... |
|
id |
Input id for the tabset. |
selected |
The tab value selected on initial load. |
title |
Optional title shown in the tab box header. |
width |
The width of the box in Bootstrap grid columns ( |
height |
Optional CSS height value passed to
|
side |
Whether to place tabs on the |
A bslib::navset_card_tab() tag, wrapped in a shiny::column()
unless width is NULL.
# Basic tab box with a title in the card header tabBox( id = "quarterly", title = "Quarterly summary", shiny::tabPanel("Q1", shiny::p("Q1 content")), shiny::tabPanel("Q2", shiny::p("Q2 content")) ) # Pre-select a tab and fix the card height (content scrolls inside) tabBox( selected = "Q2", height = "200px", shiny::tabPanel("Q1", shiny::p("Q1 content")), shiny::tabPanel("Q2", shiny::p("Q2 content")) )# Basic tab box with a title in the card header tabBox( id = "quarterly", title = "Quarterly summary", shiny::tabPanel("Q1", shiny::p("Q1 content")), shiny::tabPanel("Q2", shiny::p("Q2 content")) ) # Pre-select a tab and fix the card height (content scrolls inside) tabBox( selected = "Q2", height = "200px", shiny::tabPanel("Q1", shiny::p("Q1 content")), shiny::tabPanel("Q2", shiny::p("Q2 content")) )
bslibdash tabsetPanel
tabsetPanel( ..., id = NULL, selected = NULL, type = c("tabs", "pills", "hidden"), .list = NULL )tabsetPanel( ..., id = NULL, selected = NULL, type = c("tabs", "pills", "hidden"), .list = NULL )
... |
|
id |
If provided, you can use |
selected |
The |
type |
|
.list |
Optional list of tab panels. |
A shiny::tabsetPanel() tag that may be included in a Shiny UI.
tabsetPanel( id = "tabs", shiny::tabPanel("Overview", shiny::p("Overview content")), shiny::tabPanel("Details", shiny::p("Detail content")) )tabsetPanel( id = "tabs", shiny::tabPanel("Overview", shiny::p("Overview content")), shiny::tabPanel("Details", shiny::p("Detail content")) )
Renders a notification through shiny::showNotification(). The default
Shiny / bslib notification chrome (background, border, position, status
color, dismiss button) is used as-is; toast() only adds support for the
extra parameters below — header (title + optional icon), body, and
subtitle footnote — emitted as flat blocks so they do not produce a
card-in-notification (box-in-box) look. The type option in options
controls the status color via Shiny's own notification statuses
("default", "message", "warning", "error").
toast( title, body = NULL, subtitle = NULL, options = NULL, session = shiny::getDefaultReactiveDomain() )toast( title, body = NULL, subtitle = NULL, options = NULL, session = shiny::getDefaultReactiveDomain() )
title |
Toast title. |
body |
Body content. |
subtitle |
Toast subtitle. Rendered as an additional muted body block
below |
options |
Toast options. Supports |
session |
Shiny session object. |
The notification ID (string) returned by shiny::showNotification(),
which can be used with shiny::removeNotification().
if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(shiny::actionButton("show_toast", "Show toast")), server = function(input, output, session) { shiny::observeEvent(input$show_toast, { toast( title = "Heads up", body = "Background job finished with a warning.", options = list(type = "warning", delay = 3000), session = session ) }) } ) }if (interactive()) { shiny::shinyApp( ui = bslib::page_fluid(shiny::actionButton("show_toast", "Show toast")), server = function(input, output, session) { shiny::observeEvent(input$show_toast, { toast( title = "Heads up", body = "Background job finished with a warning.", options = list(type = "warning", delay = 3000), session = session ) }) } ) }
This updates the hidden body tabset used by tabItems() and keeps the
sidebar active item synchronized with the selected tab.
updateTabItems( session = shiny::getDefaultReactiveDomain(), inputId, selected = NULL )updateTabItems( session = shiny::getDefaultReactiveDomain(), inputId, selected = NULL )
session |
Shiny session. |
inputId |
The shared |
selected |
Name of the tab to select. |
nothing. This function is called for its side-effects.
if (interactive()) { shiny::shinyApp( ui = dashboardPage( header = dashboardHeader(title = "Demo"), sidebar = dashboardSidebar( sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview"), menuItem("Reports", tabName = "reports") ) ), body = dashboardBody( shiny::actionButton("go_reports", "Go to reports"), tabItems( tabItem(tabName = "overview", shiny::h2("Overview")), tabItem(tabName = "reports", shiny::h2("Reports")) ) ) ), server = function(input, output, session) { shiny::observeEvent(input$go_reports, { updateTabItems(session, inputId = "sidebarMenu", selected = "reports") }) } ) }if (interactive()) { shiny::shinyApp( ui = dashboardPage( header = dashboardHeader(title = "Demo"), sidebar = dashboardSidebar( sidebarMenu( id = "sidebarMenu", menuItem("Overview", tabName = "overview"), menuItem("Reports", tabName = "reports") ) ), body = dashboardBody( shiny::actionButton("go_reports", "Go to reports"), tabItems( tabItem(tabName = "overview", shiny::h2("Overview")), tabItem(tabName = "reports", shiny::h2("Reports")) ) ) ), server = function(input, output, session) { shiny::observeEvent(input$go_reports, { updateTabItems(session, inputId = "sidebarMenu", selected = "reports") }) } ) }
Value box
valueBox(value, subtitle, icon = NULL, color = "aqua", width = 4, href = NULL)valueBox(value, subtitle, icon = NULL, color = "aqua", width = 4, href = NULL)
value |
The value to display in the box. |
subtitle |
Subtitle text. |
icon |
An icon tag, created by |
color |
Box color. Supports both legacy |
width |
The width of the box in Bootstrap grid columns ( |
href |
Optional URL to link to. |
A bslib::value_box() tag, wrapped in a shiny::column() unless
width is NULL.
valueBox( value = "128", subtitle = "Open tickets", icon = icon("inbox"), color = "primary" )valueBox( value = "128", subtitle = "Open tickets", icon = icon("inbox"), color = "primary" )
Value box output
valueBoxOutput(outputId, width = 4)valueBoxOutput(outputId, width = 4)
outputId |
Output variable name. |
width |
The width of the box in Bootstrap grid columns ( |
A shiny::uiOutput() container to be filled by renderValueBox().
valueBoxOutput("tickets")valueBoxOutput("tickets")