express.ui.navset_bar

express.ui.navset_bar(
    title,
    id=None,
    selected=None,
    sidebar=None,
    fillable=True,
    gap=None,
    padding=None,
    header=None,
    footer=None,
    navbar_options=None,
    fluid=True,
    position=DEPRECATED,
    bg=DEPRECATED,
    inverse=DEPRECATED,
    underline=DEPRECATED,
    collapsible=DEPRECATED,
)

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

This function wraps navset_bar.

Parameters

title : TagChild

Title to display in the navbar.

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

fillable : bool | list[str] = True

Whether or not to allow fill items to grow/shrink to fit the browser window. If True, all nav() pages are fillable. A character vector, matching the value of nav()s to be filled, may also be provided. Note that, if a sidebar is provided, fillable makes the main content portion fillable.

gap : Optional[CssUnit] = None

A CSS length unit defining the gap (i.e., spacing) between elements provided to *args. This value is only used when the navbar is fillable.

padding : Optional[CssUnit | list[CssUnit]] = None

Padding to use for the body. This can be a numeric vector (which will be interpreted as pixels) or a character vector with valid CSS lengths. The length can be between one and four. If one, then that value will be used for all four sides. If two, then the first value will be used for the top and bottom, while the second value will be used for left and right. If three, then the first will be used for top, the second will be left and right, and the third will be bottom. If four, then the values will be interpreted as top, right, bottom, and left respectively. This value is only used when the navbar is fillable.

header : TagChild = None

UI to display above the selected content.

footer : TagChild = None

UI to display below the selected content.

fluid : bool = True

True to use fluid layout; False to use fixed layout.

navbar_options : Optional[NavbarOptions] = None

Configure the appearance and behavior of the navbar using navbar_options to set properties like position, background color, and more. navbar_options was added in v1.3.0 and replaces deprecated arguments position, bg, inverse, collapsible, and underline.

position : NavbarOptionsPositionType | MISSING_TYPE = DEPRECATED

Deprecated in v1.3.0. Please use navbar_options instead; see navbar_options for details. Determines whether the navbar should be displayed at the top of the page with normal scrolling behavior (“static-top”), pinned at the top (“fixed-top”), or pinned at the bottom (“fixed-bottom”). Note that using “fixed-top” or “fixed-bottom” will cause the navbar to overlay your body content, unless you add padding (e.g., tags.style("body {padding-top: 70px;}")).

bg : str | None | MISSING_TYPE = DEPRECATED

Deprecated in v1.3.0. Please use navbar_options instead; see navbar_options for details. Background color of the navbar (a CSS color).

inverse : bool | MISSING_TYPE = DEPRECATED

Deprecated in v1.3.0. Please use navbar_options instead; see navbar_options for details. Either True for a light text color or False for a dark text color.

collapsible : bool | MISSING_TYPE = DEPRECATED

Deprecated in v1.3.0. Please use navbar_options instead; see navbar_options for details. True to automatically collapse the elements into an expandable menu on mobile devices or narrow window widths.

Examples

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

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

with ui.navset_bar(title="Navset Bar", id="selected_navset_bar"):
    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_bar()