<div class="kss-navi-button  kss-c-box  ">
  <button class="kss-navi-button__button  kss-c-button  is-kss-current" type="button" data-kss-example-value="light">
    <span class="kss-c-button__label  kss-c-text">
      Switch canvas to light mode
    </span>
  </button>
  <button class="kss-navi-button__button  kss-c-button" type="button" data-kss-example-value="dark">
    <span class="kss-c-button__label  kss-c-text">
      Switch canvas to dark mode
    </span>
  </button>
  <button class="kss-navi-button__button  kss-c-button" type="button" data-kss-example-value="light-transparent">
    <span class="kss-c-button__label  kss-c-text">
      Switch canvas to light mode (transparent)
    </span>
  </button>
  <button class="kss-navi-button__button  kss-c-button" type="button" data-kss-example-value="dark-transparent">
    <span class="kss-c-button__label  kss-c-text">
      Switch canvas to dark mode (transparent)
    </span>
  </button>
  <button class="kss-navi-button__button  kss-c-button" type="button" data-kss-example-value="expand">
    <span class="kss-c-icon  kss-c-icon--type-expand">
      Expand canvas
    </span>
  </button>
</div>

<div class="kss-navi-icon  kss-c-box  ">
  <button class="kss-navi-icon__button  kss-c-button  is-kss-current" type="button" data-kss-theme-value="system">
    <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M41.008,19.488a9.5,9.5,0,1,1,9.5-9.5A9.5,9.5,0,0,1,41.008,19.488ZM41,2.875c0,1.741-.008,4.442-0.008,7.147s0,5.376.006,7.1A7.124,7.124,0,0,0,41,2.875Z" transform="translate(-31)"/></svg>
  </button>
  <button class="kss-navi-icon__button  kss-c-button" type="button" data-kss-theme-value="light">
    <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M19,10.993H17a1,1,0,1,1,0-2h2A1,1,0,1,1,19,10.993ZM15.652,5.752a1,1,0,0,1-1.414-1.414l1.414-1.414a1,1,0,1,1,1.414,1.414ZM10,14.994a5,5,0,1,1,5-5A5,5,0,0,1,10,14.994Zm0-8a3,3,0,1,0,3,3A3,3,0,0,0,10,7ZM9.993,4a1,1,0,0,1-1-1V1a1,1,0,1,1,2,0V3A1,1,0,0,1,9.993,4ZM4.348,5.753L2.934,4.339A1,1,0,0,1,4.348,2.924L5.763,4.339A1,1,0,1,1,4.348,5.753ZM4,9.993a1,1,0,0,1-1,1H1a1,1,0,1,1,0-2H3A1,1,0,0,1,4,9.993Zm0.338,4.244a1,1,0,1,1,1.414,1.414L4.339,17.066a1,1,0,1,1-1.414-1.414ZM9.993,16a1,1,0,0,1,1,1v2a1,1,0,1,1-2,0V17A1,1,0,0,1,9.993,16Zm5.669-1.761,1.414,1.414a1,1,0,1,1-1.414,1.414l-1.414-1.414A1,1,0,0,1,15.662,14.238Z" /></svg>
  </button>
  <button class="kss-navi-icon__button  kss-c-button" type="button" data-kss-theme-value="dark">
    <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M80.522,14.1A9.486,9.486,0,1,1,70.506.617l0.005,0.009A0.453,0.453,0,0,1,70.6.608a0.474,0.474,0,0,1,.474.474,0.466,0.466,0,0,1-.178.362A7.51,7.51,0,0,0,79.92,13.414l0,0a0.464,0.464,0,0,1,.216-0.058,0.474,0.474,0,0,1,.474.474A0.462,0.462,0,0,1,80.522,14.1Z" transform="translate(-62)"/></svg>
  </button>
</div>

<nav class="kss-navi-tree  kss-c-box  ">
  <ul class="kss-navi-tree__list  kss-c-list">
    <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
      <span class="kss-navi-tree__list__item__reference  kss-c-text">1</span>
      <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
        component-name
      </a>
    </li>
    <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
      <span class="kss-navi-tree__list__item__reference  kss-c-text">2</span>
      <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
        component-name
      </a>
      <span class="kss-navi-tree__list__item__deprecated  kss-c-text">
        DEPRECATED!
      </span>
    </li>
    <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
      <span class="kss-navi-tree__list__item__reference  kss-c-text  is-kss-current">3</span>
      <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
        component-name
      </a>
      <!-- nest -->
      <nav class="kss-navi-tree  kss-c-box  ">
        <ul class="kss-navi-tree__list  kss-c-list">
          <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
            <span class="kss-navi-tree__list__item__reference  kss-c-text">3.1</span>
            <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
              component-child-name
            </a>
          </li>
          <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
            <span class="kss-navi-tree__list__item__reference  kss-c-text">3.2</span>
            <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
              component-child-name
            </a>
            <span class="kss-navi-tree__list__item__experimental  kss-c-text">
              EXPERIMENTAL!
            </span>
          </li>
          <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
            <span class="kss-navi-tree__list__item__reference  kss-c-text">3.3</span>
            <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
              component-child-name
            </a>
          </li>
        </ul>
      </nav>
      <!-- nest -->
    </li>
    <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
      <span class="kss-navi-tree__list__item__reference  kss-c-text">4</span>
      <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
        component-name
      </a>
    </li>
  </ul>
</nav>