Sidebar

Sidebar components are dedicated solution for creating the Sidebar. Components are designed to be placed only inside CSidebar component.

# Other template components (header, footer, wrapper)

Other template components are described here

# CSidebar API

Main sidebar component. Some styles are available only with CoreUI Pro styles, as mentioned in props.

# CSidebarNav

Sidebar nav is a wrapper component, which renders children in CScrollbar component. If you need to generate sidebar menu component tree automatically, use CRenderFunction component.

# CSidebarNavItem API

Sidebar nav item is a basic unit of the sidebar. By default it contains CLink component with sidebar nav link or sidebar nav label styling. CLink component props are inherited, with changed default values:

'exact' prop changed to true
'activeClass' prop changed to 'c-active'

+ CLink props

# CSidebarNavDropdown API

Dropdown used for wrapping groups of menu items. Dropdown can have various default behaviors on route change. This mode is injected from CSidebar 'dropdownMode' prop.

# CSidebarNavBrand API

Simple component that inherits CLink component functionalities, when 'to' or 'href' prop with link is passed.

+ CLink props

If you want your logo to change size based on 'minimize' sidebar prop, you can use our utility classes:

<CSidebarBrand to="/">
  <img src="logo" class="c-sidebar-brand-full"/>
  <img src="logo-minimized" class="c-sidebar-brand-minimized"/>
</CSidebarBrand>

Wrapper components with CoreUI sidebar styling.

Components without default slot:

CSidebarMinimizer - used for minimizing sidebar,
CSidebarNavDivider - used for dividing sidebar sections

Styled components with default slot for passing the content:

CSidebarClose - used for replacing default close icon,
CSidebarNavTitle - used for naming sidebar sections,
CSidebarFooter - used for sidebar footer,
CSidebarForm - used for sidebar form (i.e. search filter),
CSidebarHeader - used for sidebar header

Often sidebar items depend on permissions of the user that is using your app. CRenderFunction component allows generating sidebar from a data structure that mimics component tree which can be created on the backend or frontend. This structure can be modified dynamically to generate the sidebar based on the current permissions.

Here (opens new window) is an example of a pattern that can be used, when implementing a dynamic sidebar.

# Sidebar