glassTabsUI: Animated glass-style tab navigation UI

In glasstabs: Animated Glass-Style Tabs and Select Inputs for 'Shiny'

Animated glass-style tab navigation UI

Description

Animated glass-style tab navigation UI

Usage

glassTabsUI(
  id,
  ...,
  selected = NULL,
  wrap = TRUE,
  compact = FALSE,
  shape = c("rounded", "square"),
  indicator = c("glass", "solid", "underline"),
  orientation = c("horizontal", "vertical"),
  tab_align = c("center", "left", "right"),
  text_align = c("center", "left", "right"),
  overflow = c("scroll", "multiline", "menu"),
  swipe = FALSE,
  extra_ui = NULL,
  theme = NULL,
  dark_selector = NULL
)

Arguments

id	Module namespace id.
...	One or more glassTabPanel() objects.
selected	Value of the initially selected tab.
wrap	Logical. When TRUE wraps everything in a div.gt-container.
compact	Logical. When TRUE applies reduced padding and spacing via the .gt-compact CSS modifier - useful inside dashboard cards or tight layouts (e.g. bs4Dash).
shape	Corner style for the tab bar and content. One of "rounded" (default) for the signature glass look, or "square" for crisp, selectize-style corners that match glassSelect() and glassMultiSelect() when shape = "square".
indicator	Style of the sliding active-tab indicator. One of: "glass" (default) - the signature frosted-glass halo with backdrop blur, shimmer, and transfer particle. "solid" - a flat, opaque sliding pill. No backdrop-filter or shimmer; lighter on the GPU and better suited to plain or enterprise-style dashboards. Colors still follow the theme's halo_bg / halo_border. "underline" - a slim sliding bar under the active tab; tab buttons lose their pill background for a classic tabbed look. The bar color follows the theme's halo_border.
orientation	One of "horizontal" (default) or "vertical". In vertical mode the tab buttons stack in a left-hand rail and the content pane sits beside them. The sliding halo follows automatically, arrow-key navigation switches to Up/Down, and indicator = "underline" renders as a slim bar on the edge of the active tab adjacent to the content.
tab_align	Alignment of the tab group within the available navigation area in either orientation. One of "center" (default), "left", or "right".
text_align	Alignment of text and icons inside each tab button. One of "center" (default), "left", or "right".
overflow	How the tab strip behaves when labels no longer fit. One of "scroll" (the default), "multiline", or "menu". Scroll mode keeps a single touch-friendly row and brings the active tab into view. Multiline mode allows more than one row. Menu mode uses a compact native chooser and is available only when orientation = "horizontal".
swipe	Whether a horizontal touch swipe over non-interactive panel content should move to the previous or next available tab. The default is FALSE so maps, plots, tables, and other interactive content keep their normal gestures.
extra_ui	Optional additional UI placed to the right of the tab bar (below the tab rail when orientation = "vertical").
theme	One of "dark", "light", "auto", or a glass_tab_theme() object. "auto" bridges to Bootstrap 5 / bslib color modes: light-theme variables apply by default and dark-theme variables apply whenever an ancestor carries data-bs-theme="dark" (e.g. bslib::toggle_dark_mode() or input_dark_mode()), with the switch handled live in the browser - no server round-trip.
dark_selector	Optional CSS selector for a parent element that signals dark mode (e.g. "body.dark-mode" for bs4Dash, "[data-bs-theme=dark]" for Bootstrap 5). When provided and theme = "light", a second scoped ⁠<style>⁠ block overrides the CSS variables back to the dark-mode defaults whenever that selector is active - so the tabs stay readable after a dark-mode toggle without any server-side intervention.

Value

An htmltools::tagList ready to use in a Shiny UI.

See Also

Other glass tabs: appendGlassTab(), disableGlassTab(), glassTabCondition(), glassTabPanel(), glassTabsOutput(), glassTabsServer(), renderGlassTabs(), showGlassTab(), updateGlassTabBadge(), updateGlassTabsUI()

glasstabs documentation built on Sept. 11, 2026, 5:08 p.m.