Barra superior e trilhas de navegação
Crie uma barra de navegação superior com um campo de pesquisa, um sino de notificações e uma lista suspensa do avatar do usuário, além de um componente de trilha de navegação abaixo.
Barra superior e trilhas de navegação é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Função da barra superior em um painel
A barra superior (ou barra de navegação superior) fica no topo da área de conteúdo principal, não na barra lateral. Ela fornece ações globais disponíveis em todas as páginas: uma entrada de pesquisa para localizar conteúdo rapidamente, um sino de notificações para alertas e um avatar do usuário que abre um menu suspenso. Manter essas ações em um local consistente reduz a carga cognitiva dos usuários que navegam pelo painel.
Estrutura da barra superior
A barra superior é uma linha flexível com flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6. A altura fixa h-16 mantém um comportamento previsível e corresponde à linha do logotipo da barra lateral, garantindo alinhamento visual. Ela fica dentro do contêiner do conteúdo principal, não dentro da barra lateral, portanto ocupa apenas a largura da área principal.
<header class="flex h-16 flex-shrink-0 items-center justify-between
border-b border-gray-200 bg-white px-6">
<!-- Left: hamburger (mobile) + breadcrumbs -->
<div class="flex items-center gap-4">
<!-- Mobile hamburger -->
<button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
<svg class="h-5 w-5"><!-- menu icon --></svg>
</button>
<!-- Breadcrumbs -->
</div>
<!-- Right: search, notifications, avatar -->
<div class="flex items-center gap-3">
<!-- Right controls -->
</div>
</header>Entrada de pesquisa na barra superior
Uma entrada de pesquisa na barra superior permite que os usuários naveguem rapidamente até páginas ou encontrem registros. Mantenha-a compacta, com uma largura definida como w-64, que se expande ao receber foco usando uma transição do CSS. Inclua um ícone de lupa dentro da entrada usando posicionamento relativo. Adicione rounded-lg bg-gray-100 text-sm focus:bg-white focus:ring-2 focus:ring-blue-500 para obter uma aparência limpa e moderna.
<div class="relative">
<svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
</svg>
<input
type="search"
placeholder="Search..."
class="w-64 rounded-lg bg-gray-100 py-2 pl-9 pr-4 text-sm
transition focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>Sino de notificações
O sino de notificações abre um menu suspenso com alertas recentes. Exiba um emblema com a contagem de itens não lidos sobre o ícone usando posicionamento absoluto: absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white. Envolva o ícone e o emblema em um contêiner relative para que o emblema seja posicionado em relação ao próprio ícone.
<button class="relative rounded-full p-2 text-gray-600 hover:bg-gray-100"
aria-label="Notifications">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159
c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
<!-- Unread badge -->
<span class="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center
rounded-full bg-red-500 text-[10px] font-bold text-white">
3
</span>
</button>Avatar do usuário e acionador do menu suspenso
O avatar do usuário no canto superior direito abre um menu suspenso com opções da conta. Exiba o avatar como uma imagem pequena e arredondada, com um contorno sutil ao passar o cursor: h-8 w-8 rounded-full ring-2 ring-gray-200 hover:ring-blue-400 cursor-pointer transition. Como alternativa, mostre as iniciais em um círculo colorido quando não houver uma foto disponível, usando uma cor de fundo derivada do nome do usuário ou da cor da conta.
<div class="relative">
<!-- Avatar button -->
<button class="flex items-center gap-2 rounded-full"
onclick="toggleUserMenu()">
<img src="/avatar.jpg" alt="Jane Doe"
class="h-8 w-8 rounded-full ring-2 ring-gray-200 transition hover:ring-blue-400">
<svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<!-- Dropdown menu (toggled) -->
<div class="absolute right-0 mt-2 w-48 rounded-xl bg-white py-2 shadow-lg ring-1 ring-black/5">
<!-- Menu items -->
</div>
</div>Visão geral das trilhas de navegação
As trilhas de navegação mostram a localização atual do usuário na hierarquia de páginas do aplicativo. Em um painel, elas geralmente aparecem logo abaixo da barra superior ou no lado esquerdo dela. Uma trilha como Início / Usuários / Editar usuário permite que os usuários subam um nível na hierarquia com um clique. Use um elemento nav com aria-label='Breadcrumb' para garantir acessibilidade.
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-2 text-sm">
<li>
<a href="/dashboard" class="text-gray-500 hover:text-gray-900 transition-colors">
Dashboard
</a>
</li>
<li class="text-gray-300">/</li>
<li>
<a href="/users" class="text-gray-500 hover:text-gray-900 transition-colors">
Users
</a>
</li>
<li class="text-gray-300">/</li>
<li class="font-medium text-gray-900">Edit User</li>
</ol>
</nav>Trilhas de navegação com separadores em forma de chevron
Substitua o separador de barra por um pequeno ícone de chevron para obter uma aparência mais refinada. Use uma pequena seta SVG com h-4 w-4 text-gray-400 entre os itens da trilha de navegação. Envolva cada separador em um li com aria-hidden='true' para que os leitores de tela o ignorem e anunciem apenas os links de navegação e a página atual.
<ol class="flex items-center gap-1 text-sm">
<li>
<a href="/dashboard" class="font-medium text-gray-500 hover:text-gray-900">Dashboard</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</li>
<li>
<a href="/settings" class="font-medium text-gray-500 hover:text-gray-900">Settings</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</li>
<li class="font-semibold text-gray-900" aria-current="page">Profile</li>
</ol>Título da página abaixo da barra superior
Alguns painéis posicionam uma seção de título da página logo abaixo da barra superior, dentro da área de conteúdo principal com rolagem. Essa seção contém o título da página (h1), uma descrição e botões de ação, como Exportar ou Adicionar novo. Use flex items-center justify-between mb-6 para alinhar o título à esquerda e os botões de ação à direita.
<div class="mb-6 flex items-center justify-between">
<!-- Title -->
<div>
<h1 class="text-xl font-bold text-gray-900">Users</h1>
<p class="mt-1 text-sm text-gray-500">Manage your team members and their permissions.</p>
</div>
<!-- Actions -->
<div class="flex items-center gap-3">
<button class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium
text-gray-700 transition hover:bg-gray-50">
Export
</button>
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold
text-white transition hover:bg-blue-700">
Add user
</button>
</div>
</div>Combinação da barra superior com as trilhas de navegação
Um padrão comum posiciona as trilhas de navegação no lado esquerdo da barra superior, com a pesquisa e os controles do usuário à direita. Isso combina o contexto de navegação com as ações globais em uma única faixa horizontal. Em dispositivos móveis, as trilhas de navegação aparecem à direita do botão de menu hambúrguer; no computador, a barra lateral ocupa a extremidade esquerda, deixando a barra superior exclusivamente para os controles da área de conteúdo principal.
<header class="flex h-16 flex-shrink-0 items-center justify-between
border-b border-gray-200 bg-white px-6">
<!-- Left: hamburger + breadcrumbs -->
<div class="flex items-center gap-3">
<button class="lg:hidden"><!-- hamburger --></button>
<nav aria-label="Breadcrumb">
<ol class="hidden items-center gap-2 text-sm sm:flex">
<li><a href="/" class="text-gray-500 hover:text-gray-900">Home</a></li>
<li class="text-gray-300">/</li>
<li class="font-medium text-gray-900">Settings</li>
</ol>
</nav>
</div>
<!-- Right: search + bell + avatar -->
<div class="flex items-center gap-3"></div>
</header>Navegação por abas nas páginas do painel
Algumas páginas de painel têm subseções acessadas por abas abaixo do título da página. Crie abas horizontais como uma linha flexível de botões, com um estado ativo indicado por um sublinhado. A aba ativa usa border-b-2 border-blue-600 text-blue-600 font-semibold, enquanto as abas inativas usam border-b-2 border-transparent text-gray-500 hover:text-gray-700, com uma borda inferior transparente para manter uma altura consistente.
<div class="border-b border-gray-200">
<nav class="flex gap-8" aria-label="Tabs">
<button class="border-b-2 border-blue-600 pb-3 text-sm font-semibold text-blue-600">
General
</button>
<button class="border-b-2 border-transparent pb-3 text-sm font-medium
text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
Security
</button>
<button class="border-b-2 border-transparent pb-3 text-sm font-medium
text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
Notifications
</button>
</nav>
</div>Barra superior em dispositivos móveis
Em dispositivos móveis, a barra superior é bastante simplificada. Oculte a entrada de pesquisa (ou substitua-a por um botão de pesquisa que contenha apenas um ícone) e oculte as trilhas de navegação. Mostre apenas o botão de menu hambúrguer, o título da página e o avatar. Use hidden sm:flex para mostrar a pesquisa e hidden md:flex para mostrar as trilhas de navegação, mantendo a barra superior móvel organizada em larguras reduzidas.
<header class="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4">
<!-- Mobile: hamburger -->
<button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
<svg class="h-5 w-5"><!-- icon --></svg>
</button>
<!-- Mobile: page title (replaces breadcrumbs) -->
<p class="font-semibold text-gray-900 lg:hidden">Dashboard</p>
<!-- Desktop: search (hidden on mobile) -->
<div class="hidden sm:block"><!-- search input --></div>
<!-- Always: avatar -->
<img src="/avatar.jpg" class="h-8 w-8 rounded-full">
</header>Verificação rápida
Teste sua compreensão dos conceitos de Tailwind CSS Mastery desta lição.
Recapitulação da lição
Nesta lição, você aprendeu a: criar uma barra superior com pesquisa, sino de notificações e avatar do usuário; criar uma navegação acessível por trilhas com separadores em forma de chevron e aria-current; e adaptar a barra superior para dispositivos móveis com elementos ocultos em telas pequenas. A seguir, vamos adicionar cartões de métricas e componentes KPI ao painel.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Barra superior e trilhas de navegação” é grátis?
Sim — o texto completo de “Barra superior e trilhas de navegação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Barra superior e trilhas de navegação”?
Crie uma barra de navegação superior com um campo de pesquisa, um sino de notificações e uma lista suspensa do avatar do usuário, além de um componente de trilha de navegação abaixo. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Barra superior e trilhas de navegação”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Estrutura e barra lateral do painel
- Barra superior e trilhas de navegação
- Cartões de estatísticas e widgets de KPI
- Tabela de dados e espaços reservados para gráficos