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

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 150

## file: app.py
from shiny import App, ui

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


def server(input, output, session):
    pass


app = App(app_ui, server)

Express

from functools import partial

from shiny.express import ui
from shiny.ui import page_navbar

ui.page_opts(
    title="App with navbar",  
    page_fn=partial(page_navbar, id="page"),  
)

with ui.nav_panel("A"):  
    "Page A content"

with ui.nav_panel("B"):  
    "Page B content"

with ui.nav_panel("C"):  
    "Page C content"

Core

from shiny import App, ui

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


def server(input, output, session):
    pass


app = App(app_ui, server)

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

1. Define a navbar page layout with ui.page_navbar().

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

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

4. Optional: Pass a string to the id argument of ui.page_navbar(). 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().

Navbar at bottom

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| layout: horizontal
#| viewerHeight: 150

## file: app.py
from shiny import App, ui

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


def server(input, output, session):
    pass


app = App(app_ui, server)

Express

from functools import partial

from shiny.express import ui
from shiny.ui import page_navbar

ui.page_opts(
    title="App with navbar",  
    page_fn=partial(page_navbar, id="page", position="fixed-bottom"),  
)

with ui.nav_panel("A"):  
    "Page A content"

with ui.nav_panel("B"):  
    "Page B content"

with ui.nav_panel("C"):  
    "Page C content"

Core

from shiny import App, ui

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


def server(input, output, session):
    pass


app = App(app_ui, server)

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

1. Define a navbar page layout with ui.page_navbar().

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

3. Set the position parameter of ui.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 ui.page_navbar() to set the browser window title.

5. Optional: Pass a string to the id argument of ui.page_navbar(). 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().