Tabs inside a Modal opened from a Navbar breaks style

Author: borzakaCreated May 6, 2024Updated Nov 6, 2025
Labelsbug

Prerequisites

Describe the bug

Opening a Modal (which contains a Tabs component) with a Nav item from a Navbar, the style breaks of the Tabs component, because it gets the navbar-nav class instead of nav.

Expected behavior

Tabs inside Modals opened from Navbar should look right as opened/displayed from anywhere else.

To Reproduce

  1. Insert a Navbar component
  2. Add a Nav item
  3. onClick on Nav item opens the Modal (which is inside the Navbar)
  4. inside the Modal render a Tabs component
  5. the UL item will receive a navbar-nav class, instead a nav class, which breaks style

Reproducible Example

https://codesandbox.io/p/sandbox/solitary-sound-nl27rm

Screenshots

These are the same components. The Modal is opened from the Navbar.

image

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.10.2

What version of Bootstrap are you using?

5.3.3

Additional context

Source: react-bootstrap/react-bootstrap