| data-bs-spy="scroll" |
Enable scrollspy on an element (usually body or scrollable div) |
Monitors scrolling and updates active nav link automatically |
Automatic navigation highlight; easy to implement |
Works only if sections have unique IDs; not useful for non-scrollable pages |
| data-bs-target="#navbar-id" |
Defines which navbar/menu should be updated |
Active class applied to links inside target navbar |
Keeps navigation synced with content |
Requires correct menu structure and IDs |
| data-bs-offset="50" |
Adjusts when the active link should switch based on scroll position |
Offset 50px means link changes 50px before section top |
Precise control of active link |
If not set correctly, active link may change too early/late |
| tabindex="0" |
Makes element focusable, required for scrollspy to work on some containers |
Enables scrollspy on body/div |
Ensures scrollspy works properly |
Extra attribute; not visually useful |
| class="nav / nav-link" |
Bootstrap classes for menu styling |
Shows links in navbar and allows active highlighting |
Built-in Bootstrap styling; active class changes color automatically |
Limited styling if custom design required |
| section id="section1" |
IDs must match navbar href to link scrolling |
Menu link `` highlights when scrolling to this section |
Keeps menu synchronized with content |
Must be unique for each section; otherwise confusion |