@momentum-ui/react-collaboration/scss/components/sidebar/examples/default.html

Cisco Momentum UI Framework for React Collaboration Applications

<div
  class="md-sidebar md-sidebar--global md-sidebar--nested md-sidebar--expanded"
>
  <div class="md-sidebar__body">
    <div class="md-sidebar-nav">
      <div
        class="md-list md-list--vertical md-sidebar-nav__group md-sidebar-nav__group--primary"
        role="list"
      >
        <a
          class="md-list-item"
          id="md-sidebar__nav-item-1-9"
          role="listitem"
          data-md-event-key="md-sidebar__nav-item-1-9"
          href="javscript:void(0)"
        >
          <div class="md-list-item__center">Level 1</div>
        </a>
        <a
          class="md-list-item"
          id="md-sidebar__nav-item-1-11"
          role="listitem"
          data-md-event-key="md-sidebar__nav-item-1-11"
          href="javscript:void(0)"
        >
          <div class="md-list-item__center">Level 1 Closed</div>
          <div class="md-list-item__right">
            <i
              class="md-icon icon icon-arrow-down_12"
              style="font-size: 12px; color: inherit;"
            ></i>
          </div>
        </a>
        <div
          class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--collapsed"
        ></div>
        <a
          class="md-list-item"
          id="md-sidebar__nav-item-1-1"
          role="listitem"
          data-md-event-key="md-sidebar__nav-item-1-1"
          href="javscript:void(0)"
        >
          <div class="md-list-item__center">Level 1 Open</div>
          <div class="md-list-item__right">
            <i
              class="md-icon icon icon-arrow-up_12"
              style="font-size: 12px; color: inherit;"
            ></i>
          </div>
        </a>
        <div
          class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--expanded"
        >
          <a
            class="md-list-item"
            id="md-sidebar__nav-item-1-3-1"
            role="listitem"
            data-md-event-key="md-sidebar__nav-item-1-3-1"
            href="javascript:void(0)"
          >
            <div class="md-list-item__center">Level 2</div>
          </a>
        </div>
        <a
          class="md-list-item active"
          id="md-sidebar__nav-item-1-5"
          role="listitem"
          data-md-event-key="md-sidebar__nav-item-1-5"
          href="javascript:void(0)"
        >
          <div class="md-list-item__center">Level 1 Open</div>
          <div class="md-list-item__right">
            <i
              class="md-icon icon icon-arrow-up_12"
              style="font-size: 12px; color: inherit;"
            ></i>
          </div>
        </a>
        <div
          class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--expanded"
        >
          <div
            aria-current="true"
            class="md-list-item"
            id="md-sidebar__nav-item-1-7-1"
            role="listitem"
            data-md-event-key="md-sidebar__nav-item-1-7-1"
          >
            <div class="md-list-item__center">Level 2 Open</div>
            <div class="md-list-item__right">
              <i
                class="md-icon icon icon-arrow-up_12"
                style="font-size: 12px; color: inherit;"
              ></i>
            </div>
          </div>
          <div
            class="md-sidebar-nav__group md-sidebar-nav__group--tertiary md-sidebar-nav__group--expanded"
          >
            <div
              class="md-list-item"
              id="md-sidebar__nav-item-1-7-3-1"
              role="listitem"
              data-md-event-key="md-sidebar__nav-item-1-7-3-1"
            >
              <div class="md-list-item__center">Level 3</div>
            </div>
            <div
              class="md-list-item active"
              id="md-sidebar__nav-item-1-7-3-3"
              role="listitem"
              data-md-event-key="md-sidebar__nav-item-1-7-3-3"
            >
              <div class="md-list-item__center">Level 3</div>
            </div>
            <div
              class="md-list-item"
              id="md-sidebar__nav-item-1-7-3-5"
              role="listitem"
              data-md-event-key="md-sidebar__nav-item-1-7-3-5"
            >
              <div class="md-list-item__center">Level 3</div>
            </div>
          </div>
          <div
            class="md-list-item"
            id="md-sidebar__nav-item-1-7-4"
            role="listitem"
            data-md-event-key="md-sidebar__nav-item-1-7-4"
          >
            <div class="md-list-item__center">Level 2 Closed</div>
            <div class="md-list-item__right">
              <i
                class="md-icon icon icon-arrow-down_12"
                style="font-size: 12px; color: inherit;"
              ></i>
            </div>
          </div>
          <div
            class="md-sidebar-nav__group md-sidebar-nav__group--tertiary md-sidebar-nav__group--collapsed"
          ></div>
          <div
            class="md-list-item active"
            id="md-sidebar__nav-item-1-7-6"
            role="listitem"
            data-md-event-key="md-sidebar__nav-item-1-7-6"
          >
            <div class="md-list-item__center">Level 2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-sidebar-nav">
      <div class="md-sidebar-nav__header">section header</div>
      <div
        class="md-list md-list--vertical md-sidebar-nav__group md-sidebar-nav__group--primary"
        role="list"
      >
        <a
          class="md-list-item"
          id="md-sidebar__nav-item-2-1"
          role="listitem"
          data-md-event-key="md-sidebar__nav-item-2-1"
          href="javscript:void(0)"
        >
          <div class="md-list-item__center">Level 1</div>
        </a>
      </div>
    </div>
  </div>
</div>