[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.

Merge after the samples are deployed (IgniteUI/igniteui-angular-samples#4071, IgniteUI/igniteui-wc-examples#1309). The headerPosition and IgxTabsHeaderPosition API links render as plain code until a separate PR adds them to the ApiLink registries.

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}

[Copilot]

🟡 Changes recommended

Active demo embeds point to unavailable samples, and the new API references lack registry entries, leaving them without usable links.

2 open issues

• Avoid active demo embeds before the demos are deployed · New
• Sync API registries before adding references to new tabs APIs · New

1 resolved since last review

• Remove embeds for unavailable header-position demos

_{Review effort: Balanced}

[ChronosSF]

@viktorkombov , my main gripe with the change is that it's not very compliant with how we want the usage sections of the new topics to look. The usage sections have very concise descriptions that lean on the code snippet and sample, rather than prose. If you run the topic your section is probably bigger than all others combined. I went through the information and while it is rather nice, I think we can omit a lot of it as inferable. Remember that the docs are now aimed at bots first, rather than humans.

Do a rework on just the prose to compact it as much as possible and leave the inferable info out. You can PR it on top of this so we can compare .