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:

Outer

  1. ds-sidebar__viewport

  2. ds-sidebar__wrapper (same size as ds-sidebar__viewport)

    1. ds-sidebar__header

    2. ds-sidebar__body

    3. ds-sidebar__footer-wrapper

The parent class for the sidebar header is ds-sidebar__header.

  1. ds-logo

    1. ds-logo__image

  2. ds-sidebar__toggle

Body

The parent class for the the sidebar body is ds-sidebar__body.

  1. ds-sidebar__item

  2. ds-accordion

    1. ds-accordion__toggle

    2. ds-accordion__chevron

      1. ds-accordion__chevron-icon

    3. ds-accordion__content

      1. ds-accordion__item

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

  1. ds-sidebar__footer

    1. 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?