Tabs inside a Modal opened from a Navbar breaks style
Author: borzakaCreated May 6, 2024Updated Nov 6, 2025
Labelsbug
Prerequisites
- I am using the correct version of React-Bootstrap for my version of Bootstrap
- I have searched for duplicate or closed issues
- I have read the contributing guidelines
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
- Insert a Navbar component
- Add a Nav item
- onClick on Nav item opens the Modal (which is inside the Navbar)
- inside the Modal render a Tabs component
- the UL item will receive a
navbar-navclass, instead anavclass, 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.
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