---
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/id/components/footer
---

# Footer Component

Komponen footer mengatur dan menyajikan informasi seluruh situs seperti link, hak cipta, dan detail kontak di bagian bawah halaman. Dibangun dengan HTML semantik, footer meningkatkan navigasi dan memberikan informasi meta penting. Sistem footer Frutjam mendukung berbagai tata letak, arah, dan gaya—ideal untuk footer situs, footer dokumentasi, dan navigasi bawah.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas             | Jenis    | Keterangan                                      |
| ----------------- | -------- | ----------------------------------------------- |
| footer            | Basis    | Kontainer footer halaman dengan tata letak grid |
| footer-title      | Pengubah | Bagian menuju ke dalam footer                   |
| footer-horizontal | Pengubah | Tata letak satu baris horizontal                |
| footer-vertical   | Pengubah | Tata letak bertumpuk vertikal                   |

## Penggunaan Dasar

## Arah Catatan Kaki

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

## Footer dengan Sosial

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