Navbars

A navbar adds a navigation bar, allowing users to easily navigate your Shiny app.

A navbar adds a navigation bar to your app, allowing users to easily navigate your app.

Navbar at top

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

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

ui <- page_navbar( 
  nav_panel("A", "Page A content"), 
  nav_panel("B", "Page B content"), 
  nav_panel("C", "Page C content"), 
  title = "App with navbar", 
  id = "page", 
) 

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_navbar( 
  nav_panel("A", "Page A content"), 
  nav_panel("B", "Page B content"), 
  nav_panel("C", "Page C content"), 
  title = "App with navbar", 
  id = "page", 
) 

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to add a navbar to the top of your app:

1. Define a navbar page layout with page_navbar(), from the bslib package.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to page_navbar() to control the items displayed in the navbar.

3. Set the title argument of page_navbar() to set the browser window title.

4. Optional: Pass a string to the id argument of page_navbar(). You can use this id to dynamically update the nav container with nav_select(), nav_insert(), etc. (see Dynamically update nav containers).

Navbar at bottom

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

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

ui <- page_navbar( 
  nav_panel("A", "Page A content"), 
  nav_panel("B", "Page B content"), 
  nav_panel("C", "Page C content"), 
  title = "App with navbar", 
  id = "page", 
  position = "fixed-bottom" 
) 

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

library(shiny)
library(bslib)

ui <- page_navbar( 
  nav_panel("A", "Page A content"), 
  nav_panel("B", "Page B content"), 
  nav_panel("C", "Page C content"), 
  title = "App with navbar", 
  id = "page", 
  position = "fixed-bottom" 
) 

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

Follow these steps to add a navbar to the bottom of your app:

1. Define a navbar page layout with page_navbar(), from the bslib package.

2. Pass nav items (e.g., nav_panel() and nav_menu()) to page_navbar() to control the items displayed in the navbar.

3. Set the position argument of page_navbar() to "fixed-bottom" to pin the navbar to the bottom of the app. By default, position is "static-top", which causes the navbar to display at the top with normal scrolling behavior. You can also pin the navbar to the top (position = "fixed-top").

4. Set the title argument of page_navbar() to set the browser window title.

5. Optional: Pass a string to the id argument of page_navbar(). You can use this id to dynamically update the nav container with nav_select(), nav_insert(), etc. (see Dynamically update nav containers).