---
title: "Footer"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Footer with multi-column layouts, social links, and brand sections. Semantic HTML5, SEO-friendly structure for responsive website footers."
url: https://frutjam.com/tr/components/footer
---

# Footer Component

Alt bilgi bileşenleri, sayfaların alt kısmında bağlantılar, telif hakkı ve iletişim bilgileri gibi site genelindeki bilgileri düzenler ve sunar. Anlamsal HTML ile oluşturulan alt bilgiler, gezinmeyi geliştirir ve önemli meta bilgiler sağlar. Frutjam altbilgi sistemi birden fazla düzeni, yönü ve stili destekler; site altbilgileri, belge altbilgileri ve alt gezinme için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf             | Tip         | Tanım                                            |
| ----------------- | ----------- | ------------------------------------------------ |
| footer            | Temel       | Izgara düzenine sahip sayfa altbilgi kapsayıcısı |
| footer-title      | Değiştirici | Altbilginin içindeki bölüm başlığı               |
| footer-horizontal | Değiştirici | Yatay tek sıralı düzen                           |
| footer-vertical   | Değiştirici | Dikey yığılmış düzen                             |

## Temel Kullanım

## Alt Bilgi Yönergeleri

```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>
```

## Sosyal ile Altbilgi

```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>
```