> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Tab > Tabs organize related content into separate panels under a single view, letting users switch between sections without navigating away from the page. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {children &&
{children}
}
; }; export const CardTile = ({title, href, imageLightSrc, imageDarkSrc, children, enableImgZoom}) => { if (!href) { return
{imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; } return {imageLightSrc && {title}} {imageDarkSrc && {title}} {title &&

{title}

}
{children}
; }; BEEQ Tab component overview BEEQ Tab component overview Tabs let users navigate between related sections of content within the same page or view. Each tab reveals one panel at a time, keeping the interface clean while making multiple content sections available without navigation. `bq-tab` must always be placed inside a `bq-tab-group`. The group manages tab state, keyboard navigation, and propagates `size`, `orientation`, and `placement` to all child tabs automatically. ## When to use Use tabs when * Content can be clearly organized into a small number of distinct, peer-level sections * Users need to compare or switch between sections without losing page context * Space is limited and displaying all sections at once would clutter the layout * Each section can stand independently without requiring the user to read others first Do not use tabs when * The number of tabs exceeds seven — prefer a sidebar navigation or dropdown instead * Content across sections is sequential and users must read them in order — prefer a stepper * Sections contain very different content types that do not relate to the same subject * The goal is to navigate to a new page or route — prefer anchor links or a navigation component ## Anatomy BEEQ Tab component anatomy BEEQ Tab component anatomy The tab group renders a list of tab buttons inside a scrollable container. Each individual tab consists of an optional icon, a text label, and an active-state underline indicator. | Part | Element | Description | | ----- | ------------------ | ------------------------------------------------------------------------------------------------------------- | | **1** | Active tab | The currently selected tab button, visually distinguished by brand color and the selected indicator | | **2** | Inactive tab | A tab button that is not currently selected; clicking it activates it and deactivates the previous tab | | **3** | Selected indicator | The underline beneath the active tab that marks the current selection; exposed as the `underline` shadow part | | **4** | Text label | The visible label inside each tab button; placed in the default slot and exposed as the `text` shadow part | ## Design guidelines ### Orientation The default orientation. Tabs are arranged in a row across the top of the content area. Best suited for most layouts. Tabs are stacked in a column to the left or right of the content area. Use when there are many tabs or when the layout is sidebar-based. ### Size Compact tabs with reduced padding. Use in dense interfaces or data-heavy views where space is constrained. The default size. Appropriate for most applications and standard-density layouts. Prominent tabs with increased padding. Use when tabs are a primary navigation element or accessibility requires larger touch targets. Setting `size` on `bq-tab-group` propagates the value to all child `bq-tab` elements automatically. You do not need to set `size` on each tab individually. ### Placement Use `placement="start"` (default) to left-align horizontal tabs or top-align vertical tabs. Use `placement="end"` to right-align horizontal tabs or bottom-align vertical tabs. ## Usage ### Default :host { flex-direction: column !important; align-items: stretch !important; } Tab Tab Long Tab name Tab Tab Tab Tab Tab `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Tab Tab Long Tab name Tab Tab Tab Tab Tab ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqTab, BqTabGroup } from "@beeq/react"; export default () => ( Tab Tab Long Tab name Tab Tab Tab Tab Tab ); ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqTab, BqTabGroup } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqTab, BqTabGroup], template: ` Tab Tab Long Tab name Tab Tab Tab Tab Tab `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Options ### With icons Tabs support an optional icon displayed before the label via the `icon` slot. :host { flex-direction: column !important; align-items: stretch !important; } Tab Tab Long Tab name Tab Tab Tab Tab `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Tab Tab Long Tab name Tab Tab Tab Tab ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqIcon, BqTab, BqTabGroup } from "@beeq/react"; export default () => ( Tab Tab Long Tab name Tab Tab Tab Tab ); ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqIcon, BqTab, BqTabGroup } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqIcon, BqTab, BqTabGroup], template: ` Tab Tab Long Tab name Tab Tab Tab Tab `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Sizes :host { flex-direction: column !important; align-items: stretch !important; gap: var(--bq-spacing-m) !important; } Tab Tab Long Tab name Tab Tab Long Tab name Tab Tab Long Tab name `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Tab Tab Long Tab name Tab Tab Long Tab name Tab Tab Long Tab name ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqTab, BqTabGroup } from "@beeq/react"; export default () => ( <> {/* Small */} Tab Tab Long Tab name {/* Medium (default) */} Tab Tab Long Tab name {/* Large */} Tab Tab Long Tab name ); ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqTab, BqTabGroup } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqTab, BqTabGroup], template: ` Tab Tab Long Tab name Tab Tab Long Tab name Tab Tab Long Tab name `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Vertical Set `orientation="vertical"` on `bq-tab-group` to stack tabs in a column beside the content area. :host { align-items: flex-start !important; } Tab Tab Long Tab name Tab `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Tab Tab Long Tab name Tab ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqTab, BqTabGroup } from "@beeq/react"; export default () => ( Tab Tab Long Tab name Tab ); ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqTab, BqTabGroup } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqTab, BqTabGroup], template: ` Tab Tab Long Tab name Tab `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### No divider Use `disable-divider` to hide the underline separator between the tab list and the content area. :host { flex-direction: column !important; align-items: stretch !important; } Tab Tab Long Tab name `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Tab Tab Long Tab name ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqTab, BqTabGroup } from "@beeq/react"; export default () => ( Tab Tab Long Tab name ); ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqTab, BqTabGroup } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqTab, BqTabGroup], template: ` Tab Tab Long Tab name `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Best practices Do Keep tab labels short and parallel — prefer noun phrases like "Overview", "Details", or "Settings" rather than full sentences. Don't Don't use tabs with only one or two items — a single visible section or a toggle is simpler and less visually heavy. Do Always provide a `controls` attribute on each `bq-tab` pointing to the `id` of its associated panel element to meet ARIA requirements. Don't Don't mix tabs of different sizes in the same tab group. Set `size` on `bq-tab-group` and let it propagate uniformly. Do Use consistent tab labels across your interface — if some tabs have icons, apply icons to all tabs in the same group. Don't Don't use tabs for actions or commands. Tabs are for navigation between content views, not for triggering operations like "Save" or "Delete". Do Choose the orientation that matches your layout — use horizontal tabs for top-of-content placement and vertical tabs for sidebar-style navigation. Don't Don't rely solely on the active-indicator underline for visual differentiation — ensure sufficient color contrast on the active tab label as well. ## Accessibility `bq-tab-group` and `bq-tab` implement the [ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): * The tab list container has `role="tablist"`. * Each `bq-tab` renders as a `