Is there way to make lightning-tabset scrollable?

Question

So I have a vertical lightning-tablet and I wanted to make lightning-tabs scrollable when there are to many of them. Is that possible?

Answer 1

You will not be able to scroll the lightning-tabs with <lightning-tabset variant="vertical">.

If you want to achieve this I would suggest you go with Vertical Tabs and SLDS Scrollable

It will be a little hard to implement, however you will be have more control under than UI elements.

So you need to add slds-scrollable_y class to
<ul class="slds-vertical-tabs__nav" role="tablist" aria-orientation="vertical"> line.

Also you can use template for:each here to show many lightning tabs.

Answer 2

Limited height should force scroll. If not add also overflow-y: scroll;

<template>
    <div style="height: 300px">
        <lightning-tabset variant="vertical">
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
            <lightning-tab label="Item"> Content ! </lightning-tab>
        </lightning-tabset>
    </div>
</template>

Move inline style to the separated CSS class.

Answer 3

What about variant="scoped"?

<template>
    <lightning-tabset variant="scoped">
        <template for:each={tabs} for:item="tab">
            <lightning-tab label={tab.label} key={tab.value} value={tab.value}>
                {tab.content}
            </lightning-tab>
        </template>
    </lightning-tabset>
</template>

Resources:

• https://developer.salesforce.com/docs/component-library/bundle/lightning-tabset/example