# Sidebar

## 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.

```html
<aside class="ds-sidebar__viewport">
  <!-- All Sidebar content nested here -->
</aside>
```

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FVnyvu7LbhCZ8yscohipr%2FSidebar%20with%20custom%20CSS.png?alt=media&#x26;token=76792279-8457-43bb-8ad1-6f2475ff27dd" alt="" width="371"><figcaption></figcaption></figure>

## Class hierarchy&#x20;

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`

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2Fol1jKOBi7VtNFJPW7ReA%2FSidebar%20outer%20classes.png?alt=media&#x26;token=ae04b33d-6862-4564-a518-e9122e2ce68c" alt="" width="425"><figcaption></figcaption></figure>

### Header

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

1. `ds-logo`
   1. `ds-logo__image`
2. `ds-sidebar__toggle`

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FjZGoiAkEZC1Ow5TWSObD%2FSidar%20header%20classes.png?alt=media&#x26;token=6be5f77b-dbf8-42d2-b4a8-6d6c05059373" alt="" width="470"><figcaption></figcaption></figure>

### 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`

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2FJKPuanHKrYMO3K7OxB6S%2FSidebar%20body%20classes.png?alt=media&#x26;token=bbf89761-a3ed-4a6b-8968-637b62165382" alt="" width="417"><figcaption></figcaption></figure>

### Footer

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

1. `ds-sidebar__footer`
   1. `ds-sidebar__footer-item`&#x20;

<figure><img src="https://884329393-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhzNRg0B4ECiNXc093G%2Fuploads%2F6IuZDhFKxNDhC3F78Clu%2FSidebar%20footer.png?alt=media&#x26;token=0b5e8d77-1827-462c-82db-55fd5f48e2b0" alt="" width="560"><figcaption></figcaption></figure>

## Rendered DOM

This is the Sidebar raw HTML DOM as loaded in the application, with all classes seen in this section:

<details>

<summary>Sidebar component HTML DOM</summary>

```html
<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>
```

</details>