Estoy aprendiendo html, css (Bootstrap) y js. Me gustaria saber como puedo hacer para empaquetar mi NAV asi solo tengo que modificarlo una vez para que sea efectivo en el resto de los .html que tenga. Asi no tengo que ir modificando uno por uno con la probabilidad de equivocarme. No se si tenga algo que ver con react. Estoy aprendiendo, les agradezco toda su programador@s !!
Mi nav que quiero empaquetar:
<nav class="navbar navbar-expand-lg bg-primary p-3 " id="menu">
<div class="container-fluid ">
<a class="navbar-brand" href="#">
<img src="media/logo.png" width="170px" alt="Logo Principal">
<!--fw-bold para negrita-->
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Noticias</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tu experiencia</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Otras opciones
</a>
<ul class="dropdown-menu bg-dark">
<li><a class="dropdown-item" href="#">Otras fuentes noticieras</a></li>
<li>
<hr class="dropdown-divider bg-primary">
</li>
<li><a class="dropdown-item" href="#">Contactarnos</a></li>
</ul>
</li>
</ul>
<div class="d-flex">
<button type="button" class="btn btn-dark mx-5" data-toggle="button" aria-pressed="false"
autocomplete="off">
<span class="mx-4 p-2" > Iniciar sesion </span>
</button>
</div>
</div>
</div>
</nav>