express.ui.navset_card_pill

express.ui.navset_card_pill(
    id=None,
    selected=None,
    title=None,
    sidebar=None,
    header=None,
    footer=None,
    placement='above',
)

Context manager for a set of nav items as a tabset inside a card container.

This function wraps navset_card_pill.

Parameters

id : Optional[str] = None

If provided, will create an input value that holds the currently selected nav item.

selected : Optional[str] = None

Choose a particular nav item to select by default value (should match it’s value).

sidebar : Optional[ui.Sidebar] = None

A shiny.express.ui.Sidebar component to display on every nav page.

header : TagChild = None

UI to display above the selected content.

footer : TagChild = None

UI to display below the selected content.

placement : Literal[‘above’, ‘below’] = 'above'

Placement of the nav items relative to the content.

Examples

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

## file: app.py
from shiny.express import input, render, ui

with ui.navset_card_pill(id="selected_navset_card_pill"):
    with ui.nav_panel("A"):
        "Panel A content"

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

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

    with ui.nav_menu("Other links"):
        with ui.nav_panel("D"):
            "Page D content"

        "----"
        "Description:"
        with ui.nav_control():
            ui.a("Shiny", href="https://shiny.posit.co", target="_blank")
ui.h5("Selected:")


@render.code
def _():
    return input.selected_navset_card_pill()