Code Samples
Props vs Slots Links
The footer links can be added via props using the Navigation Links format.
<app-footer
:links="myFooterLinks"
/>
Or the links can be added using the default slot. The default slot accepts an unordered list of links.
<app-footer>
<ul>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/terms-and-conditions">Terms & Conditions</a>
</li>
</ul>
</app-footer>
The footer can be fixed to the bottom of the page, so it's always visible.
<app-footer
:is-sticky="true"
/>
Mobile Display
By default the footer is hidden on mobile devices. If the links in the footer are important, they should be added to the Mobile Navigation.
If the footer must be displayed on mobile, set is-hidden-mobile
to false
.
<app-footer
:is-hidden-mobile="false"
/>
Live Examples
Open the iframe below in a new window as the footer is by default hidden on smaller screens
Non-sticky, using the slot
Sticky, using the link prop