ui.navbar_options

ui.navbar_options(
    position=MISSING,
    bg=MISSING,
    theme=MISSING,
    underline=MISSING,
    collapsible=MISSING,
    **attrs,
)

Configure the appearance and behavior of the navbar.

Navbar style with Bootstrap 5 and Bootswatch themes

In Shiny v1.3.0, the default navbar colors for Bootswatch themes are less opinionated by default and follow light or dark mode (see input_dark_mode).

You can use ui.navbar_options() to adjust the colors of the navbar when using a Bootswatch preset theme with Bootstrap 5. For example, the Bootswatch documentation for the Flatly theme shows 4 navbar variations. Inspecting the source code for the first example reveals the following markup:

<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <!-- all of the navbar html -->
</nav>

Note that this navbar uses the bg-primary class for a dark navy background. The navbar's white text is controlled by the data-bs-theme="dark" attribute, which is used by Bootstrap for light text on a dark background. In Shiny, you can achieve this look with:

ui.page_navbar(
  theme=ui.Theme(version=5, preset="flatly"),
  navbar_options=ui.navbar_options(class="bg-primary", theme="dark")
)

This particular combination of class="bg-primary" and theme="dark" works well for most Bootswatch presets. Note that in Shiny Express, theme and navbar_options both are set using page_opts.

Another variation from the Flatly documentation features a navbar with dark text on a light background:

ui.page_navbar(
  theme = ui.Theme(version=5, preset="flatly"),
  navbar_options = ui.navbar_options(class="bg-light", theme="light")
)

The above options set navbar foreground and background colors that are always the same in both light and dark modes. To customize the navbar colors used in light or dark mode, you can use the $navbar-light-bg and $navbar-dark-bg Sass variables. When provided, Shiny will automatically choose to use light or dark text as the foreground color.

ui.page_navbar(
    theme=(
        ui.Theme(version=5, preset = "flatly")
        .add_defaults(
            navbar_light_bg="#18BC9C", # flatly's success color (teal)
            navbar_dark_bg="#2C3E50"   # flatly's primary color (navy)
        )
    )
  )
)

Finally, you can also use the $navbar-bg Sass variable to set the navbar background color for both light and dark modes:

ui.page_navbar(
    theme=ui.Theme(version=5, preset="flatly").add_defaults(navbar_bg="#E74C3C") # flatly's red
)

Parameters

position : NavbarOptionsPositionType | MISSING_TYPE = MISSING

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 = MISSING

Background color of the navbar (a CSS color).

theme : NavbarOptionsThemeType | MISSING_TYPE = MISSING

The navbar theme: either "dark" for a light text color (on a dark background) or "light" for a dark text color (on a light background). If "auto" (the default) and bg is provided, the best contrast to bg is chosen.

underline : bool | MISSING_TYPE = MISSING

If True, adds an underline effect to the navbar.

collapsible : bool | MISSING_TYPE = MISSING

If True, automatically collapses the elements into an expandable menu on mobile devices or narrow window widths.

attrs : TagAttrValue = {}

Additional HTML attributes to apply to the navbar container element.

Returns:

NavbarOptions A NavbarOptions object configured with the specified options.

Examples

Loading...