Guides
Navigation
Feedback
Overlays
Layout
Data Display
Forms
.md

Footer

footer-05

Large sitemap footer: headline with two buttons, six link columns, and a logo row with an overlapping avatar stack.

Open full screen →

Installation

php artisan ui:add-block footer-05

A single command installs the block's Blade file and every component it depends on. Render it in your own layout as <x-ui.blocks.footer-05 />.

Components it includes

avatar button

Usage

Every piece of content is a prop, so you can drive this footer from a CMS. A link is either a plain string or ['label' => ..., 'href' => ...]. An action is ['label' =>, 'href' =>, 'variant' =>]; give it an href and it renders as a link, leave href out and it stays a plain button. An avatar is ['src' =>, 'alt' =>]; a null src draws an empty placeholder. A social is ['label' =>, 'href' =>, 'icon' =>] where icon is a key of the $icons map below ('facebook', 'instagram', 'x', 'linkedin', 'youtube'), or pass 'svg' => '<svg ...>' to use a mark of your own. The six columns are a plain list, so pass four and you get four.

<x-ui.blocks.footer-05
    brand="Acme"
    heading="Ship your next release without the release-day panic"
    text="Acme deploys, monitors and rolls back for teams that would rather build."
    :actions="[
        ['label' => 'Start free', 'href' => '/register', 'variant' => 'default'],
        ['label' => 'Book a demo', 'href' => '/demo', 'variant' => 'outline'],
    ]"
    :columns="[
        ['title' => 'Product', 'links' => [
            ['label' => 'Pricing', 'href' => '/pricing'],
            ['label' => 'Changelog', 'href' => '/changelog'],
        ]],
        ['title' => 'Developers', 'links' => ['Docs', 'API', 'Status']],
        ['title' => 'Company', 'links' => ['About', 'Careers']],
    ]"
    :avatars="$team->map(fn ($member) => ['src' => $member->avatar_url, 'alt' => $member->name])->all()"
    :socials="[
        ['label' => 'X', 'href' => 'https://x.com/acme', 'icon' => 'x'],
        ['label' => 'GitHub', 'href' => 'https://github.com/acme', 'icon' => 'linkedin'],
    ]"
    copyright="© 2026 Acme Pty Ltd"
/>

Props

Every prop with its default. Pass any of them as attributes, using : to bind a PHP value. 

@props([
    'brand' => 'LaralCN',
    'brandHref' => '#',
    'heading' => 'Medium length footer heading goes here',
    'text' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.',
    'actions' => [
        ['label' => 'Button', 'href' => null, 'variant' => 'default'],
        ['label' => 'Button', 'href' => null, 'variant' => 'outline'],
    ],
    'columns' => [
        ['title' => 'Column One', 'links' => ['Link One', 'Link Two', 'Link Three', 'Link Four', 'Link Five']],
        ['title' => 'Column Two', 'links' => ['Link Six', 'Link Seven', 'Link Eight', 'Link Nine', 'Link Ten']],
        [
            'title' => 'Column Three',
            'links' => ['Link Eleven', 'Link Twelve', 'Link Thirteen', 'Link Fourteen', 'Link Fifteen'],
        ],
        [
            'title' => 'Column Four',
            'links' => ['Link Sixteen', 'Link Seventeen', 'Link Eighteen', 'Link Nineteen', 'Link Twenty'],
        ],
        [
            'title' => 'Column Five',
            'links' => [
                'Link Twenty One',
                'Link Twenty Two',
                'Link Twenty Three',
                'Link Twenty Four',
                'Link Twenty Five',
            ],
        ],
        [
            'title' => 'Column Six',
            'links' => [
                'Link Twenty Six',
                'Link Twenty Seven',
                'Link Twenty Eight',
                'Link Twenty Nine',
                'Link Thirty',
            ],
        ],
    ],
    'avatars' => [
        ['src' => null, 'alt' => ''],
        ['src' => null, 'alt' => ''],
        ['src' => null, 'alt' => ''],
        ['src' => null, 'alt' => ''],
        ['src' => null, 'alt' => ''],
    ],
    'socials' => [
        ['label' => 'Facebook', 'icon' => 'facebook'],
        ['label' => 'Instagram', 'icon' => 'instagram'],
        ['label' => 'X', 'icon' => 'x'],
        ['label' => 'LinkedIn', 'icon' => 'linkedin'],
        ['label' => 'Youtube', 'icon' => 'youtube'],
    ],
    'copyright' => null,
])