ui.navset_card_underline

ui.navset_card_underline(
    *args,
    id=None,
    selected=None,
    title=None,
    sidebar=None,
    header=None,
    footer=None,
    placement='above',
)

Render nav items inside a card container. Active/focused navigation links are styled with an underline.

Parameters

*args : NavSetArg | MetadataNode | Sequence[MetadataNode] = ()

A collection of nav items (e.g., shiny.ui.nav_panel).

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[Sidebar] = None

A shiny.ui.Sidebar component to display on every nav_panel 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.

See Also

Example

See nav_panel

Examples

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

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

app_ui = ui.page_fluid(
    ui.navset_card_underline(
        ui.nav_panel("A", "Panel A content"),
        ui.nav_panel("B", "Panel B content"),
        ui.nav_panel("C", "Panel C content"),
        ui.nav_menu(
            "Other links",
            ui.nav_panel("D", "Panel D content"),
            "----",
            "Description:",
            ui.nav_control(
                ui.a("Shiny", href="https://shiny.posit.co", target="_blank")
            ),
        ),
        id="selected_navset_card_underline",
    ),
    ui.h5("Selected:"),
    ui.output_code("selected"),
)


def server(input, output, session):
    @render.code
    def selected():
        return input.selected_navset_card_underline()


app = App(app_ui, server)