Become a Sponsor

Getting started

keyboard_arrow_down

Quick start

Why Vuetify?

Frequently asked questions

Meet the team

Contributing

Roadmap

Consulting and support

Framework options

keyboard_arrow_down

A-la-carte

Grid

Grid lists

Icons

Internationalization

arrow_drop_down

Application layout

Default Markup

Aspect ratios

Breakpoints

Pre-made layouts

arrow_drop_down

Styles & themes

Colors

Content

Theme

Typography

arrow_drop_down

Helper classes

Display

Elevation

Spacing

Text alignment

arrow_drop_down

Motion & transitions

Programmatic Scrolling

Transitions

UI Components

keyboard_arrow_down

API explorer

Browse components

Alerts

Avatars

Badges

Bottom navigation

Bottom sheets

Breadcrumbs

Buttons

Buttons: Floating action buttons

Calendars

Cards

Carousels

Chips

Data iterator

Data tables

Dialogs

Dividers

Expansion panels

Footer

arrow_drop_down

Groups

Button groups

Item groups

Windows

Hover

Icons

Images

arrow_drop_down

Inputs & controls

Autocompletes

Combobox

Forms

Inputs

Overflow buttons

Selects

Selection controls

Sliders

Textareas

Text fields

Jumbotrons

deprecated

Lists

Menus

Navigation drawers

Paginations

Parallax

arrow_drop_down

Pickers

Date pickers

Time pickers

Progress

Ratings

Sheets

Snackbars

Sparklines

Steppers

Subheaders

Tabs

Timelines

Toolbars

Tooltips

Treeview

Directives

keyboard_arrow_down

Resizing

Ripples

Scrolling

Touch support

Premium themes

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
arrow_drop_down
v-footer
search
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

Company Footer

The footer component as a basic company footer with links.

Indigo Footer

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

Teal Footer

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

Up Next

grid
framework
buttons
components
toolbars
components
Edit this page | language on Github
 — Contribution Guide
Vuetify
Documentation
Store
Get help
Discord community
Report a bug
Github issue board
Stack overflow
Quick links
Theme generator
vuetify-loader
Cognito module
Eslint config
Reddit
Medium publication
Awesome Vuetify
Codepen template
Latest releases

Social
Github
Twitter
Facebook
Documentation
v2.0.0
Latest release
v1.0.x
archived docs

Releases
Current release
v1.5.24
English
Español
Português
Русский
简体中文
한국어
日本語
language
Translate!