06.01.2025

Como Reutilizar Barras de Navegação em Páginas HTML

Resposta Rápida

Use JavaScript para tornar sua barra de navegação reutilizável:

<!-- Navigation.html - sua opção de navegação estilosa -->
<nav>
   <ul>
       <li><a href="/">Início</a></li>
       <li><a href="/sobre">Sobre Nós</a></li>
   </ul>
</nav>

// Este script ajudará a conectar a navegação
fetch('navigation.html')
.then(response => response.text())
.then(navegacao => document.getElementById('navbar').innerHTML = navegacao);

<!-- Adicione este código em cada página -->
<div id="navbar"></div>
<script src="script.js"></script>

Esse método permite que você carregue a barra de navegação em cada página usando a função fetch em JavaScript. Essa abordagem facilita a manutenção e segue o princípio DRY (Don't Repeat Yourself).

Usando jQuery para Inserir a Navegação

Se você prefere jQuery, o código a seguir funcionará:

$(function(){
    $("#navbar").load("navigation.html");
});

Não esqueça de incluir a biblioteca jQuery antes de começar:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="navbar"></div>

Graças à simplicidade da sintaxe e ao tratamento eficaz da compatibilidade entre navegadores, jQuery é uma alternativa viável ao fetch.

O PHP Ajuda a Garantir a Reutilização

PHP oferece uma solução simples para inserir HTML usando o comando include:

<?php include 'navigation.php'; ?>

O código da sua barra de navegação será incorporado onde o servidor constrói a estrutura da página. Isso permite que você centralize o gerenciamento do código de navegação, evitando AJAX ou Fetch no lado do cliente.

IMPORTANTE: Certifique-se de que seu arquivo de navegação tenha a extensão .php e que seu servidor suporte PHP.

Destacando a Página Ativa

Destacar o item de menu ativo adiciona um toque especial à barra de navegação:

window.onload = function() {
    const links = document.querySelectorAll('nav ul li a');
    const urlAtual = window.location.href;

    links.forEach(function(link) {
        if(link.href === urlAtual) {
            link.classList.add("ativo");
        }
    });
};

Você pode definir a aparência do link ativo usando CSS:

a.ativo {
    font-weight: bold;
    color: red;
}

Seu link ativo se destacará, melhorando a experiência do usuário ao navegar pelo site.

Visualização

Você pode visualizar a barra de navegação como ferramentas que você usa em vários lugares.

Espaços de trabalho (🏗️🏢🏠): Várias páginas da web
Ferramentas (🧰): Barra de Navegação

🧰 é usado em diferentes lugares: pode ser utilizado em um ou outro site:

<!-- 🧰 - ferramenta universal -->
<nav>
  <ul>
    <li>Início</li>
    <li>Sobre Nós</li>
    <li>Contato</li>
  </ul>
</nav>

Mova o 🧰 de 🏗️ para 🏢, e depois para 🏠. Essas ferramentas podem ser usadas em diferentes páginas da web.

Otimização e Desempenho

Garantir a máxima eficiência do código da barra de navegação é crucial para a manutenção e o desempenho geral. Certifique-se de que seu HTML esteja limpo e seu CSS conciso.

Observe que o método load no jQuery pode apresentar desempenho inferior em comparação ao nativo fetch no JavaScript devido à carga adicional associada à biblioteca jQuery.

Frameworks para Suporte

Frameworks frontend como Angular, React ou Vue.js oferecem suas próprias maneiras de implementar componentes reutilizáveis. Por exemplo, o React usa JSX para renderizar componentes, facilitando seu uso em várias páginas:

import React from 'react';
import BarraDeNavegacao from './components/BarraDeNavegacao';

function App() {
  return (
    <div>
      <BarraDeNavegacao />
      {/* O restante do app */}
    </div>
  );
}

Essa abordagem envolve uma arquitetura baseada em componentes e fornece métodos para gerenciamento de estado, especialmente quando a lógica complexa está presente no menu de navegação.

Recursos Úteis

1. Comandos SSI - Material educativo da W3C sobre como usar componentes compartilhados com Includes do Lado do Servidor.
2. Can I use... Tabelas de Compatibilidade de Navegadores para HTML5, CSS3, etc. - Uma ferramenta para verificar a compatibilidade entre navegadores de seus templates HTML.
3. GitHub Pages - Uma opção para criar sites com componentes reutilizáveis via seu repositório GitHub.
4. Como Incorporar HTML - Um guia da W3Schools sobre como usar fragmentos HTML em várias páginas da web.

Video

Navigation