Sidebar
Classes for the Sidebar component.
Overview
The Sidebar component in VulcanUI features a hierarchical structure that mirrors the actual HTML DOM. This documentation provides a comprehensive guide to all available BEM classes for the Sidebar styling and customization.
The Sidebar component follows a strict hierarchical structure with the root container ds-sidebar__viewport
containing all sub-elements. Each level serves a specific purpose and can be styled independently.
<aside class="ds-sidebar__viewport">
<!-- All Sidebar content nested here -->
</aside>

Class hierarchy
The hierarchical class structure is as follows. Modifiers are in parenthesis.
* ds-sidebar__viewport (--open --closed)
* └── ds-sidebar__wrapper
* ├── ds-sidebar__header
* │ ├── ds-logo
* │ │ └── ds-logo__image
* │ └── ds-sidebar__toggle (--open --closed)
* ├── ds-sidebar__body
* │ ├── ds-sidebar__item (--active)
* │ └── ds-accordion (--expanded --collapsed) [Only when open]
* │ ├── ds-accordion__toggle (--expanded --collapsed)
* │ ├── ds-accordion__chevron (--expanded --collapsed)
* │ │ └── ds-accordion__chevron-icon
* │ └── ds-accordion__content (--visible)
* │ └── ds-accordion__item (--active)
* │ └── ds-accordion__item-label
* └── ds-sidebar__footer-wrapper
* └── ds-sidebar__footer
* └── ds-sidebar__footer-item
The below images map the classes of the Sidebar by number so, when using them, you know which part to target specifically with your custom CSS stylesheet:
Sidebar classes
Outer
ds-sidebar__viewport
ds-sidebar__wrapper
(same size asds-sidebar__viewport
)ds-sidebar__header
ds-sidebar__body
ds-sidebar__footer-wrapper

Header
The parent class for the sidebar header is ds-sidebar__header
.
ds-logo
ds-logo__image
ds-sidebar__toggle

Body
The parent class for the the sidebar body is ds-sidebar__body
.
ds-sidebar__item
ds-accordion
ds-accordion__toggle
ds-accordion__chevron
ds-accordion__chevron-icon
ds-accordion__content
ds-accordion__item

Footer
The parent class for the toolbar is ds-sidebar__footer-wrapper
.
ds-sidebar__footer
ds-sidebar__footer-item

Rendered DOM
This is the Sidebar raw HTML DOM as loaded in the application, with all classes seen in this section:
Last updated
Was this helpful?