React Bootstrap Navbar Component
Navbar with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.
Learn how to use the React Bootstrap Navbar component from CoreUI to create responsive navigation headers with branding, dropdowns, collapsible content, and placement options.
Supported subcomponents in React Bootstrap Navbar#
The React Bootstrap Navbar component includes flexible subcomponents for building responsive headers:
<CNavbarBrand>– branding/logo.<CNavbarNav>– navigation links and dropdowns.<CNavbarToggler>– toggles content collapse.<CNavbarText>– inline text.<CCollapse>– groups and hides navbar content.
Basic usage of React Bootstrap Navbar#
Branding#
Use <CNavbarBrand> to display your brand name or logo.
Navigation links and dropdowns#
Navigation inside the React Bootstrap Navbar uses <CNavbarNav>.
Forms in navbars#
Include inputs, buttons, or entire forms in your navbar layout.
Text in navbars#
Use <CNavbarText> for inline text blocks.
React Bootstrap Navbar color schemes#
Use colorScheme="light" or colorScheme="dark" combined with .bg-* utilities for full control of background and text colors.
Containers#
Wrap your navbar in a <CContainer> to center its content or apply spacing.
Navbar placement#
Use the placement prop to fix navbars to the top or bottom or make them sticky.
Responsive behaviors in React Bootstrap Navbar#
Use expand prop to control when the navbar collapses:
External content#
You can toggle external containers using collapse plugins.
Offcanvas navbars#
Turn the responsive navbar into an offcanvas drawer with expand="*" or expand="xxl".
API reference#
Explore the full API for React Bootstrap Navbar components: