Tabs

Tabs and navigation allow you to create Shiny apps with multiple pages.

Tabs and navigation allow you to create apps that have multiple pages.

Tabset with pill navigation

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 190

## file: app.R
library(shiny)
library(bslib)

ui <- page_fluid(
  navset_pill( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
        "Other links", 
        nav_panel("D", "Panel D content"), 
        "----", 
        "Description:", 
        nav_item( 
            a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
        ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fluid(
  navset_pill( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
        "Other links", 
        nav_panel("D", "Panel D content"), 
        "----", 
        "Description:", 
        nav_item( 
            a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
        ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to create an app with a tabset with pill navigation layout:

1. Add navset_pill(), from the bslib package, inside any Shiny UI page method (e.g., page_fluid()). navset_pill() creates a pillset.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to navset_pill() to set the items displayed in the navset.

3. Pass arguments to the nav items to control each item’s title, appearance, and associated content. For example, set the title argument of nav_panel() to control the displayed title of the nav item. Pass UI elements as additional arguments to nav_panel(). These elements will be displayed when the tab is active.

4. Optional: Pass a string to the id argument of navset_pill(). This will create an input value that holds the title of the currently selected nav item. For example, id = "tab" would create a reactive value accessible as input$tab.

Tabset with pill list navigation

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 320

## file: app.R
library(shiny)
library(bslib)

ui <- page_fluid(
  navset_pill_list( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fluid(
  navset_pill_list( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to create an app with a pill list navigation layout. A pill list is a vertical pillset navigation.

1. Add navset_pill_list() inside any Shiny UI page method (e.g., page_fluid()). navset_pill_list() creates a pill list.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to navset_pill_list() to set the items displayed in the pill list.

3. Pass arguments to the nav items to control each item’s title, appearance, and associated content. For example, set the title argument of nav_panel() to control the displayed title of the nav item. Pass UI elements as additional arguments to nav_panel(). These elements will be displayed when the tab is active.

4. Optional: Pass a string to the id argument of navset_pill_list(). This will create an input value that holds the title of the currently selected nav item. For example, id = "tab" would create a reactive value accessible as input$tab.

Tabset with tab navigation

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 200

## file: app.R
library(shiny)
library(bslib)

ui <- page_fluid(
  navset_tab( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fluid(
  navset_tab( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to create an app with a tab navigation layout:

1. Add navset_tab() inside any Shiny UI page method (e.g., page_fluid()). navset_tab() creates a tabset.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to navset_tab() to set the items displayed in the tabset.

3. Pass arguments to the nav items to control each item’s title, appearance, and associated content. For example, set the title argument of nav_panel() to control the displayed title of the nav item. Pass UI elements as additional arguments to nav_panel(). These elements will be displayed when the tab is active.

4. Optional: Pass a string to the id argument of navset_tab(). This will create an input value that holds the title of the currently selected nav item. For example, id = "tab" would create a reactive value accessible as input$tab.

Card with a tabbed tabset

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 250

## file: app.R
library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_tab( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_tab( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to add a card with a tabbed tabset to your app:

1. Add navset_card_tab() inside any Shiny UI page method (e.g., page_fluid()). navset_card_tab() creates a tabset inside a card.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to navset_card_tab() to set the items displayed in the tabset inside the card.

3. Pass arguments to the nav items to control each item’s title, appearance, and associated content. For example, set the title argument of nav_panel() to control the displayed title of the nav item. Pass UI elements as additional arguments to nav_panel(). These elements will be displayed when the tab is active.

4. Optional: Pass a string to the id argument of navset_card_tab(). This will create an input value that holds the title of the currently selected nav item. For example, id = "tab" would create a reactive value accessible as input$tab.

Card with a pill tabset

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 250

## file: app.R
library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_pill( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fillable(
  navset_card_pill( 
    nav_panel("A", "Page A content"), 
    nav_panel("B", "Page B content"), 
    nav_panel("C", "Page C content"), 
    nav_menu( 
      "Other links", 
      nav_panel("D", "Panel D content"), 
      "----", 
      "Description:", 
      nav_item( 
        a("Shiny", href = "https://shiny.posit.co", target = "_blank") 
      ), 
    ), 
  ), 
  id = "tab" 
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to add a card with a pill tabset to your app:

1. Add navset_card_pill() inside any Shiny UI page method (e.g., page_fluid()). navset_card_pill() creates a pillset inside a card.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to navset_card_pill() to set the items displayed in the pillset inside the card.

3. Pass arguments to the nav items to control each item’s title, appearance, and associated content. For example, set the title argument of nav_panel() to control the displayed title of the nav item. Pass UI elements as additional arguments to nav_panel(). These elements will be displayed when the tab is active.

4. Optional: Pass a string to the id argument of navset_card_pill(). This will create an input value that holds the title of the currently selected nav item. For example, id = "tab" would create a reactive value accessible as input$tab.

Vertically collapsing accordion panels

#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 350

## file: app.R
library(shiny)
library(bslib)

ui <- page_fluid(
  accordion(  
      accordion_panel( 
        title = "Section A", 
        icon = bsicons::bs_icon("menu-app"),
        "Section A content"
      ),  
      accordion_panel(
        title = "Section B",
        icon = bsicons::bs_icon("sliders"),
        "Section B content"
      ),  
      accordion_panel(
        title = "Section C",
        icon = bsicons::bs_icon("bar-chart"),
        "Section C content"
      ),  
      accordion_panel(
        title = "Section D",
        icon = bsicons::bs_icon("calendar-date"), 
        "Section D content" 
      ),  
      id = "acc",  
      open = "Section A"  
  )  
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_fluid(
  accordion(  
      accordion_panel( 
        title = "Section A", 
        icon = bsicons::bs_icon("menu-app"),
        "Section A content"
      ),  
      accordion_panel(
        title = "Section B",
        icon = bsicons::bs_icon("sliders"),
        "Section B content"
      ),  
      accordion_panel(
        title = "Section C",
        icon = bsicons::bs_icon("bar-chart"),
        "Section C content"
      ),  
      accordion_panel(
        title = "Section D",
        icon = bsicons::bs_icon("calendar-date"), 
        "Section D content" 
      ),  
      id = "acc",  
      open = "Section A"  
  )  
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to add vertically collapsing accordion panels to your app:

1. Add accordion() inside any Shiny UI page method (e.g., page_fluid()). accordion() creates a vertically collapsing accordion.

2. Pass accordion panel items to accordion() using calls to accordion_panel(). Each call to accordion_panel() creates one accordion panel.

3. Use accordion_panel()’s title argument to control a panel’s title. Optionally, set an icon for an accordion_panel() using the icon argument. Pass UI elements as additional arguments to accordion_panel(). These elements will be displayed when the panel is expanded.

4. Optional: Pass a string to the id argument of accordian(). This will create an input value that represents the currently active accordion panels. For example, id = "panel" would create a reactive value accessible as input$panel.