# Customize footer
In this guide we will look at how you can customize the footer in both layout components (VerticalNavLayout
and HorizontalNavLayout
) provided by layouts
plugin.
Both components provide footer
slot that you can use to add custom content to the footer.
# Vertical nav layout
This layout component is used in @/layouts/components/DefaultLayoutWithVerticalNav.vue
file. In there, there's already a footer
slot in use, you can customize it according to your needs.
<template>
<VerticalNavLayout
:nav-items="navItems"
v-bind="layoutAttrs"
>
<!-- 👉 footer -->
<template #footer>
<div class="h-100 d-flex align-center">
<span>My custom content</span>
</div>
</template>
<!-- Other content -->
</VerticalNavLayout>
</template>
Result:

# Horizontal nav layout
This layout component is used in @/layouts/components/DefaultLayoutWithHorizontalNav.vue
file. In there, there's already a footer
slot in use, you can customize it according to your needs.
<template>
<HorizontalNavLayout
:nav-items="navItems"
v-bind="layoutAttrs"
>
<!-- 👉 footer -->
<template #footer>
<div class="h-100 d-flex align-center">
<span>My custom content</span>
</div>
</template>
<!-- Other content -->
</HorizontalNavLayout>
</template>
Result:
