Tab Button

          
    <div class="tabs mt-30">
      <ul class="tab__list">
        <li class="tab__item">
          <a class="tab__link is-active" href="#tab-content-1">탭메뉴명</a>
        </li>
        <li class="tab__item">
          <a class="tab__link" href="#tab-content-2">탭메뉴명</a>
        </li>
        <li class="tab__item">
          <a class="tab__link" href="#tab-content-3">탭메뉴명</a>
        </li>
        <li class="tab__item">
          <a class="tab__link" href="#tab-content-4">탭메뉴명</a>
        </li>
        <li class="tab__item is-disabled">
          <a class="tab__link" href="#tab-content-5">탭메뉴명</a>
        </li>
        <li class="tab__item is-disabled">
          <a class="tab__link" href="#tab-content-6">탭메뉴명</a>
        </li>
      </ul>
      <div id="tab-content-1" class="tab__content is-active">
        Tab Content 1
      </div>
      <div id="tab-content-2" class="tab__content">
        Tab Content 2
      </div>
      <div id="tab-content-3" class="tab__content">
        Tab Content 3
      </div>
      <div id="tab-content-4" class="tab__content">
        Tab Content 4
      </div>
      <div id="tab-content-5" class="tab__content">
        Tab Content 5
      </div>
      <div id="tab-content-6" class="tab__content">
        Tab Content 6
      </div>
    </div>
        

Tree View

          
    <div id="tree" class="tui-tree-wrap is-treeTheme"></div>
    <script>
      var util = {
        addEventListener: function(element, eventName, handler) {
          if (element.addEventListener) {
              element.addEventListener(eventName, handler, false);
          } else {
              element.attachEvent('on' + eventName, handler);
          }
        }
      };
      var data = [
        {text: 'Menu open enabled', children: [
          {text: 'Menu open enabled', state: 'opened', children: [
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text: 'Menu open enabled', state: 'opened', children: [
              {text:'Bottom Menu enabled'},
              {text:'Bottom Menu enabled'},
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
          ]},
        ]},
        {text: 'Menu closed', state:'closed', children: [
          {text:'sub-B1'},
          {text:'sub-B2'},
          {text:'sub-B3'}
        ]}
      ];
      var tree = new Tree('#tree', {
          data: data,
          nodeDefaultState: 'opened'
      });
    </script>
        

          
    <div id="tree2" class="tui-tree-wrap is-treeTheme"></div>
    <script>
      const util2 = {
        addEventListener: function(element, eventName, handler) {
          if (element.addEventListener) {
              element.addEventListener(eventName, handler, false);
          } else {
              element.attachEvent('on' + eventName, handler);
          }
        }
      };
      const data2 = [
        {text: 'Menu open enabled', children: [
          {text: 'Menu open enabled', state: 'opened', children: [
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text: 'Menu open enabled', state: 'opened', children: [
              {text:'Bottom Menu enabled'},
              {text:'Bottom Menu enabled'},
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
            {text:'Menu closed', state: 'closed', children:[
              {text:'Bottom Menu enabled'}
            ]},
          ]},
        ]},
        {text: 'Menu closed', state:'closed', children: [
          {text: 'Menu closed', state: 'closed', children: [
            {text:'sub-B1'},
            {text:'sub-B2'},
            {text:'sub-B3'}
          ]}
        ]}
      ];
      const tree2 = new Tree('#tree2', {
          data: data,
          nodeDefaultState: 'opened'
      });
    </script>
        

Reference

• Tui tree