express.ui.insert_nav_panel

express.ui.insert_nav_panel(
    id,
    title,
    *args,
    value=None,
    icon=None,
    target=None,
    position='after',
    select=False,
    session=None,
)

Create a new nav panel in an existing navset.

Parameters

id : str

The id of the navset container to insert into.

title : TagChild

A title for the inserted nav panel. Can be a character string or UI elements (i.e., tags).

*args : TagChild = ()

UI elements for the inserted nav panel.

value : Optional[str] = None

The value of the panel. Use this value to determine whether the panel is active (when an id is provided to the nav container) or to programmatically select the item (e.g., update_navset). 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 title.

target : Optional[str] = None

The value of an existing shiny.express.ui.nav_panel, next to which tab will be added. Can also be None; see position.

position : Literal[‘after’, ‘before’] = 'after'

The position of the new nav panel relative to the target. If target=None, then "before" means the new panel should be inserted at the head of the navlist, and "after" is the end.

select : bool = False

Whether the nav panel should be selected upon insertion.

session : Optional[Session] = None

A Session instance. If not provided, it is inferred via get_current_session.

Note

Unlike insert_nav_panel, this function does not support inserting of a heading/divider into an existing nav_menu. To do so, use insert_nav_panel instead of this Express variant (i.e., shiny.ui.insert_nav_panel("id", "Header")).

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 import reactive
from shiny.express import input, ui

with ui.sidebar():
    ui.input_action_button("add", "Add 'Dynamic' tab")
    ui.input_action_button("update_foo", "Add/Remove 'Foo' tab")


with ui.navset_tab(id="tabs"):
    with ui.nav_panel("Hello", value="Hello"):
        "This is the hello tab"
    with ui.nav_panel("Foo", value="Foo"):
        "This is the Foo tab"
    with ui.nav_menu("Static", value="Menu"):
        with ui.nav_panel("Static 1", value="s1"):
            "Static 1"
        with ui.nav_panel("Static 2", value="s2"):
            "Static 2"


@reactive.effect
@reactive.event(input.update_foo)
def _():
    if input.update_foo() % 2 == 0:
        ui.insert_nav_panel(
            "tabs",
            "Foo",
            "Foo is back now",
            value="Foo",
            target="Menu",
            position="before",
            select=True,
        )
    else:
        ui.remove_nav_panel("tabs", target="Foo")


@reactive.effect
@reactive.event(input.add)
def _():
    id = "Dynamic-" + str(input.add())
    ui.insert_nav_panel("tabs", title=id, value=id, target="s2", position="before")
    ui.notification_show(f"Added tab to menu: {id}")