Proposal: Add Vertical TabView Support via New Prop Orientation

[NADIRATIF]

Hi @melloware ! 👋

I’d like to propose adding a vertical orientation feature to the TabView component by introducing a new prop (e.g., orientation). This would enhance flexibility for users who need vertical tab layouts (e.g., side navigation, responsive designs, or accessibility use cases).

Problem Statement

Currently, the TabView component only supports horizontal layouts. Many applications (e.g., dashboards, admin panels, or mobile-responsive UIs) require vertical tabs for better usability or space optimization. Without this feature, developers must implement custom workarounds, which can be error-prone and time-consuming.

Proposed Solution

Add a new prop (e.g., orientation: "horizontal" | "vertical") to the TabView component.

• Default: orientation="horizontal" (backward-compatible).
• New Behavior: When orientation="vertical", tabs render vertically (e.g., flex-direction: column, adjusted styling, and keyboard navigation).

Use Cases

1. Sidebar Navigation: Vertical tabs for app navigation menus.
2. Mobile Responsiveness: Switch to vertical tabs on smaller screens.
3. Accessibility: Better screen reader compatibility for certain layouts.

Implementation Plan

I’d be happy to implement this feature! Here’s a rough outline:

1. Add the orientation prop to the component’s API.
2. Adjust styling/layout logic (e.g., CSS/JSX for vertical alignment).
3. Ensure keyboard navigation and ARIA attributes adapt to vertical layouts.
4. Update documentation and add examples.

Potential Concerns

• Backward Compatibility: Default behavior remains unchanged.
• Complexity: The change is opt-in and scoped to the TabView component.
• Maintenance: I’ll ensure thorough testing and documentation.

Feedback Request

What are your thoughts on this proposal? Are there edge cases or design considerations I might have missed? I’d love to collaborate to refine this!

Thank you for your time! 🙏

[melloware]

marked as "Waiting for upvotes". this is a PrimeTek decision not mine...

[T2AComunicacao]

It's really necessary a vertical tabs