React Sidebar Component
Sidebar
Other Frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Supported content#
Sidebar come with built-in support for a handful of sub-components. Choose from the following as needed:
<CSidebarHeader>for optional header.<CSidebarBrand>for your company, product, or project name.<CSidebarNav>for a full-height and lightweight navigation (including support for dropdowns).<CSidebarFooter>for optional footer.<CSidebarToggler>for use with our minimizer plugin.
Examples#
Sidebar component#
Below is an sidebar example that is shown by default on desktop devices.
Narrow sidebar#
Add the narrow property to make the sidebar narrow.
Unfoldable sidebar#
Add the unfoldable property to make the sidebar narrow with unfoldable on hover.
Dark sidebar#
Change the appearance of sidebars with the colorScheme="dark".
Placement#
By default placement for sidebar components is on the left of the viewport, but you can add one of the modifier classes below.
placement="start"places sidebar on the left of the viewport (shown above)placement="end"places sidebar on the right of the viewport
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.