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

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

Header

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

Footer

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:

Sidebar component HTML DOM

<aside class="ds-sidebar__viewport ds-sidebar__viewport--open">
  <div class="ds-sidebar__wrapper">
    <header class="ds-sidebar__header">
      <div>
        <a href="/app/dashboards">
          <img alt="Logo" src="https://d37r24zvv6zb85.cloudfront.net/production/media/ent_navbar_logos/68a00c069807fa008cab1a53_8c505a3153cb4103bea62f00e1dd049e.png">
        </a>
      </div>
      <button class="ds-sidebar__toggle ds-sidebar__toggle--open">
        <i class="fa fa-chevron-left" role="icon"></i>
      </button>
    </header>
    <div class="ds-sidebar__body">
      <div>
        <div>
          <div>
            <div>
              <a class="ds-sidebar__item" href="/app/dashboards/">
                <span>
                  <i class="fas fa-home" role="icon"></i>
                </span>
                <span>Home</span>
              </a>
              <details open="">
                <summary aria-expanded="false" type="button" aria-haspopup="true" role="button">
                  <span>
                    <i class="fa fa-microchip" role="icon"></i>
                  </span>
                  <span>Devices</span>
                  <div>
                    <i class="fa fa-chevron-down" role="icon"></i>
                  </div>
                </summary>
              </details>
              <details open="">
                <summary aria-expanded="false" type="button" aria-haspopup="true" role="button">
                  <span>
                  <i class="fa fa-objects-column" role="icon"></i>
                  </span>
                  <span>Data</span>
                  <div>
                    <i class="fa fa-chevron-down" role="icon"></i>
                  </div>
                </summary>
              </details>
              <details open="">
                <summary aria-expanded="false" type="button" aria-haspopup="true" role="button">
                  <span>
                  <i class="fa fa-user" role="icon"></i>
                  </span>
                  <span>Users</span>
                  <div>
                    <i class="fa fa-chevron-down" role="icon"></i>
                  </div>
                </summary>
              </details>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="ds-sidebar__footer-wrapper">
      <ul class="ds-sidebar__footer">
        <li class="ds-sidebar__footer-item">
          <div>
            <i class="fa fa-bell" role="icon"></i>
          </div>
        </li>
        <li class="ds-sidebar__footer-item">
          <div>
            <div aria-haspopup="true" aria-expanded="false">
              <img alt="Profile image" src="//www.gravatar.com/avatar/e4fc255de696a78fdb70d6e752038a0b?s=100&amp;d=mm">
              <i class="fa fa-caret-down" role="icon"></i>
            </div>
          </div>
        </li>
      </ul>
    </footer>
  </div>
</aside>