[viktorkombov]

Closes #1002
Closes #1003

Documents the new headerPosition option of the Tabs for Angular and Web Components, which places the tab headers in a column on the start or end side of the content. Adds a Header Position section and covers a column in Responsiveness, Properties, Keyboard Interaction, Screen Readers / ARIA, Styling, API References and FAQ.

Stacked on #935, so the base is its branch. Retarget to vnext after #935 merges. The samples will follow once igniteui-angular 22.3 and igniteui-webcomponents 7.5 are published.

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

The Header Position embeds reference unavailable samples, leaving broken demos unless both embeds are replaced with TODO comments until the samples are implemented and deployed.

1 open issue

• Remove embeds for unavailable header-position demos · New

What changed in this PR

Updates the shared Tabs topic to document vertical tab headers through headerPosition for Angular and Web Components, while keeping the feature-specific content hidden from React and Blazor.

Changes:

• Adds Header Position guidance, code snippets, and sample embeds.
• Explains column alignment, sizing, scrolling, right-to-left behavior, and styling.
• Updates properties, keyboard interaction, accessibility, API references, and FAQ.

File	Description
docs/​xplat/​src/​content/​en/​components/​layouts/​tabs.mdx	Documents vertical tab headers for Angular and Web Components throughout the shared Tabs topic.

_{Review effort: Balanced}