React Sidebar Component

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.

• <CSidebar />
• <CSidebarBrand />
• <CSidebarFooter />
• <CSidebarHeader />
• <CSidebarNav />
• <CSidebarToggler />