navset | R Documentation |
Render a collection of nav_panel()
items into a container.
navset_tab(..., id = NULL, selected = NULL, header = NULL, footer = NULL)
navset_pill(..., id = NULL, selected = NULL, header = NULL, footer = NULL)
navset_underline(..., id = NULL, selected = NULL, header = NULL, footer = NULL)
navset_pill_list(
...,
id = NULL,
selected = NULL,
header = NULL,
footer = NULL,
well = TRUE,
fluid = TRUE,
widths = c(4, 8)
)
navset_hidden(..., id = NULL, selected = NULL, header = NULL, footer = NULL)
navset_bar(
...,
title = NULL,
id = NULL,
selected = NULL,
sidebar = NULL,
fillable = TRUE,
gap = NULL,
padding = NULL,
header = NULL,
footer = NULL,
fluid = TRUE,
navbar_options = NULL,
position = deprecated(),
bg = deprecated(),
inverse = deprecated(),
collapsible = deprecated()
)
navset_card_tab(
...,
id = NULL,
selected = NULL,
title = NULL,
sidebar = NULL,
header = NULL,
footer = NULL,
height = NULL,
full_screen = FALSE,
wrapper = card_body
)
navset_card_pill(
...,
id = NULL,
selected = NULL,
title = NULL,
sidebar = NULL,
header = NULL,
footer = NULL,
height = NULL,
placement = c("above", "below"),
full_screen = FALSE,
wrapper = card_body
)
navset_card_underline(
...,
id = NULL,
selected = NULL,
title = NULL,
sidebar = NULL,
header = NULL,
footer = NULL,
height = NULL,
full_screen = FALSE,
wrapper = card_body
)
This first example creates a simple tabbed navigation container with two tabs.
The tab name and the content of each tab are specified in the nav_panel()
calls
and navset_tab()
creates the tabbed navigation around these two tabs.
library(htmltools) navset_tab( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")) )
In the rest of the examples, we'll include links among the tabs (or pills) in the navigation controls.
link_shiny <- tags$a(shiny::icon("github"), "Shiny", href = "https://github.com/rstudio/shiny", target = "_blank") link_posit <- tags$a(shiny::icon("r-project"), "Posit", href = "https://posit.co", target = "_blank")
navset_tab()
You can fully customize the controls in the navigation component.
In this example, we've added a direct link to the Shiny repository using nav_item()
.
We've also included a dropdown menu using nav_menu()
containing an option to select a third tab panel
and another direct link to Posit's website.
Finally, we've separated the primary tabs on the left
from the direct link and dropdown menu on the right
using nav_spacer()
.
navset_tab( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_pill()
navset_pill()
creates a navigation container that behaves exactly like navset_tab()
,
but the tab toggles are pills or button-shaped.
navset_pill( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_underline()
navset_underline()
creates a navigation container that behaves exactly like navset_tab()
and navset_pill()
, but the active/focused navigation links are styled with an underline.
navset_underline( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_card_tab()
The tabbed navigation container can also be used in a card()
component
thanks to navset_card_tab()
.
Learn more about this approach in the
article about Cards,
including how to add a shared sidebar
to all tabs in the card
using the sidebar
argument of navset_card_tab()
.
navset_card_tab( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_card_pill()
Similar to navset_pill()
,
navset_card_pill()
provides a pill-shaped variant to navset_card_tab()
.
You can use the placement
argument to position the navbar
"above"
or "below"
the card body.
navset_card_pill( placement = "above", nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_card_underline()
navset_card_underline()
provides a card-based variant of navset_underline()
.
navset_card_underline( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
navset_pill_list()
Furthermore, navset_pill_list()
creates a vertical list of navigation controls
adjacent to, rather than on top of, the tab content panels.
navset_pill_list( nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", nav_item(link_shiny), nav_item(link_posit) ) )
page_navbar()
Finally, page_navbar()
provides full-page navigation container
similar to navset_underline()
but where each nav_panel()
is treated as a full page of content
and the navigation controls appear in a top-level navigation bar.
Note that the navbar background and underline styling can be controlled via navbar_options
.
page_navbar()
is complimented by navset_bar()
which produces a similar layout intended to be used within an app.
page_navbar( title = "My App", navbar_options = navbar_options( bg = "#0062cc", underline = TRUE ), nav_panel(title = "One", p("First tab content.")), nav_panel(title = "Two", p("Second tab content.")), nav_panel(title = "Three", p("Third tab content")), nav_spacer(), nav_menu( title = "Links", align = "right", nav_item(link_shiny), nav_item(link_posit) ) )
nav_panel()
, nav_panel_hidden()
create panels of content.
nav_menu()
, nav_item()
, nav_spacer()
create menus, items, or
space in the navset control area.
nav_insert()
, nav_remove()
programmatically add or remove nav
panels.
nav_select()
, nav_show()
, nav_hide()
change the state of a
nav_panel()
in a navset.
Other Panel container functions:
nav-items
,
nav_select()
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.