Footer

Display navigation options at the bottom of your page

Use the Footer component to provide supplementary information and navigation options to users at the bottom of your page. You can also use the Footer component to display legal and informational notices, social media or external links, contact information, or secondary actions.

---
import { Footer } from 'webcoreui/astro'

const columns = [{
    items: [
        { name: 'Home', href: '/' },
        { name: 'Docs', href: '/docs' },
        { name: 'Component', href: '/docs/components' }
    ]
}]
---

<Footer columns={columns} />

<script>
    import { Footer } from 'webcoreui/svelte'

    const columns = [{
        items: [
            { name: 'Home', href: '/' },
            { name: 'Docs', href: '/docs' },
            { name: 'Component', href: '/docs/components' }
        ]
    }]
</script>

<Footer columns={columns} />

import React from 'react'
import { Footer } from 'webcoreui/react'

const columns = [{
    items: [
        { name: 'Home', href: '/' },
        { name: 'Docs', href: '/docs' },
        { name: 'Component', href: '/docs/components' }
    ]
}]

const Component = () => (
    <Footer columns={columns} />
)

export default Component

Logos

Footers can be created with logos, and also with logos only. To add a logo to your footer, specify the logo prop. To add a logo only to your footer, omit the columns prop:

<Footer
    columns={[...]}
    logo={{
        url: 'logo.png',
        alt: 'Logo',
        width: 100,
        height: 20
    }}
/>

<Footer
    logo={{
        url: 'logo.png',
        alt: 'Logo',
        width: 100,
        height: 20
    }}
/>

<Footer
    logo={{
        url: 'logo.png',
        alt: 'Logo',
        width: 100,
        height: 20,
        eager: true
    }}
/>

<Footer logo={{ html: '<svg ... />' }} />

You can specify the url, alt, width, and height properties of your logo prop to customize your logo. Footer logos are lazy-loaded by default. To disable lazy loading, set the eager property to true. If you don’t want to use an external image, but rather insert the logo into the markup as an SVG, then set the logo.html property.

Columns

Footers can have multiple columns, and columns can also have titles. To create new columns, simply specify an additional object with the items property on your columns array. To add titles to your columns, specify the title property:

<Footer columns={[
    {
        title: 'SITEMAP',
        items: [
            { name: 'Home', href: '#' },
            { name: 'Docs', href: '#' },
            { name: 'Component', href: '#' }
        ]
    },
    {
        title: 'THEMES',
        items: [
            { name: 'CSS Config', href: '#' },
            { name: 'Styles', href: '#' },
            { name: 'Utilities', href: '#' }
        ]
    }
]} />

Additional Items

You can display additional elements in your footer by specifying the subText prop, or passing elements as the children to the component:

<Footer
    logo={{ html: logo }}
    columns={[ ... ]}
    subText={`© ${new Date().getFullYear()}. All Rights Reserved.`}
>
    <span>Built using <a href="#">Webcore</a> with ❤️</span>
</Footer>

API

type FooterProps = {
    logo?: {
        url?: string
        alt?: string
        width?: number
        height?: number
        eager?: boolean
        html?: string
    }
    columns?: {
        title?: string
        items: {
            href: string
            name: string
            active?: boolean
            target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
        }[]
    }[]
    subText?: string
    className?: string
    wrapperClassName?: string
    subTextClassName?: string
}