React Bootstrap Sidebar Component
Sidebar 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 Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.
React Bootstrap Sidebar Component#
The React Bootstrap Sidebar component provides a flexible vertical navigation layout with support for branding, navigation links, toggling, and theming. It’s perfect for admin panels, dashboards, and mobile navigation.
Supported sub-components#
The sidebar includes built-in support for these components:
<CSidebarHeader>– optional top section.<CSidebarBrand>– brand or logo section.<CSidebarNav>– main vertical navigation area.<CSidebarFooter>– optional bottom section.<CSidebarToggler>– toggler for sidebar minimization or expansion.
React Bootstrap Sidebar examples#
Standard sidebar#
By default, the sidebar is shown on desktop viewports and hidden on mobile.
Narrow sidebar#
Use the narrow prop to collapse the sidebar into a compact version, showing only icons.
Unfoldable sidebar#
Add unfoldable to create a narrow sidebar that expands on hover.
Dark mode sidebar#
Apply colorScheme="dark" to match your sidebar to a dark theme.
Sidebar placement#
By default, the React Bootstrap Sidebar appears on the left. Use the placement prop to change this:
placement="start"– left side (default)placement="end"– right side
API reference#
Explore the available props for the React Bootstrap Sidebar component and its subcomponents: