---
title: "Rodapé"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Rodapé CSS Tailwind com layouts de várias colunas, links sociais e seções de marca. HTML5 semântico, estrutura otimizada para SEO para rodapés de sites responsivos."
url: https://frutjam.com/pt-br/components/footer
---

# Componente de rodapé

Os componentes do rodapé organizam e apresentam informações de todo o site, como links, direitos autorais e detalhes de contato, na parte inferior das páginas. Construídos com HTML semântico, os rodapés melhoram a navegação e fornecem meta informações importantes. O sistema de rodapé Frutjam oferece suporte a vários layouts, direções e estilos – ideal para rodapés de sites, rodapés de documentação e navegação inferior.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

| Aula              | Tipo        | Descrição                                         |
| ----------------- | ----------- | ------------------------------------------------- |
| footer            | Base        | Contêiner de rodapé de página com layout de grade |
| footer-title      | Modificador | Título da seção dentro do rodapé                  |
| footer-horizontal | Modificador | Layout horizontal de linha única                  |
| footer-vertical   | Modificador | Layout empilhado verticalmente                    |

## Uso Básico

## Direções do rodapé

```html
<footer class="footer footer-center p-10 bg-base-200 text-on-base">
  <div class="flex justify-center">
    <a class="link link-hover">Company</a>
    <a class="link link-hover">About</a>
    <a class="link link-hover">Contact</a>
  </div>
  <div>
    <p>Copyright © 2024 - All rights reserved</p>
  </div>
</footer>
```

## Rodapé com redes sociais

```html
<footer class="footer bg-neutral text-on-neutral p-10">
  <div>
    <span class="footer-title">Services</span>
    <a class="link link-hover">Web Design</a>
    <a class="link link-hover">UI/UX</a>
    <a class="link link-hover">Development</a>
  </div>

  <div>
    <span class="footer-title">Company</span>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
  </div>

  <div>
    <span class="footer-title">Social</span>
    <div class="flex gap-3">
      <a class="link">Twitter</a>
      <a class="link">GitHub</a>
      <a class="link">LinkedIn</a>
    </div>
  </div>
</footer>
```