carbon-components/html/interior-left-nav/interior-left-nav.html

Carbon Components is a component library for IBM Cloud

<nav role="navigation" aria-label="Interior Left Navigation" data-interior-left-nav class="bx--interior-left-nav bx--interior-left-nav--collapseable">
  <ul role="menubar" class="left-nav-list" data-interior-left-nav-list aria-label="left nav list" aria-hidden="false">
    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
      <a class="left-nav-list__item-link">
        Example Item 1
      </a>
    </li>
    <li role="menuitem" tabindex="0" class="left-nav-list__item" data-interior-left-nav-item>
      <a class="left-nav-list__item-link">
        Example Item 2
      </a>
    </li>
    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
      data-interior-left-nav-with-children>
      <a class="left-nav-list__item-link">
        Example Item 3
        <div class="left-nav-list__item-icon">
          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
            <path d="M10 0L5 5 0 0z"></path>
          </svg>
        </div>
      </a>
      <ul role="menu" aria-hidden="true" aria-label="nested left nav list" class="left-nav-list left-nav-list--nested" data-interior-left-nav-nested-list>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-1A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1A</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-1B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1B</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-1C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1C</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-1D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 1D</a>
        </li>
      </ul>
    </li>
    <li role="menuitem" tabindex="0" class="left-nav-list__item left-nav-list__item--has-children" data-interior-left-nav-item
      data-interior-left-nav-with-children>
      <a class="left-nav-list__item-link">
        Example Item 4
        <div class="left-nav-list__item-icon">
          <svg class="bx--interior-left-nav__icon" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
            <path d="M10 0L5 5 0 0z"></path>
          </svg>
        </div>
      </a>
      <ul role="menu" aria-hidden="true" class="left-nav-list left-nav-list--nested" aria-label="nested left nav list" data-interior-left-nav-nested-list>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-2A" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2A</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-2B" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2B</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-2C" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2C</a>
        </li>
        <li class="left-nav-list__item" data-interior-left-nav-nested-item role="menuitem" tabindex="-1">
          <a href="#example-item-2D" class="left-nav-list__item-link" data-interior-left-nav-item-link tabindex="-1">Example Item 2D</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="bx--interior-left-nav-collapse" data-interior-left-nav-collapse>
    <a class="bx--interior-left-nav-collapse__link" href="#" aria-label="collapse nav pane">
      <svg class="bx--interior-left-nav-collapse__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd" data-interior-left-nav-arrow>
        <title>Collapse nav pane</title>
        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
      </svg>
    </a>
  </div>
</nav>