The v-footer component is used for displaying general information that a user might want to access from any page within your site.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main component to function properly. You can more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element. You can overwrite this functionality by using the absolute prop
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)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Applies position: fixed to the component.
Sets the height for the component.
Positions the toolbar offset from an application v-navigation-drawer
Applies the light theme variant to the component.
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Removes elevation (box-shadow) and adds a thin border.
Remove all padding from the footer
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Applies a large border radius on the top left and bottom right of the card.
Specify a custom tag used on the root element.
Removes the component's border-radius.
Sets the width for the component.
The default Vue slot.
0 !default;0 !default;6px 16px !default;0px !default;map-get($rounded, 'xl') $footer-border-radius !default;0.2s !default;background-color, left, right !default;map-get($transition, 'fast-out-slow-in') !default;Below is a collection of simple to complex examples.
The absolute prop positions footers absolutely at the bottom of their parent container.
The padless prop removes all default padding from the footer component.
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.