Skip to content

Select component dropdown positioning breaks when placed in Navbar #6985

Description

@AmanDevUI

Prerequisites

Describe the bug

Hello 👋
I’m currently building a custom Navbar using React-Bootstrap and have a requirement to include a Select component inside the Navbar.

However, when the Select component is added, its dropdown-menu does not appear in the correct position. Instead, when inspecting the element, the dropdown is rendered at the bottom of the screen rather than aligned with the Select trigger inside the Navbar.

At the moment, the only workaround is to manually override the positioning using custom CSS, which is not an ideal or maintainable solution.

Could you please look into this issue? Any guidance or a fix would be greatly appreciated.
Thank you!

Expected behavior

The dropdown menu should be positioned correctly relative to the Select component when used inside a Navbar, without requiring manual CSS adjustments.

To Reproduce

No response

Reproducible Example

https://codesandbox.io/p/sandbox/empty-surf-566wp4

Screenshots

No response

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.10

What version of Bootstrap are you using?

5.3.8

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions