Bootstrap: Tabs should work without required ul and li Nav classes

[mmplisskin]

This Works:

<ul class="" role="tablist">
  <li class="nav-item ">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
</ul>

        <div class="tab-content">
            <div class="tab-pane active" id="home" role="tabpanel">H..</div>
            <div class="tab-pane" id="profile" role="tabpanel">P..</div>
          </div>

This Markup does not open tab
Click profile -> Click home -> Click profile and tab panel does not open

<ul class="" role="tablist">
    <li class="">
      <a class=" active" data-toggle="tab" href="#home" role="tab">Home</a>
      <a class="" data-toggle="tab" href="#profile">Profile</a>
    </li>
</ul>

Tab content same as above

I think it would be really great if nav-item and nav-link classes were not required as they are semantic to a nav and Tabs have many other use cases. Interested in thoughts on this.

edit: version 4.0.0.alpha6

[Johann-S]

Hi @mmplisskin,

Can you specify the release of Bootstrap you use ? please

[mmplisskin]

4.0.0.alpha6

[esr360]

Not sure I personally agree - tabs should work on any HTML elements and shouldn't be bound to <ul> and <li> elements specifically. To me it makes sense to provide any style/functionality through classes and ID's, regardless of the HTML tags used.

[mmplisskin]

Sorry if it is confusing but please reread and look at the markup, that is not what I was suggesting.

[MalithHatananchchige]

Same issue, I'm using bootstrap alpha 6 and tabs need li but even if you have something like

                      <li class="nav-item">
                        <a class="btn btn-default btn-cons btn-rounded btn-notification-style m-b-10" href="#" data-target="#simpleAlert" role="tab" data-toggle="tab" data-type="position-simple">Simple Alert</a>
                      </li>

Meaning extra classes in the "A" tag will cause it to stop working. Which is strange because in bootstrap v3 everything worked out just fine.

[Johann-S]

Tabs aren't bound to ul and li markups they are other examples in our docs see : https://getbootstrap.com/docs/4.0/components/navs/

for example :
```html

Active Link Link Disabled

````

The only requirement we have it's the parent should have one of this classes : .nav or .list-group and the links will have an .active class added when they are active that's all

Bootstrap is a CSS/JS Framework so we provide usefull classes and markups 👍

I hope I helped you, if you have a more precisely issue do not hesitate to open one 👍

[mmplisskin]

@Johann-S This is not really what I was getting at, I will try to rephrase:

Is it possible to isolate tab behavior from nav stylings, it would make sense to me that anything could behave as a tab by adding the required role and data attributes?

edit: In bootstrap 3 it was possible I will post code for that soon.

[mattez]

@Johann-S wrote:

The only requirement we have it's the parent should have one of this classes : .nav or .list-group ..

IMHO its not mentioned in documentation. Or it is not clear from documentation. See: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

I expected something different then class nav is used in javascript to identify tabs parts, for e.g. data- atribute. If you want to make javascript depending on class I think it is a good habit to add some prefix to that class to mark that javascript is depending on it and one should not remove it. Something like .js--nav.

[acjbizar]

I agree that the functionality should be bound to the data attributes (as appears to be the case with bs.collapse), and not limited to some arbitrary classes.

Sure, tabs could be considered navigational elements, but .nav and its children only imply a bunch of styling, not semantics. This makes said choice arbitrary and unnecessarily restrictive.