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.

Relevant Functions

  • ui.page_navbar
    ui.page_navbar(*args, title=None, id=None, selected=None, sidebar=None, fillable=True, fillable_mobile=False, gap=None, padding=None, position='static-top', header=None, footer=None, bg=None, inverse=False, underline=True, collapsible=True, fluid=True, window_title=MISSING, lang=None)

  • ui.nav
    ui.nav_panel(title, *args, value=None, icon=None)

No matching items

Navbar at top

#| 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)

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"
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

#| 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)

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"
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().