Navigation tabs with multiple lines

Hi there


I have a Navigation tab with many tabs, but I don't want the scroll functionality.

I wanted it to wrap or break the tabs into multiple lines so that they would all be visible at once.

Is this possible?

Hi David,

you can get a long way with this css


.tabs .tabs-header,
.tabs .tabs-header .list {
    flex-wrap: wrap;
}
[data-block*="TabsHeaderItem"]:first-child .tabs-header-tab {
    margin-left: 32px;
}

it's not perfect, I changed the margin on the first one so they would align when arranged under each other, but it really should refer to the variable --space-1, which is 32px, but don't really know how to do that.

Also, you have to be able to live with the first tab header not really starting entirely at the left, but if not, I'm sure some more complex css could also fix that.


Dorine

Hi @Dorine Boudry 

thank you for your answer. As for the space variable, it would be something like

margin-left: var(--space-m);

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.