navbarPage

navbarPage(title, ..., id = NULL, header = NULL, footer = NULL, inverse = FALSE, collapsable = FALSE, fluid = TRUE, responsive = TRUE, theme = NULL)
navbarMenu(title, ..., icon = NULL)

Arguments

title	The title to display in the navbar
...	tabPanel elements to include in the page
id	If provided, you can use input$id in your server logic to determine which of the current tabs is active. The value will correspond to the value argument that is passed to tabPanel.
header	Tag of list of tags to display as a common header above all tabPanels.
footer	Tag or list of tags to display as a common footer below all tabPanels
inverse	TRUE to use a dark background and light text for the navigation bar
collapsable	TRUE to automatically collapse the navigation elements into a menu when the width of the browser is less than 940 pixels (useful for viewing on smaller touchscreen device)
fluid	TRUE to use a fluid layout. FALSE to use a fixed layout.
responsive	TRUE to use responsive layout (automatically adapt and resize page elements based on the size of the viewing device)
theme	Alternative Bootstrap stylesheet (normally a css file within the www directory). For example, to use the theme located at www/bootstrap.css you would use theme = "bootstrap.css".
icon	Optional icon to appear on a navbarMenu tab.

Create a page with a top level navigation bar

Value

A UI defintion that can be passed to the shinyUI function.

Description

Create a page that contains a top level navigation bar that can be used to toggle a set of tabPanel elements.

Details

The navbarMenu function can be used to create an embedded menu within the navbar that in turns includes additional tabPanels (see example below).

Examples

shinyUI(navbarPage("App Title",
  tabPanel("Plot"),
  tabPanel("Summary"),
  tabPanel("Table")
))

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left">App Title</span>
      <ul class="nav">
        <li class="active">
          <a href="#tab-9504-1" data-toggle="tab">Plot</a>
        </li>
        <li>
          <a href="#tab-9504-2" data-toggle="tab">Summary</a>
        </li>
        <li>
          <a href="#tab-9504-3" data-toggle="tab">Table</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">&nbsp;</div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab-9504-1"></div>
    <div class="tab-pane" id="tab-9504-2"></div>
    <div class="tab-pane" id="tab-9504-3"></div>
  </div>
</div> 


shinyUI(navbarPage("App Title",
  tabPanel("Plot"),
  navbarMenu("More",
    tabPanel("Summary"),
    tabPanel("Table")
  )
))

<div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
      <span class="brand pull-left">App Title</span>
      <ul class="nav">
        <li class="active">
          <a href="#tab-9220-1" data-toggle="tab">Plot</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            More
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#tab-2392-1" data-toggle="tab">Summary</a>
            </li>
            <li>
              <a href="#tab-2392-2" data-toggle="tab">Table</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">&nbsp;</div>
  <div class="tab-content">
    <div class="tab-pane active" id="tab-9220-1"></div>
    <div class="tab-pane" id="tab-2392-1"></div>
    <div class="tab-pane" id="tab-2392-2"></div>
  </div>
</div> 

See also

tabPanel, tabsetPanel