Create a navigation list panel

Source: R/bootstrap.R

Create a navigation list panel that provides a list of links on the left which navigate to a set of tabPanels displayed to the right.

navlistPanel(
  ...,
  id = NULL,
  selected = NULL,
  header = NULL,
  footer = NULL,
  well = TRUE,
  fluid = TRUE,
  widths = c(4, 8)
)

Arguments

...

tabPanel() elements to include in the navlist

id

If provided, you can use input$id in your server logic to determine which of the current navlist items is active. The value will correspond to the value argument that is passed to tabPanel().

selected

The value (or, if none was supplied, the title) of the navigation item that should be selected by default. If NULL, the first navigation will be selected.

header

Tag or list of tags to display as a common header above all tabPanels.

Tag or list of tags to display as a common footer below all tabPanels

well

TRUE to place a well (gray rounded rectangle) around the navigation list.

fluid

TRUE to use fluid layout; FALSE to use fixed layout.

widths

Column widths of the navigation list and tabset content areas respectively.

Details

You can include headers within the navlistPanel by including plain text elements in the list. Versions of Shiny before 0.11 supported separators with "——", but as of 0.11, separators were no longer supported. This is because version 0.11 switched to Bootstrap 3, which doesn't support separators.

Examples

fluidPage(

  titlePanel("Application Title"),

  navlistPanel(
    "Header",
    tabPanel("First"),
    tabPanel("Second"),
    tabPanel("Third")
  )
)
#> <div class="container-fluid">
#>   <h2>Application Title</h2>
#>   <div class="row">
#>     <div class="col-sm-4 well">
#>       <ul class="nav nav-pills nav-stacked" data-tabsetid="8624">
#>         <li class="navbar-brand">Header</li>
#>         <li class="active">
#>           <a href="#tab-8624-2" data-toggle="tab" data-bs-toggle="tab" data-value="First">First</a>
#>         </li>
#>         <li>
#>           <a href="#tab-8624-3" data-toggle="tab" data-bs-toggle="tab" data-value="Second">Second</a>
#>         </li>
#>         <li>
#>           <a href="#tab-8624-4" data-toggle="tab" data-bs-toggle="tab" data-value="Third">Third</a>
#>         </li>
#>       </ul>
#>     </div>
#>     <div class="col-sm-8">
#>       <div class="tab-content" data-tabsetid="8624">
#>         <div class="tab-pane active" data-value="First" id="tab-8624-2"></div>
#>         <div class="tab-pane" data-value="Second" id="tab-8624-3"></div>
#>         <div class="tab-pane" data-value="Third" id="tab-8624-4"></div>
#>       </div>
#>     </div>
#>   </div>
#> </div>