How to make vertical tabView?

[Scotty134]

I would like to split the screen vertically and have tabulation options on the left stacked vertically and on the right side to display content. But I can't find any useful information how to change the orientation.

[ibrahimkelly]

I would like to split the screen vertically and have tabulation options on the left stacked vertically and on the right side to display content. But I can't find any useful information how to change the orientation.

Take a look at this : Prime NG splitter

[ShiYaoDiving]

You can change the pt.

    tabs: {
        root: ({ props }) => ({
            class: ['flex flex-row mt-1', { '[&>[data-pc-name=tablist]]:overflow-hidden': props.scrollable }]
        })
    },
    tab: {
        root: ({ props, context }) => ({
            class: [
                'shrink-0',
                // Shape
                'border-t',
                'border-solid',
                'rounded-b-md',
                // Spacing
                'py-4 px-4',
               // rotate
               "rotate-90 transform origin-top-left"
            ]
        })
    }
// OTHER ....

[qwadrox]

Hi @Scotty134!

Here is an example how you could align tab list items to the left side in a column, and place the content on the right side:

https://stackblitz.com/edit/rpyrk8?file=src%2Fapp%2Ftab-view-basic-demo.ts

The drawback is that the accessibility will work the same as before, so to focus the next item you would need to press right arrow key instead of down arrow key. If accessibility important to you, this might not be the best. The scrollable feature won't work out of the box as well, and so on. You will have to polishing this solution further...