diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx
index a7ea4b0feb..a341c59aec 100644
--- a/docs/xplat/src/content/en/components/layouts/tabs.mdx
+++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx
@@ -3,7 +3,7 @@ title: "{Platform} Tabs Component"
description: "The {ProductName} Tabs component organizes related content into tabs, shows the content of the selected tab, and adds scroll buttons when the tabs don't fit."
keywords: "{Platform} Tabs, {ProductName}, tab header, tab panel, scroll buttons"
license: MIT
-last_updated: "2026-11-10"
+last_updated: "2026-11-11"
relatedComponents: ["Stepper", "Accordion"]
mentionedTypes: ["Tabs", "Tab"]
llms:
@@ -523,12 +523,6 @@ The
-
-For the alignment and the scroll buttons in a column of tab headers, see [Header Position](#header-position).
-
-
-
@@ -649,21 +643,15 @@ headerPosition: igniteui-react and IgniteUI.Blazor don't have it yet, so its con
Angular and WebComponents. When they ship it, add React and Blazor snippets and samples to the
Header Position section below, add a row to the Blazor Properties table, and add React and Blazor
to every Angular,WebComponents and WebComponents block about the header position or a column of
-tab headers: Anatomy, Responsiveness, Header Position, Properties, Styling, Keyboard Interaction,
-Screen Readers / ARIA, Accessibility Compliance, API References and FAQ.
+tab headers: Anatomy, Header Position, Properties, Keyboard Interaction, Screen Readers / ARIA,
+Accessibility Compliance, API References and FAQ.
*/}
### Header Position
-By default, the {Platform} Tabs component shows the tab headers in a row above the content. Set to `start` or `end` to show them in a column beside the content, also known as vertical tabs:
-
-- `top` (default): the tab headers form a row above the content.
-- `start`: the tab headers form a column before the content in the text direction, which is on the left in a left-to-right layout and on the right in a right-to-left layout.
-- `end`: the tab headers form a column after the content in the text direction, which is on the right in a left-to-right layout and on the left in a right-to-left layout.
-
-The `headerPosition` input requires `igniteui-angular` 22.3.0 or later.The `headerPosition` property requires `igniteui-webcomponents` 7.5.0 or later.
+Set on the {Platform} Tabs component to `start` or `end` for vertical tabs: a column of tab headers before or after the content in the text direction. The default, `top`, keeps them in a row above the content. The `headerPosition` input requires `igniteui-angular` 22.3.0 or later.The `headerPosition` property requires `igniteui-webcomponents` 7.5.0 or later.
@@ -683,8 +671,6 @@ By default, the {Platform} Tabs component shows the tab headers in a row above t
```
-In HTML, set the `header-position` attribute. In code, assign the `headerPosition` property. The `TabsHeaderPosition` type describes its values:
-
```ts
import type { TabsHeaderPosition } from 'igniteui-webcomponents';
@@ -714,7 +700,7 @@ tabs.headerPosition = position;
```
-To bind the position, type the bound value as `IgxTabsHeaderPosition`, the type of the input. With the `strictTemplates` compiler option, a bound value typed as `string` doesn't compile. `IgxTabsHeaderPosition` is also a constant that holds the three values:
+With `strictTemplates`, a bound value typed as `string` doesn't compile. Type it as `IgxTabsHeaderPosition`:
```ts
import { IgxTabsHeaderPosition } from 'igniteui-angular/tabs';
@@ -730,24 +716,13 @@ public position: IgxTabsHeaderPosition = IgxTabsHeaderPosition.end;
-In a column of tab headers:
-
-- The tab headers keep their horizontal labels. Each tab header takes the width of the column and keeps the minimum height of a tab header in a row.
-- The column is as wide as its widest tab header, from 90px to 360px. When the {Platform} Tabs component is too narrow for both the widest tab header and the content, the column and the content share the width, and the content keeps part of it. The column keeps this width when the Angular Tabs component gets narrower, and the content takes the rest of the width. A label that doesn't fit in its tab header wraps, and a word that is longer than the tab header breaks. After the second line, the Angular Tabs component truncates the label with an ellipsis. After the second line, the {Platform} Tabs component truncates an element in the `label` slot with an ellipsis.
-- The selected indicator is beside the selected tab header, on the side that faces the content. [Styling](#styling) describes the Bootstrap and the Indigo themes in a column.
-- Users move between the tab headers with Arrow Up and Arrow Down. See [Keyboard Interaction](#keyboard-interaction).
-
-In a column, the alignment that [Responsiveness](#responsiveness) describes applies along the height of the {Platform} Tabs component: `start` places the tab headers at the top, `center` in the middle, and `end` at the bottom. With `justify`, the tab headers fill the height of the column, and each tab header gets an equal share of it: each tab header grows by an equal share of the free height, so a taller tab header stays taller. When the tab headers don't fit, they start at the top and the column scrolls, whatever the alignment.
-
-Without a height, the {Platform} Tabs component grows to fit the column of tab headers or the content of the selected tab, whichever is taller, and shows all the tab headers. To limit the height, set a `height` or a `max-height` on the {Platform} Tabs component, or place it in a container that gives it a height. The content of a taller tab then scrolls inside the component, and when the tab headers don't fit, scroll buttons appear above and below them. A container that sizes the {Platform} Tabs component from its content, such as a grid row with an auto height or a flex row without a height, doesn't limit it, and the component grows with the content of the selected tab. A `max-height` on a container doesn't limit the component either, so set it on the component. A `height` or a `max-height` on a parent flex container with `flex-direction: column`, or a `height` on a parent grid container, limits the Angular Tabs component. Otherwise, set the `height` or the `max-height` on the component. The mouse wheel and touch don't scroll the tab headers of a column, but the scroll buttons and the keyboard do.
-
-You can change `headerPosition` at run time. The {Platform} Tabs component keeps the selected tab and the focus, and doesn't emit selection eventsthe change event.
+Without a height, the {Platform} Tabs component grows with its column of tab headers or the selected tab's content, whichever is taller. To limit it, set a `height` or a `max-height` on the component. The content of a taller tab then scrolls inside the component. A `max-height` on a container doesn't limit the component. In a column, each tab header takes the width of the column, and `tabAlignment``alignment` applies along the height. The mouse wheel and touch don't scroll the tab headers of a column, but the scroll buttons and the keyboard do.
-Tab items that drive the router have no `igx-tab-content`, and the `router-outlet` is outside the Angular Tabs component, so the routed views don't appear beside a column of tab headers: the component still takes the full width of its container, and the area beside the column stays empty. To show the routed views beside the column, place the Angular Tabs component and an element that holds the `router-outlet` in a container with `display: flex`, and give that element `flex: 1` and `min-width: 0`. The Angular Tabs component then takes the width of the column, and a wide routed view doesn't shrink it.
+To show routed views beside a column of tab headers, place the Angular Tabs component and an element that holds the `router-outlet` in a container with `display: flex`, and give that element `flex: 1` and `min-width: 0`.
@@ -979,7 +954,7 @@ The {Platform} Tabs component exposes the following properties. See the API refe
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | How the tab headers are arranged in the header strip. |
-| | `'top' \| 'start' \| 'end'` | `'top'` | The side of the content on which the tab headers are placed: a row above the content, or a column before or after it. The matching attribute is `header-position`. |
+| | `'top' \| 'start' \| 'end'` | `'top'` | Where the tab headers are placed: a row above the content, or a column before or after it. The matching attribute is `header-position`. |
| | `'auto' \| 'manual'` | `'auto'` | Whether moving the focus to a tab header with the keyboard also selects the tab. |
| | `IgcTabComponent \| null``IgrTab \| null` | `null` | Read-only. The selected tab. |
| | `string` | `''` | Read-only. The `label` of the selected tab, or its `id` when the tab has no `label`. |
@@ -1008,7 +983,7 @@ The {Platform} Tabs component exposes the following properties. See the API refe
| --- | --- | --- | --- |
| | `number` | `-1` | The index of the selected tab item. When no tab item is selected and the tab items have content, the Tabs component selects the first tab item. Supports two-way binding. |
| | `'start' \| 'end' \| 'center' \| 'justify'` | `'start'` | How the tab headers are arranged in the header strip. |
-| | `'top' \| 'start' \| 'end'` | `'top'` | The side of the content on which the tab headers are placed: a row above the content, or a column before or after it. |
+| | `'top' \| 'start' \| 'end'` | `'top'` | Where the tab headers are placed: a row above the content, or a column before or after it. |
| | `'auto' \| 'manual'` | `'auto'` | Whether moving the focus to a tab header with the keyboard also selects the tab. |
| | `boolean` | `false` | Whether the content animation on selection change is turned off. |
| | `IgxTabItemDirective` | — | Read-only. The selected tab item. |
@@ -1091,20 +1066,14 @@ The {Platform} Tabs component takes its colors from the theme. Change them with
| `--ig-tabs-button-disabled-color` | The icon color of a disabled scroll button. |
| `--ig-tabs-header-background` | The background of the header strip behind the tab headers. |
-
-
-In a column of tab headers, the Bootstrap theme, which has no selected indicator, separates the tab headers from the content with a border line, and the selected tab header is open toward the content, with its rounded corners on the outer side. In the Indigo theme, the border line of the tab headers is on the side that faces the content.
-
-
-
The `igc-tabs` element exposes the following CSS parts:
| Part | What it styles |
| --- | --- |
-| `start-scroll-button` | The start scroll button, which is above the tab headers in a column. |
-| `end-scroll-button` | The end scroll button, which is below the tab headers in a column. |
+| `start-scroll-button` | The start scroll button. |
+| `end-scroll-button` | The end scroll button. |
| `selected-indicator` | The indicator of the selected tab header. |
The `igc-tab` element exposes the following CSS parts:
@@ -1286,8 +1255,8 @@ The header strip of the {Platform} Tabs component is a single tab stop: only the
| Tab / Shift + Tab | Moves the focus out of the header strip, to the content of the selected tab or to the previous focusable element. The Tabs component doesn't handle these keys. |
| Arrow Right | Moves the focus to the next enabled tab header, and from the last one to the first. In a right-to-left layout, moves it to the previous one. With the `auto` activation, also selects the tab. In a column of tab headers, the Tabs component doesn't handle this key. |
| Arrow Left | Moves the focus to the previous enabled tab header, and from the first one to the last. In a right-to-left layout, moves it to the next one. With the `auto` activation, also selects the tab. In a column of tab headers, the Tabs component doesn't handle this key. |
-| Arrow Down | In a column of tab headers, moves the focus to the next enabled tab header, and from the last one to the first. The direction is the same in a right-to-left layout. With the `auto` activation, also selects the tab. |
-| Arrow Up | In a column of tab headers, moves the focus to the previous enabled tab header, and from the first one to the last. The direction is the same in a right-to-left layout. With the `auto` activation, also selects the tab. |
+| Arrow Down | In a column of tab headers, moves the focus to the next enabled tab header, and from the last one to the first. With the `auto` activation, also selects the tab. |
+| Arrow Up | In a column of tab headers, moves the focus to the previous enabled tab header, and from the first one to the last. With the `auto` activation, also selects the tab. |
| Home | Moves the focus to the first enabled tab header. With the `auto` activation, also selects the tab. |
| End | Moves the focus to the last enabled tab header. With the `auto` activation, also selects the tab. |
| Enter / Space | Selects the focused tab. |
@@ -1299,12 +1268,6 @@ The {Platform} Tabs component handles these keys on `keydown`:
- A key that you press together with Shift, Ctrl, Alt, or Meta does nothing.
- The Tabs component scrolls the header that receives the focus into view.
-
-
-The {Platform} Tabs component doesn't handle Arrow Up and Arrow Down in a row of tab headers, or Arrow Right and Arrow Left in a column, so these keys keep their default action, for example scrolling the page.
-
-
-
With a pointer, a click on a tab header focuses and selects the tab. A disabled tab ignores clicks. The scroll buttons aren't in the tab order.
@@ -1318,14 +1281,12 @@ Only the selected tab header of the Angular Tabs component is in the tab order,
| Tab / Shift + Tab | Moves the focus out of the header strip, to the content of the selected tab or to the previous focusable element. The Tabs component doesn't handle these keys. |
| Arrow Right | Moves the focus to the next enabled tab header, and from the last one to the first. In a right-to-left layout, moves it to the previous one. With the `auto` activation, also selects the tab. In a column of tab headers, the Tabs component doesn't handle this key. |
| Arrow Left | Moves the focus to the previous enabled tab header, and from the first one to the last. In a right-to-left layout, moves it to the next one. With the `auto` activation, also selects the tab. In a column of tab headers, the Tabs component doesn't handle this key. |
-| Arrow Down | In a column of tab headers, moves the focus to the next enabled tab header, and from the last one to the first. The direction is the same in a right-to-left layout. With the `auto` activation, also selects the tab. |
-| Arrow Up | In a column of tab headers, moves the focus to the previous enabled tab header, and from the first one to the last. The direction is the same in a right-to-left layout. With the `auto` activation, also selects the tab. |
+| Arrow Down | In a column of tab headers, moves the focus to the next enabled tab header, and from the last one to the first. With the `auto` activation, also selects the tab. |
+| Arrow Up | In a column of tab headers, moves the focus to the previous enabled tab header, and from the first one to the last. With the `auto` activation, also selects the tab. |
| Home | Moves the focus to the first enabled tab header. With the `auto` activation, also selects the tab. |
| End | Moves the focus to the last enabled tab header. With the `auto` activation, also selects the tab. |
| Enter / Space | With the `manual` activation, selects the focused tab by clicking its header. |
-The Angular Tabs component doesn't handle Arrow Up and Arrow Down in a row of tab headers, or Arrow Right and Arrow Left in a column, so these keys keep their default action, for example scrolling the page.
-
With a pointer, a click on a tab header selects the tab when the tab item has content. A disabled tab header ignores clicks. The scroll buttons aren't in the tab order.
@@ -1473,6 +1434,6 @@ These questions cover common {Platform} Tabs setup, accessibility, and usage sce
No. The {Platform} Tabs component organizes related information that users can open in any order, and it doesn't communicate an order of steps. Use the {Platform} Stepper for a sequential process, such as a checkout or a configuration wizard.
- Set the `headerPosition` property (the `header-position` attribute in HTML) of the {Platform} Tabs to `start` or `end` to show the tab headers in a column before or after the content. When the tab headers of the {Platform} Tabs component form a column, Arrow Up and Arrow Down move the focus between them. Give the {Platform} Tabs a height to keep its size fixed; when the tab headers don't fit, scroll buttons appear above and below them.
+ Set the `headerPosition` property (the `header-position` attribute in HTML) of the {Platform} Tabs to `start` or `end` to show the tab headers in a column before or after the content. Give the {Platform} Tabs a height to keep its size fixed.