Footer

The v-footer component is used for displaying general information that a user might want to access from any page within your site.

Usage

The footer component is just a basic container.

API

props
slots
v-footer
Name
absolute
Default
false
Type
boolean

Position the element absolutely

Name
app
Default
false
Type
boolean

Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-content to function properly

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
fixed
Default
false
Type
boolean

Position the element fixed

Name
height
Default
32
Type
number | string

Sets the component height

Name
inset
Default
false
Type
boolean

Positions the toolbar offset from an application v-navigation-drawer

Name
light
Default
false
Type
boolean

Applies the light theme variant

Examples

The footer component as a basic company footer with links.

The footer component with Indigo background color and social media icons and button.

The footer component with a Teal color header and columns and rows of links.

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore