How can i create menu like in the example?

Question

i try to create menu loop with structure like below, but i cant, default function wp_nav_menu doesn't allow to do that, i don't understand hot to do it. I need structure like in example with data-remodal-target count and data-remodaul-id. How can i do it?

            <nav class="main-menu">
              <ul class="row between">
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal00">News</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal00">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal01">Media</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal01">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="main-menu__item">
                  <a class="main-menu__link" href="#" data-remodal-target="modal02">Serv</a>
                  <div class="modal main-menu__modal-wrapper" data-remodal-id="modal02">
                    <button class="button_close" data-remodal-action="close"></button>
                    <div class="modal-wrapper">
                      <div class="modal__content">
                        <ul class="main-menu__sub-menu animated fadeIn">
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page1.html">page 1</a>
                          </li>
                          <li class="main-menu__sub-menu__item">
                            <a class="main-menu__sub-menu__link" href="page2.html">page 2</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </nav>

Answer 1

You have to extend the Walker_Nav_Menu class with your own class to modify WP Nan Menus.

One of the best example is wp_bootstrap_navwalker. You can also extend walker class to built custom navigation structures.