Tabs (Angular 22.3): vertical tab headers with headerPosition #1002

Task type

• New topic / component documentation
• Update existing topic (new release, API change, new feature)
• Add missing platform variant (Angular / React / WebComponents / Blazor)
• Improve existing content (clarity, examples, structure)
• Add or update code samples
• Other

Platform(s)

• Angular
• React
• WebComponents
• Blazor
• All platforms

Description

Ignite UI for Angular 22.3 adds vertical tab headers (IgniteUI/igniteui-angular#1982). The PR, IgniteUI/igniteui-angular#17884, is open with changes requested, so check the final API before writing.

igx-tabs gets a headerPosition input. top, the default, keeps the row of headers above the content. start and end put the headers in a column before or after the content. To document:

• start and end follow the text direction, so start is on the right in right-to-left layouts.
• The column is as wide as its widest header. When the tabs have a height and the headers don't fit, scroll buttons above and below the headers scroll them.
• Keyboard: in a column, Up and Down move to the next and previous enabled tab, and Home and End work as in a row. Left and Right are not handled. activation applies as in a row.
• tabAlignment aligns the headers along the column. With justify, they share the free height of the column.
• The active indicator, and the active border in the Bootstrap theme, are on the side next to the content. The Indigo and Bootstrap borders and corners follow the side too.
• headerPosition can change at runtime. The selection and the focus are kept.

Topic: docs/angular/src/content/en/components/tabs.mdx

• A new section with a sample of start and end, for example after "Angular Tabs Alignment".
• "Angular Tabs Alignment": how tabAlignment works in a column.
• Keyboard navigation for a column. The topic has no keyboard navigation section yet.
• API References: headerPosition.

Acceptance criteria

• A section with a live sample and a code snippet of vertical headers.
• The right-to-left behavior and the keyboard keys in a column are described.
• The API References section lists headerPosition.

Related resources

• Issue: Feature Request: Vertical tabs igniteui-angular#1982
• PR: feat(tabs): add the headerPosition input for the headers igniteui-angular#17884
• Tabs Specification, updated with the new option
• The same feature for Web Components has its own sub-issue under the parent issue.