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.
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'
# 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.
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>
# Sidebar simple wrapper components
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
# Dynamically generated sidebar
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 is an example of a pattern that can be used, when implementing a dynamic sidebar.