Nesse post iremos ver como criar tabs e guias de navegação em nosso site usando Bootstrap e fornecer uma experiência de navegação dinâmica.
Tabs e guias são elementos de navegação que permitem aos usuários alternar entre diferentes seções de conteúdo sem sair da página principal. Eles organizam o conteúdo de forma acessível e intuitiva. Temos diversos exemplos de programas que usam tabs (guias ou abas) atualmente. Nem precisa ser um site; por exemplo, os programas do pacote Office da Microsoft usam tabs. Atualmente, acho que todos os navegadores de internet também usam guias.
“guias“, “tabs” e “abas” são termos que geralmente se referem ao mesmo elemento em um site ou programs, usado para alternar entre diferentes seções de conteúdo.
Veja também: Lista de Ícones Gratuitos do Bootstrap
Usaremos bootstrap por disponibilizar uma criação, produção, de forma muito mais rápida se comparado ao uso puro de CSS. Sim, Bootstrap é uma ferramenta popular de front-end que ajuda a criar sites e aplicativos com um design responsivo e moderno. Ele fornece um conjunto de estilos predefinidos, componentes e utilitários que facilitam a criação de interfaces bonitas e funcionais. Veja: O que é Bootstrap e como adicioná-lo no HTML
Incluindo os links CDNs
Antes de tudo, para usar Bootstrap, devemos baixar as bibliotecas ou então, simplesmente, colocar links de servidores que trarão para nosso pc essas bibliotecas. Esses servidores são chamados de CDNs e vamos usar esse modo.
Entre as tags <head></head> insira as seguintes linhas link e script:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo de Mensagem com Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head>
A Classes .nav, .nav-item e .nav-link
Para criação das guias usamos a classe “.nav” e abaixo dela podemos usar listas HTML (<ul><li>…) com classes .nav-item e nav-link nos links.
Podemos usar também o atributo aria-current=”page” para indicar a página atual, em que página estamos no momento. Isso é útil para pessoas com alguma deficiência, para acessibilidade.
GUIAS SIMPLES USANDO LISTA HTML
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="compras">Compras</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Mercadorias</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Estoque</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Cotações</a>
</li>
</ul>
Podemos usar <ol> no lugar de <ul>.
Veja que usamos active para mostrar em qual aba está ativa no momento.
GUIAS SIMPLES USANDO CLASSES BOOTSTRAP
Nesse exemplo, usaremos o atributo disable para desabilitar o link. Poderíamos tê-lo usado acima também.
Olha como está ficando. A primeira linha da foto foi quando usamos listas e o segundo quando usamos apenas classes bootstrap. Veja que cotações está desabilitado.
Alinhamento das guias
Por padrão, as navs são alinhadas à esquerda, mas você pode facilmente alterá-las para centralizar ou alinhar à direita.
.justify-content-center: para alinhar ao centro.justify-content-end: para alinhar o texto à direita.
Exemplo,
<ul class="nav justify-content-center">
Usamos dentro de uma <ul>, mas poderá usar dentro da classe nav também.
Alinhamento Vertical
Podemos usar .flex-column e .flex-sm-column para colocarmos as guias na vertical, ou seja, permitir que os elementos sejam organizados em colunas.
Exemplo,
<nav class="nav flex-column">
Alterando a aparência para tabs
A classe .nav-tabs é usada para gerar uma interface de abas, permitindo criar regiões de abas com o plugin JavaScript de abas.
Olha como está ficando bonitinho:
Usando .nav-pills
Com as classes .nav-pills podemos ter abas em uma interface mais destacada, por exemplo, a aba ativa fica como se fosse um botão, gritando que ele é o botão clicado no momento.
<nav class="nav nav-pills">
Ou ainda, podemos usar .nav-fill que é usada para preencher proporcionalmente todo o espaço disponível com os itens de navegação, ocupando horizontalmente todo o espaço disponível.
<nav class="nav nav-pills nav-fill">
Podemos usar .nav-justified para termos larguras iguais entre os elementos. Todo o espaço horizontal será ocupado por links de navegação, mas diferentemente do .nav-fill acima, cada item de navegação terá a mesma largura.
<nav class="nav nav-pills nav-justified">
Guias com menus suspensos – dropdowns
O menu suspenso exibe opções quando clicamos ou passamos o mouse sobre ele. Podemos colocar um menu desse tipo dentro de guias usando classes como dropdown e dropdown-toggle.
Pegando o exemplo anterior, iremos colocar um submenu dentro de mercadorias.
<ul class="nav justify-content-center nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="compras">Compras</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Mercadorias</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Bolachas</a></li>
<li><a class="dropdown-item" href="#">Temperos</a></li>
<li><a class="dropdown-item" href="#">Bebidas</a></li>
<li><a class="dropdown-item" href="#">Legumes</a></li>
<li><hr class="dropdown-divider" href="#"></li>
<li><a class="dropdown-item" href="#">Carnes</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Estoque</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Cotações</a>
</li>
</ul>
Veja o resultado:
Para mais informações acesse getbootstrap.com