Components

Footer

A flexible Footer component for structuring and styling the footer section of your application, with optional content width constraints.

Component

View code

Show playground

Props

Props	Default	Type
`credits`	`'© <year> <your-company>. All rights reserved.'`	`string`
`menuItems`	`[]`	`MenuItem[]`
`socialNetworks`	`[]`	`SocialNetwork[]`
`hasContentMaxWidth`	`false`	`boolean`
`hasSidePadding`	`true`	`boolean`
`isMobileCentered`	`false`	`boolean`

Slots

Name	Description
`default`	Slot for inserting custom content into the Footer component. If used, it will override the default footer layout and props will be ignored (except for hasContentMaxWidth and hasSidePadding).

 <template>
    <Footer>
        <!-- Custom footer content goes here -->
    </Footer>
</template>

Usage

credits

The credits prop allows you to set the text displayed in the footer, typically used for copyright information.

 <template>
  <Footer credits="© 2024 MyCompany. All rights reserved." />
</template>

Type: string
Default: © <year> <your-company>. All rights reserved.

menuItems

The menuItems prop accepts an array of menu items to be displayed in the footer. Each item should have text and to properties.

 <template>
    <Footer :menuItems="exampleFooterMenuItems" />
</template>
<script setup lang="ts">
const exampleFooterMenuItems: MenuItem[] = [
    { text: 'Privacy Policy', to: '/privacy' },
    { text: 'Terms of Service', to: '/terms' },
    { text: 'Contact Us', to: '/contact' },
]
</script>

TypeScript interface

 interface MenuItem {
    text: string
    to: string
}

socialNetworks

The socialNetworks prop allows you to add social media links to the footer. Each social network should have name, link, and icon properties.

 <template>
    <Footer :socialNetworks="exampleSocialNetworks" />
</template>
<script setup lang="ts">
const exampleSocialNetworks: SocialNetwork[] = [
    { name: 'LinkedIn', link: 'https://linkedin.com', icon: 'custom-icon:linkedin' },
    { name: 'Facebook', link: 'https://facebook.com', icon: 'custom-icon:facebook' },
]
</script>

TypeScript interface

 interface SocialNetwork {
    name: string
    link: string
    icon: string
}

hasContentMaxWidth

When set to true, the footer content will be constrained to a maximum width for better alignment with other page content.

 <template>
    <Footer hasContentMaxWidth />
</template>

Type: boolean
Default: false

hasSidePadding

The hasSidePadding prop adds horizontal padding to the footer content, enhancing its appearance on larger screens.

 <template>
    <Footer hasSidePadding />
</template>

Type: boolean
Default: true

isMobileCentered

When isMobileCentered is set to true, the footer content will be centered on mobile devices for improved aesthetics.

 <template>
    <Footer isMobileCentered />
</template>

Type: boolean
Default: false