navlistPanel: Create a navigation list panel

In shinybootstrap2: Bootstrap 2 Web Components for Use with Shiny

Description

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.

Usage

navlistPanel(..., id = NULL, selected = 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.
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 withs 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; you can include separators by including "——" (any number of dashes works).

Examples

library(shiny)

fluidPage(

  titlePanel("Application Title"),

  navlistPanel(
    "Header",
    tabPanel("First"),
    tabPanel("Second"),
    "-----",
    tabPanel("Third")
  )
)

Example output

You probably do not want to attach this package (with library() or require()). Instead, you should use shinybootstrap2::withBootstrap2(). You can hide this message with suppressPackageStartupMessages().

Attaching package: 'shiny'

The following objects are masked from 'package:shinybootstrap2':

    animationOptions, basicPage, bootstrapPage, checkboxGroupInput,
    checkboxInput, column, dataTableOutput, dateInput, dateRangeInput,
    fixedPage, fixedRow, fluidPage, fluidRow, headerPanel, icon,
    mainPanel, navbarPage, navlistPanel, numericInput, pageWithSidebar,
    radioButtons, selectInput, selectizeInput, sidebarLayout,
    sidebarPanel, sliderInput, submitButton, textInput, titlePanel,
    updateCheckboxGroupInput, updateRadioButtons, updateSliderInput,
    verticalLayout

<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="3160">
        <li class="navbar-brand">Header</li>
        <li class="active">
          <a href="#tab-3160-2" data-toggle="tab" data-value="First">First</a>
        </li>
        <li>
          <a href="#tab-3160-3" data-toggle="tab" data-value="Second">Second</a>
        </li>
        <li class="navbar-brand">-----</li>
        <li>
          <a href="#tab-3160-5" data-toggle="tab" data-value="Third">Third</a>
        </li>
      </ul>
    </div>
    <div class="col-sm-8">
      <div class="tab-content" data-tabsetid="3160">
        <div class="tab-pane active" data-value="First" id="tab-3160-2"></div>
        <div class="tab-pane" data-value="Second" id="tab-3160-3"></div>
        <div class="tab-pane" data-value="Third" id="tab-3160-5"></div>
      </div>
    </div>
  </div>
</div>

shinybootstrap2 documentation built on May 2, 2019, 4:05 p.m.