Footer - Laravel Blade

Use the footer component to display navigation links, copyright information, social media icons, and sitemaps at the bottom of your pages.

Default Footer

Blade code

<x-fwb.footer>
    <div class="sm:flex sm:items-center sm:justify-between">
        <x-slot:copyright>
            &copy; 2024 <a href="https://flowbite.com/" class="hover:underline">Flowbite&trade;</a>. All Rights Reserved.
        </x-slot:copyright>
        <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
            <li><a href="#" class="hover:underline me-4 md:me-6">About</a></li>
            <li><a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a></li>
            <li><a href="#" class="hover:underline me-4 md:me-6">Licensing</a></li>
            <li><a href="#" class="hover:underline">Contact</a></li>
        </ul>
    </div>
</x-fwb.footer>

Blade code

<x-fwb.footer>
    <x-slot:brand>
        <a href="https://flowbite.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
        </a>
    </x-slot:brand>
    <x-slot:links>
        <li><a href="#" class="hover:underline me-4 md:me-6">About</a></li>
        <li><a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline me-4 md:me-6">Licensing</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
    </x-slot:links>
    <x-slot:copyright>
        &copy; 2024 <a href="https://flowbite.com/" class="hover:underline">Flowbite&trade;</a>. All Rights Reserved.
    </x-slot:copyright>
</x-fwb.footer>

Social Media Icons

Blade code

<x-fwb.footer>
    <x-slot:brand>
        <a href="https://flowbite.com/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
        </a>
    </x-slot:brand>
    <x-slot:links>
        <li><a href="#" class="hover:underline me-4 md:me-6">About</a></li>
        <li><a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline me-4 md:me-6">Licensing</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
    </x-slot:links>
    <div class="sm:flex sm:items-center sm:justify-between">
        <x-slot:copyright>
            &copy; 2024 <a href="https://flowbite.com/" class="hover:underline">Flowbite&trade;</a>. All Rights Reserved.
        </x-slot:copyright>
        <x-slot:social>
            <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                <x-fwb-s-facebook class="w-4 h-4" />
                <span class="sr-only">Facebook</span>
            </a>
            <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                <x-fwb-s-twitter class="w-4 h-4" />
                <span class="sr-only">Twitter</span>
            </a>
            <a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white">
                <x-fwb-s-github class="w-4 h-4" />
                <span class="sr-only">GitHub</span>
            </a>
        </x-slot:social>
    </div>
</x-fwb.footer>

Sitemap Links

Blade code

<x-fwb.footer variant="sitemap">
    <x-slot:sections>
        <div>
            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                <li class="mb-4"><a href="#" class="hover:underline">About</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Careers</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Brand Center</a></li>
                <li><a href="#" class="hover:underline">Blog</a></li>
            </ul>
        </div>
        <div>
            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Help Center</h2>
            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                <li class="mb-4"><a href="#" class="hover:underline">Discord Server</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Twitter</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Facebook</a></li>
                <li><a href="#" class="hover:underline">Contact Us</a></li>
            </ul>
        </div>
        <div>
            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                <li class="mb-4"><a href="#" class="hover:underline">Privacy Policy</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Licensing</a></li>
                <li><a href="#" class="hover:underline">Terms &amp; Conditions</a></li>
            </ul>
        </div>
        <div>
            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Download</h2>
            <ul class="text-gray-500 dark:text-gray-400 font-medium">
                <li class="mb-4"><a href="#" class="hover:underline">iOS</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Android</a></li>
                <li class="mb-4"><a href="#" class="hover:underline">Windows</a></li>
                <li><a href="#" class="hover:underline">MacOS</a></li>
            </ul>
        </div>
    </x-slot:sections>
    <x-slot:copyright>
        &copy; 2024 <a href="https://flowbite.com/" class="hover:underline">Flowbite&trade;</a>. All Rights Reserved.
    </x-slot:copyright>
</x-fwb.footer>

Sticky Footer

Blade code

<x-fwb.footer :sticky="true">
    <div class="sm:flex sm:items-center sm:justify-between">
        <x-slot:copyright>
            &copy; 2024 <a href="https://flowbite.com/" class="hover:underline">Flowbite&trade;</a>. All Rights Reserved.
        </x-slot:copyright>
        <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
            <li><a href="#" class="hover:underline me-4 md:me-6">About</a></li>
            <li><a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a></li>
            <li><a href="#" class="hover:underline me-4 md:me-6">Licensing</a></li>
            <li><a href="#" class="hover:underline">Contact</a></li>
        </ul>
    </div>
</x-fwb.footer>

Component Properties

Footer x-fwb.footer

Prop Type Default Description
variant string default Footer style variant. Options: default, sitemap.
sticky bool false Fix the footer to the bottom of the viewport.
brand slot - Named slot for the brand logo and name section.
links slot - Named slot for navigation link items displayed next to the brand.
sections slot - Named slot for sitemap grid sections (used with sitemap variant).
copyright slot - Named slot for copyright text.
social slot - Named slot for social media icon links.