# tabs URL: /api/directives/builtins/tabs/ Section: builtins -------------------------------------------------------------------------------- tabs - Patitas window.BENGAL_THEME_DEFAULTS = { appearance: 'light', palette: 'brown-bengal' }; window.Bengal = window.Bengal || {}; window.Bengal.enhanceBaseUrl = '/patitas/assets/js/enhancements'; window.Bengal.watchDom = true; window.Bengal.debug = false; window.Bengal.enhanceUrls = { 'toc': '/patitas/assets/js/enhancements/toc.632a9783.js', 'docs-nav': '/patitas/assets/js/enhancements/docs-nav.57e4b129.js', 'tabs': '/patitas/assets/js/enhancements/tabs.aac9e817.js', 'lightbox': '/patitas/assets/js/enhancements/lightbox.1ca22aa1.js', 'interactive': '/patitas/assets/js/enhancements/interactive.fc077855.js', 'mobile-nav': '/patitas/assets/js/enhancements/mobile-nav.d991657f.js', 'action-bar': '/patitas/assets/js/enhancements/action-bar.d62417f4.js', 'copy-link': '/patitas/assets/js/enhancements/copy-link.7d9a5c29.js', 'data-table': '/patitas/assets/js/enhancements/data-table.1f5bc1eb.js', 'lazy-loaders': '/patitas/assets/js/enhancements/lazy-loaders.a5c38245.js', 'holo': '/patitas/assets/js/enhancements/holo.ee13c841.js', 'link-previews': '/patitas/assets/js/enhancements/link-previews.8d906535.js' }; (function () { try { var defaults = window.BENGAL_THEME_DEFAULTS || { appearance: 'system', palette: '' }; var defaultAppearance = defaults.appearance; if (defaultAppearance === 'system') { defaultAppearance = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light'; } var storedTheme = localStorage.getItem('bengal-theme'); var storedPalette = localStorage.getItem('bengal-palette'); var theme = storedTheme ? (storedTheme === 'system' ? defaultAppearance : storedTheme) : defaultAppearance; var palette = storedPalette ?? defaults.palette; document.documentElement.setAttribute('data-theme', theme); if (palette) { document.documentElement.setAttribute('data-palette', palette); } } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); } })(); { "prerender": [ { "where": { "and": [ { "href_matches": "/docs/*" }, { "not": { "selector_matches": "[data-external], [target=_blank], .external" } } ] }, "eagerness": "conservative" } ], "prefetch": [ { "where": { "and": [ { "href_matches": "/*" }, { "not": { "selector_matches": "[data-external], [target=_blank], .external" } } ] }, "eagerness": "conservative" } ] } Skip to main content Magnifying Glass ESC Recent Clear Magnifying Glass No results for "" Start typing to search... ↑↓ Navigate ↵ Open ESC Close Powered by Lunr ฅᨐฅ DocumentationArrow ClockwiseGet StartedCodeSyntaxDirectivesStarburstExtendingBookmarkReferenceInfoAboutTroubleshootingReleasesDevGitHubPatitas API Reference Magnifying Glass Search ⌘K Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal List ฅᨐฅ Magnifying Glass Search X Close Documentation Caret Down Arrow Clockwise Get Started Code Syntax Directives Starburst Extending Bookmark Reference Info About Troubleshooting Releases Dev Caret Down GitHub Patitas API Reference Palette Appearance Chevron Down Mode Monitor System Sun Light Moon Dark Palette Snow Lynx Brown Bengal Silver Bengal Charcoal Bengal Blue Bengal Patitas API Reference Caret Right Directives Caret Right Builtins admonition container dropdown tabs contracts decorator options protocol registry Caret Right Lexer Caret Right Classifiers directive fence footnote heading html link_ref list quote thematic Caret Right Scanners block directive fence html core modes Caret Right Parsing Caret Right Blocks Caret Right List blank_line indent item_blocks marker mixin nested trace types core directive footnote table Caret Right Inline core emphasis links match_registry special tokens charsets containers token_nav Caret Right Plugins autolinks footnotes math strikethrough table task_lists Caret Right Renderers html Caret Right Roles Caret Right Builtins formatting icons math reference protocol registry Caret Right Utils hashing logger text errors highlighting icons location nodes parser patitas protocols stringbuilder tokens DirectivesBuiltins ᗢ Caret Down Link Copy URL External Open LLM text Copy Copy LLM text Share with AI Ask Claude Ask ChatGPT Ask Gemini Ask Copilot Module directives.builtins.tabs Tab directives for tabbed content. Provides tabbed content sections with full markdown support including nested directives, code blocks, and admonitions. Supports two rendering modes: "enhanced" (default): JavaScript-based tabs with data-tab-target "css_state_machine": URL-driven tabs using :target CSS selector Tab-Item Options: :selected: - Whether this tab is initially selected :icon: - Icon name to show next to tab label :badge: - Badge text (e.g., "New", "Beta", "Pro") :disabled: - Mark tab as disabled/unavailable Example: Python JavaScriptPopular Content for Python tab. Content for JavaScript tab. Thread Safety: Stateless handlers. Safe for concurrent use across threads. 5Classes1Function Classes TabItemOptions 5 ▼ Options for tab-item directive. Options for tab-item directive. Attributes Name Type Description selected bool Whether this tab is initially selected icon str | None Icon name to show next to tab label badge str | None Badge text (e.g., "New", "Beta", "Pro") disabled bool Mark tab as disabled/unavailable sync str | None — TabSetOptions 3 ▼ Options for tab-set directive. Options for tab-set directive. Attributes Name Type Description id str | None Unique ID for the tab set sync str | None Sync key for synchronizing tabs across multiple tab-sets mode str | None Rendering mode - "enhanced" (JS) or "css_state_machine" (URL-driven) TabItemData 6 ▼ Data extracted from a rendered tab-item div. Data extracted from a rendered tab-item div. Attributes Name Type Description title str — selected str — icon str — badge str — disabled str — content str — TabItemDirective 7 ▼ Handler for tab-item directive. Must be inside a tab-set container. Thread Safety: Stateless … Handler for tab-item directive. Must be inside a tab-set container. Thread Safety: Stateless handler. Safe for concurrent use. Attributes Name Type Description names ClassVar[tuple[str, ...]] — token_type ClassVar[str] — contract ClassVar[DirectiveContract | None] — options_class ClassVar[type[TabItemOptions]] — preserves_raw_content ClassVar[bool] — Methods parse 6 Directive ▼ Build tab-item AST node. def parse(self, name: str, title: str | None, options: TabItemOptions, content: str, children: Sequence[Block], location: SourceLocation) -> Directive Parameters Name Type Description name — title — options — content — children — location — Returns Directive render 3 ▼ Render tab-item to HTML. Creates a wrapper div with metadata that the parent t… def render(self, node: Directive[TabItemOptions], rendered_children: str, sb: StringBuilder) -> None Render tab-item to HTML. Creates a wrapper div with metadata that the parent tab-set will parse to build the navigation and panels. Parameters Name Type Description node — rendered_children — sb — TabSetDirective 10 ▼ Handler for tab-set container directive. Contains tab-item children that form a tabbed interface. … Handler for tab-set container directive. Contains tab-item children that form a tabbed interface. Thread Safety: Stateless handler. Safe for concurrent use. Attributes Name Type Description names ClassVar[tuple[str, ...]] — token_type ClassVar[str] — contract ClassVar[DirectiveContract | None] — options_class ClassVar[type[TabSetOptions]] — preserves_raw_content ClassVar[bool] — Methods parse 6 Directive ▼ Build tab-set AST node. def parse(self, name: str, title: str | None, options: TabSetOptions, content: str, children: Sequence[Block], location: SourceLocation) -> Directive Parameters Name Type Description name — title — options — content — children — location — Returns Directive render 3 ▼ Render tab-set to HTML. Extracts tab items from rendered children and builds n… def render(self, node: Directive[TabSetOptions], rendered_children: str, sb: StringBuilder) -> None Render tab-set to HTML. Extracts tab items from rendered children and builds navigation + content panels. Parameters Name Type Description node — rendered_children — sb — Internal Methods 3 ▼ _render_enhanced 4 ▼ Render JavaScript-enhanced tabs (default mode). def _render_enhanced(self, tab_id: str, sync_key: str, matches: list[TabItemData], sb: StringBuilder) -> None Parameters Name Type Description tab_id — sync_key — matches — sb — _render_css_state_machine 4 ▼ Render CSS state machine tabs (URL-driven, no JS required). def _render_css_state_machine(self, tab_id: str, sync_key: str, matches: list[TabItemData], sb: StringBuilder) -> None Parameters Name Type Description tab_id — sync_key — matches — sb — _slugify 1 str ▼ Convert text to URL-safe slug. def _slugify(self, text: str) -> str Parameters Name Type Description text — Returns str Functions _extract_tab_items 1 list[TabItemData] ▼ Extract tab-item divs from rendered HTML, handling nested divs correctly. def _extract_tab_items(text: str) -> list[TabItemData] Parameters Name Type Description text str Rendered HTML containing tab-item divs Returns list[TabItemData] ← Previous dropdown List © 2026 Patitas built in ᓚᘏᗢ { "linkPreviews": { "enabled": true, "hoverDelay": 200, "hideDelay": 150, "showSection": true, "showReadingTime": true, "showWordCount": true, "showDate": true, "showTags": true, "maxTags": 3, "includeSelectors": [".prose"], "excludeSelectors": ["nav", ".toc", ".breadcrumb", ".pagination", ".card", "[class*='-card']", ".tab-nav", "[class*='-widget']", ".child-items", ".content-tiles"], "allowedHosts": [], "allowedSchemes": ["https"], "hostFailureThreshold": 3 } } window.BENGAL_LAZY_ASSETS = { tabulator: '/patitas/assets/js/tabulator.min.js', dataTable: '/patitas/assets/js/data-table.js', mermaidToolbar: '/patitas/assets/js/mermaid-toolbar.9de5abba.js', mermaidTheme: '/patitas/assets/js/mermaid-theme.344822c5.js', graphMinimap: '/patitas/assets/js/graph-minimap.ff04e939.js', graphContextual: '/patitas/assets/js/graph-contextual.355458ba.js' }; window.BENGAL_ICONS = { close: '/patitas/assets/icons/close.911d4fe1.svg', enlarge: '/patitas/assets/icons/enlarge.652035e5.svg', copy: '/patitas/assets/icons/copy.3d56e945.svg', 'download-svg': '/patitas/assets/icons/download.04f07e1b.svg', 'download-png': '/patitas/assets/icons/image.c34dfd40.svg', 'zoom-in': '/patitas/assets/icons/zoom-in.237b4a83.svg', 'zoom-out': '/patitas/assets/icons/zoom-out.38857c77.svg', reset: '/patitas/assets/icons/reset.d26dba29.svg' }; Arrow Up -------------------------------------------------------------------------------- Metadata: - Word Count: 1219 - Reading Time: 6 minutes