navbarPage
navbarPage(title, ..., id = NULL, selected = NULL,
position = c("static-top", "fixed-top", "fixed-bottom"),
header = NULL, footer = NULL, inverse = FALSE,
collapsible = FALSE, collapsable, fluid = TRUE, responsive = NULL,
theme = NULL, windowTitle = title)
navbarMenu(title, ..., menuName = title, icon = NULL)
Arguments
title | The title to display in the navbar |
---|---|
... | tabPanel elements to include in the page. The
navbarMenu function also accepts strings, which will be used as menu
section headers. If the string is a set of dashes like "----" a
horizontal separator will be displayed in the menu. |
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 . |
selected | The value (or, if none was supplied, the title )
of the tab that should be selected by default. If NULL , the first
tab will be selected. |
position | Determines whether the navbar should be displayed at the top
of the page with normal scrolling behavior ("static-top" ), pinned at
the top ("fixed-top" ), or pinned at the bottom
("fixed-bottom" ). Note that using "fixed-top" or
"fixed-bottom" will cause the navbar to overlay your body content,
unless you add padding, e.g.: tags$style(type="text/css", "body
{padding-top: 70px;}") |
header | Tag or 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 |
collapsible | 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) |
collapsable | Deprecated; use collapsible instead. |
fluid | TRUE to use a fluid layout. FALSE to use a fixed
layout. |
responsive | This option is deprecated; it is no longer optional with Bootstrap 3. |
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" . |
windowTitle | The title that should be displayed by the browser window.
Useful if title is not a string. |
menuName | A name that identifies this navbarMenu . This
is needed if you want to insert/remove or show/hide an entire
navbarMenu . |
icon | Optional icon to appear on a navbarMenu tab. |
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
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">App Title</span>
</div>
<ul class="nav navbar-nav" data-tabsetid="1808">
<li class="active">
<a href="#tab-1808-1" data-toggle="tab" data-value="Plot">Plot</a>
</li>
<li>
<a href="#tab-1808-2" data-toggle="tab" data-value="Summary">Summary</a>
</li>
<li>
<a href="#tab-1808-3" data-toggle="tab" data-value="Table">Table</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="tab-content" data-tabsetid="1808">
<div class="tab-pane active" data-value="Plot" id="tab-1808-1"></div>
<div class="tab-pane" data-value="Summary" id="tab-1808-2"></div>
<div class="tab-pane" data-value="Table" id="tab-1808-3"></div>
</div>
</div>
navbarPage("App Title",
tabPanel("Plot"),
navbarMenu("More",
tabPanel("Summary"),
"----",
"Section header",
tabPanel("Table")
)
)
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">App Title</span>
</div>
<ul class="nav navbar-nav" data-tabsetid="5048">
<li class="active">
<a href="#tab-5048-1" data-toggle="tab" data-value="Plot">Plot</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-value="More">
More
<b class="caret"></b>
</a>
<ul class="dropdown-menu" data-tabsetid="8314">
<li>
<a href="#tab-8314-1" data-toggle="tab" data-value="Summary">Summary</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Section header</li>
<li>
<a href="#tab-8314-4" data-toggle="tab" data-value="Table">Table</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="tab-content" data-tabsetid="5048">
<div class="tab-pane active" data-value="Plot" id="tab-5048-1"></div>
<div class="tab-pane" data-value="Summary" id="tab-8314-1"></div>
<div class="tab-pane" data-value="Table" id="tab-8314-4"></div>
</div>
</div>