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

Context manager for nav item pointing to some internal content.

This function wraps nav.


title: TagChild

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

value: Optional[str] = None

The value of the item. This is used to determine whether the item is active (when an id is provided to the nav container), programmatically select the item (e.g., update_navs), and/or be provided to the selected argument of the navigation container (e.g., navset_tab).

icon: TagChild = None

An icon to appear inline with the button/link.


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

## file:
from import ui

ui.page_opts(title="Nav Panel Example")

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

with ui.nav_panel("Page 2"):
    with ui.navset_card_underline():
        with ui.nav_panel("Tab 1"):
            "Tab 1 content"
        with ui.nav_panel("Tab 2"):
            "Tab 2 content"
        with ui.nav_panel("Tab 3"):
            "Tab 3 content"


with ui.nav_menu("Links", align="right"):
    with ui.nav_control():
        ui.a("Shiny", href="", target="_blank")
    "Plain text"
    with ui.nav_control():
        ui.a("Posit", href="", target="_blank")