ui.nav_panel

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

Create a nav item pointing to some internal content.

Parameters

title: TagChild

A title to display. Can be a character string or UI elements (i.e., tags).

*args: TagChild = ()

UI elements to display when the item is active.

value: Optional[str] = None

The value of the item. Use this value to determine whether the item is active (when an id is provided to the nav container) or to programmatically select the item (e.g., update_navs). You can also provide the value to the selected argument of the navigation container (e.g., navset_tab).

icon: TagChild = None

An icon to appear inline with the button/link.

See Also

• nav_menu
• nav_control
• nav_spacer
• navset_bar
• navset_tab
• navset_pill
• navset_underline
• navset_card_tab
• navset_card_pill
• navset_card_underline
• navset_pill_list
• navset_hidden

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from typing import List

from shiny import App, Inputs, Outputs, Session, reactive, ui
from shiny.types import NavSetArg


def nav_controls(prefix: str) -> List[NavSetArg]:
    return [
        ui.nav_panel("a", prefix + ": tab a content"),
        ui.nav_panel("b", prefix + ": tab b content"),
        ui.nav_panel("c", prefix + ": tab c content"),
        ui.nav_spacer(),
        ui.nav_menu(
            "Links",
            ui.nav_control(
                ui.a(
                    "Shiny",
                    href="https://shiny.posit.co/py/",
                    target="_blank",
                )
            ),
            "----",
            "Plain text",
            "----",
            ui.nav_control(
                ui.a(
                    "Posit",
                    href="https://posit.co",
                    target="_blank",
                )
            ),
            align="right",
        ),
    ]


app_ui = ui.page_navbar(
    *nav_controls("page_navbar"),
    title="page_navbar()",
    id="navbar_id",
    footer=ui.div(
        {"style": "width:80%;margin: 0 auto"},
        ui.tags.style(
            """
            h4 {
                margin-top: 3em;
            }
            """
        ),
        ui.h4("navset_tab()"),
        ui.navset_tab(*nav_controls("navset_tab()")),
        ui.h4("navset_pill()"),
        ui.navset_pill(*nav_controls("navset_pill()")),
        ui.h4("navset_underline()"),
        ui.navset_underline(*nav_controls("navset_underline()")),
        ui.h4("navset_card_tab()"),
        ui.navset_card_tab(*nav_controls("navset_card_tab()")),
        ui.h4("navset_card_pill()"),
        ui.navset_card_pill(*nav_controls("navset_card_pill()")),
        ui.h4("navset_card_underline()"),
        ui.navset_card_underline(*nav_controls("navset_card_underline()")),
        ui.h4("navset_pill_list()"),
        ui.navset_pill_list(*nav_controls("navset_pill_list()")),
    )
)


def server(input: Inputs, output: Outputs, session: Session):
    @reactive.effect
    def _():
        print("Current navbar page: ", input.navbar_id())


app = App(app_ui, server)