Vertical nav-tabs

[AndreasArvidsson]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Bootstrap supports vertical nav using flex-column, but combining flex-column with nav-tabs gives a weird result.

Today:

Desired:

I can get the desired result by applying the bellow css. I could make a pull request if this kind of solution is acceptable.

.nav-tabs.flex-column {
    border-bottom: 0;
    border-right: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

.nav-tabs.flex-column .nav-link {
    border-radius: var(--bs-nav-tabs-border-radius) 0 0 var(--bs-nav-tabs-border-radius);
    margin-bottom: 0;
    margin-right: calc(-1 * var(--bs-nav-tabs-border-width));
}

.nav-tabs.flex-column .nav-link.active {
    border-color: var(--bs-nav-tabs-border-color);
    border-right-color: var(--bs-body-bg);
}

Motivation and context

If you have to many menu items horizontal tabs isn't optimal

[ajm19826]

Yes, you could possibly make a pull request for this.

[AndreasArvidsson]

Pull request created
#41567