R shiny navbarPage right aligned tabs

Question

By default, using navbarPage() in shiny creates a 'static top' bootstrap page (example). If I were writing the html for a webpage, I could add a <ul> element with a class of nav navbar-nav navbar-right where the navbar-right would move the tabs/menus to the right side of the navbar.

There doesn't seem to be a way to coerce this behavior directly through the framework - is there a clever known way to accomplish this?

score 5 · Answer 1 · answered Feb 25 '16 at 15:03

The solution provided by K. Rohde, especially the edit, works for keeping it nearly pure Shiny. I discovered the insertAdjacentHTML javascript function and used it to create a right-hand text label. I guess it should be possible to make tabs that Shiny knows about and can use. In my case, I was wanting to put version information on the navbar, on the right-hand side. So, adding the disabled class was to avoid confusion.

library(shiny)
app <- shinyApp(
  ui = shinyUI(
    fluidPage(
      navbarPage("Site Title",
        tabPanel("v0.1"),
        tabPanel("tab1"),
        tabPanel("tab2")
      ),
      HTML("<script>var parent = document.getElementsByClassName('navbar-nav');
parent[0].insertAdjacentHTML( 'afterend', '<ul class=\"nav navbar-nav navbar-right\"><li class=\"disabled\"><a href=\"#\">v0.1</a></li></ul>' );</script>")
    )
  ),

  server = function(input, output, session){}

)

runApp(app)

score 5 · Answer 2 · answered Feb 26 '16 at 11:44

You can use shinyjs package

library(shiny)
ui <- shinyUI(

    navbarPage(
        'Test',
        id = 'menus',
        tabPanel('Test',
                 shinyjs::useShinyjs()),
        tabPanel("Summary"),
        tabPanel("Table", value = 'table')
    ))

server <- function(input, output, session) {
    shinyjs::addClass(id = "menus", class = "navbar-right")
}

shinyApp(ui, server)

K. Rohde · Accepted Answer · 2016-02-25T14:14:12.490

4

Depends on how low your expectations are.

You can add css to your UI which aligns either your tabsets or your header to the right. Code:

app <- shinyApp(
  ui = shinyUI(
    fluidPage(
      tags$head(
        tags$style(HTML("
          .navbar .navbar-nav {float: right}
          .navbar .navbar-header {float: right}
        "))
      ),
      navbarPage("header",
        tabPanel("tab1"),
        tabPanel("tab2")
      )
    )
  ),

  server = function(input, output, session){}

)

runApp(app)

Edit: The header argument of navbarPage also accepts regular div-containers. (E.g. a logo instead of plain text.) This can be exploitet to fill whole UI-Elements (e.g. buttons) into the header spot. Then of course you can float that to the right, while your tabs are aligned to the left.

edited Feb 25 '16 at 14:14

answered Feb 25 '16 at 14:00

K. Rohde

9,439
1
31
51

In this method, all tabs move to the right, correct? – Mark Feb 25 '16 at 14:01
@Mark Correct. I don't know if there is any way to define float on each tab seperately. – K. Rohde Feb 25 '16 at 14:06
@Mark Maybe exploit the `header` as explained in the edit. – K. Rohde Feb 25 '16 at 14:14

R shiny navbarPage right aligned tabs

3 Answers3

Linked