Vertical Tabs in Admin Docs don’t behave correctly with Bootstrap 5 (data-toggle="pill"/data-bs-toggle="pill")

[vitorvecchi91]

The template uses Bootstrap 4 attributes (data-toggle="pill") instead of Bootstrap 5 (data-bs-toggle="pill"), so tabs won't switch properly.

No tab link is marked as active on initial render. While the first .tab-pane is correctly set to show active, the corresponding .nav-link is not, causing inconsistent UI state and accessibility mismatch (aria-selected).

Steps to reproduce

Open Admin → Documentation → Models.

Observe the left tab list (apps).

Click different apps (tabs).

Note that tab switching may not work (depending on loaded JS) and/or the initial selected tab styling/ARIA is inconsistent.

Expected behavior

Tabs switch consistently using Bootstrap 5.

First tab is visually active and has aria-selected="true" on initial load.

Non-active tabs render with aria-selected="false".

Proposed fix

Replace data-toggle="pill" with data-bs-toggle="pill".

Add {% if forloop.first %} active{% endif %} to the first .nav-link.

Set aria-selected dynamically based on forloop.first.

Notes

The first .tab-pane already uses show active correctly; this fix aligns the tab control state with the pane state.

[victorCalidae]

Several toggles are broken right now. For example, the top-right user dropdown doesn’t open, so staff users can’t log out.

It looks related to the Bootstrap 4 → 5 migration. This probably needs a proper, global PR to fully handle the migration, rather than a small fix in just one part of Jazzmin IMO.