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

# Footer Component

Footer components organize and present site-wide information like links, copyright, and contact details at the bottom of pages. Built with semantic HTML, footers improve navigation and provide important meta information. The Frutjam footer system supports multiple layouts, directions, and styles—ideal for site footers, documentation footers, and bottom navigation.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học           | Kiểu            | Sự miêu tả                             |
| ----------------- | --------------- | -------------------------------------- |
| footer            | Căn cứ          | Page footer container with grid layout |
| footer-title      | Công cụ sửa đổi | Section heading inside the footer      |
| footer-horizontal | Công cụ sửa đổi | Horizontal single-row layout           |
| footer-vertical   | Công cụ sửa đổi | Bố cục xếp chồng theo chiều dọc        |

## Cách sử dụng cơ bản

## Footer Directions

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

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