If you are using a webserver (for example, Apache or IIS), it probably supports Server-side includes . With this you could use, in the main HTML:

<!-- #include file="caminho-do-menu.hml" -->

I do not know if I understand correctly, but if so, and how you tagged the tag jquery , so why not use load :

$("#idElemento").load('xpto.html');

If the content is static, however, it is better to process it on the server, see the @bfavaretto response.

The way that developers are exploring are generators that do it for you. We have some good ones like Jekyll and Middleman . I chose to use Jekyll and it helps me a lot with a language that independent of the programmer, understanding the algorithm is easy. For example, when I have a home page that has 10 products, I make 1 model of how it would look and a for iterate this repetition.

Jekyll example:

<div class="produtos">
    {% for i in (1...9) %}
            <div class="product-align">
                <div class="product" itemscope itemtype="http://schema.org/Product">
                    <img itemprop="image" class="product-image center-block" alt="imagem produto" src="assets/images/produto01.png">
                    <p class="product-title" itemprop="name">Cadeira Tulipa</p>
                    <p class="product-review" itemprop="review">Clássica criação de Pierre Paulin</p>


                    <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <!-- div que separa itens referente ao preço de cada produto -->
                        <p class="product-price">De: R$2,999.00</p>
                        <!-- preço original -->
                        <p class="final-product-price" itemprop="price">Por: R$2,000.</p>
                        <!-- preço com desconto -->
                        <p class="parcel-product-price">Ou até 6x de R$250,00.</p>
                        <!-- preço parcelado -->
                    </div>

                    <a href="produto.html">
                        <button class="btn-see-more" type="button">Veja mais</button>
                    </a>

                </div>
            </div>
    {% endfor %}
</div>

Jekyll allows you to send the HTML together as if it were a sort of "merge" of pages and allows you to send as I sent up. You can send the 2 forms to the customer and he takes care of everything else. This is the most appropriate way.

An elegant solution would be to use some javascript framework like Vue , Angular and etc.

Well, they already have a nice structure to work with in such a way.

Since you need different environments on the same page, in the modern web we usually create the web site with componentization . It can be a nice solution to your problem.

Example

The best example for this is the direct references on the framework website where you can see and read about it

Vue.js Community

Course Vue.js part 1: Building Single Page Applications

Github Vue.js

Official Site Vue.js