Skip to content
GitLab
Closed
Issue created by Mark Otto@mdoContributor7 of 7 checklist items completed7/7 checklist items

Tab JS and .active class

There are a ton of issues all surrounding the .active class applied via our tab JS. I'm collecting all of them here to try to de-dupe them and figure out a path forward.

Here's what I have so far (checked indicates closed issue):

  • #18566 (closed), #19374 (closed), #20523 (closed), #20797 (closed): .active tab state isn't removed on tab switch with <nav>-based structure (but does work on <ul> one). #20039 tries to fix this with some new JS, but perhaps not the right direction we want to go (see below).
  • #20451 (closed): Scrollspy adds .active to .nav-link, but the nav docs have it on .nav-item.
  • #20620 (closed): Tabs JS doesn't work with list groups unless you add .nav-item to the parent.
  • #21021 (closed), #21036: Rename .active to .show (previously .open) for dropdowns.

Seems like this is all stemming from the flexibility I was trying to provide by allowing .active to be placed on parent items (e.g., <li>s) or the .nav-link itself. To resolve this, I think we need to only allow .active on the .nav-link (or in the case of list groups, .list-group-item). With dropdowns, we also need to have a separate class that is added to the parent or menu to properly show that.

My proposal is this:

  • Let's allow this to be flexible for any markup by applying the .active class only to the item itself, and not the parent.
  • Nav links, list group items, and dropdown triggers get .active on the <a> or <button> for their active state.
  • Dropdown triggers get .active to indicate their associated menu is shown, and the .dropdown-menu gets .shown to indicate it is visible.

That last part is a deviation from the current behavior, and might require more work. I'd be fine keeping .show or .shown on the parent of the dropdown trigger and menu if that'd be easier.

Thoughts @cvrebert, @bardiharborow, @Johann-S?

Potentially related tabs issues and PRs for context: