Possible to show messageItem in shiny navbarPage? - r

Question

Similar to the dropdownMenu and messageItem functions which are available in shinydashboard I would like to show message items on the right hand side of the navbar in a navbarPage based app. Example of the related functions here: https://rstudio.github.io/shinydashboard/structure.html
I have tried inserting the same funcitons into a navbarPage app but it is not working as expected- not right aligned.
As a very basic reproducible example, this is the structure of my app with my attempt at including the message item:
library(shiny)
library(shinydashboard)
ui <- shinyUI(
navbarPage("Navbar!",
tabPanel("Plot",
sidebarLayout(
sidebarPanel(),
mainPanel()
)
),
tabPanel(
dropdownMenu(type = "messages",
messageItem(
from = "Sales Dept",
message = "Sales are steady this month."
)
)
)
)
)
server = function(input, output) { }
shinyApp(ui = ui, server = server)

Answer 1

I'm not the best at css, but this is a start to getting the result you're looking for. Change the UI to:
ui <- shinyUI(
fluidPage(
tags$head(
tags$style(HTML("
.navbar-nav .messages-menu a {padding-top: 0px; padding-bottom:0px}
.navbar-nav {width: 90%}
.navbar-nav .messages-menu {float: right; padding-top: 25px;}
"))
),
navbarPage("Navbar!",
tabPanel("Plot",
sidebarLayout(
sidebarPanel(),
mainPanel()
)
),
tabPanel(
dropdownMenu(type = "messages",
messageItem(
from = "Sales Dept",
message = "Sales are steady this month."
)
)
)
)
)
)
The width sets the class navbar-nav to 90% of the width of the screen since it is the space that contains both tab panels but not the label "Navbar!", and the second line takes the class messages-menu within navbar-nav and shifts it to the right of the space filled by navbar-nav (hence why we had to extend the width to include all of the header not occupied by the label; this percentage would likely have to change depending on the text input that is in place of "Navbar!").