1

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?

2
  • Can you be more descriptive? You want what to be scrollable? The tabs? The content? The entire component?
    – sfdcfox
    Commented Sep 6, 2022 at 18:32
  • I wanted to scroll the lightning-tabs when there are to many of them
    – SBN
    Commented Sep 6, 2022 at 19:19

3 Answers 3

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.

1

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.

0

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>

enter image description here

Resources:

3
  • You can't use the "scoped" and "vertical" variants at the same time. And the "scoped" variant will not allow a user to scroll all tabs. Commented Sep 6, 2022 at 19:39
  • Yep. I am not suggesting using both at the same time. :) Rather try to use scope instead of adding scroll. Maybe it will fit you @SBN? Commented Sep 6, 2022 at 19:42
  • The problem is that I need to make vertical tabs scrollable
    – SBN
    Commented Sep 6, 2022 at 19:44

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .