CODEWITHSUNDEEP
rshiny
Mark
Mark

Reputation: 4537

R shiny navbarPage right aligned tabs

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?

Upvotes: 3

Views: 6261

Answers (3)

Bangyou
Bangyou

Reputation: 9816

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)

Upvotes: 5

Mark
Mark

Reputation: 4537

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)

Upvotes: 5

K. Rohde
K. Rohde

Reputation: 9676

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.

Upvotes: 4

Related Questions