Footer menu

Overview #

The Footer Menu block is designed to display a navigation menu in a simple list format within the footer section of a website. It provides various settings to customize the alignment, layout, and visibility of the menu, ensuring it can be tailored to fit the design and functionality needs of the site.

Key components and functionality #

Footer menu

The Footer Menu block is used to display a navigation menu in a straightforward list format. This block is essential for organizing links in the footer area, making it easier for users to navigate the site.

• Menu: This setting allows you to select the menu to display. The default menu is footer.

Alignment settings

These settings control the alignment of the menu content within the block, ensuring it fits well with the overall design of the footer.

• Alignment - Desktop: Adjusts the horizontal alignment of the menu on desktop devices.
• Alignment - Mobile: Adjusts the horizontal alignment of the menu on mobile devices.

Layout settings

These settings determine how the menu is displayed within the footer, allowing for customization of its structure.

• Fill available space: When enabled, the menu will expand to fill the available space in the footer.
• Show in new column: Displays the menu in a new column, useful for multi-column layouts.
• Show in new row: Displays the menu in a new row, which can help separate it from other footer content.

Visibility settings

These settings control the visibility of the menu across different devices, allowing for responsive design adjustments.

• Visibility: Options include:
  • Do not hide: The menu is visible on all devices.
  • Hide on desktop: The menu is hidden on desktop devices.
  • Hide on mobile: The menu is hidden on mobile devices.

Available in sections #

• Footer navigation

Usage notes #

• Responsive Design: Ensure that the alignment and visibility settings are configured to provide a seamless experience across all devices.
• Performance: Keep the menu concise to avoid clutter and improve load times.
• Accessibility: Ensure that the menu links are descriptive and easy to navigate for users with disabilities.

Usage examples #

1. Basic Footer Navigation: Use the Footer Menu block to display a simple list of links in the footer. This can include links to important pages like Contact Us, Privacy Policy, and Terms of Service.

2. Responsive Design: Adjust the alignment and visibility settings to ensure the menu looks good on both desktop and mobile devices. For instance, you might choose to hide the menu on mobile if space is limited.

3. Multi-Column Layout: Utilize the layout settings to display the menu in a new column, allowing for a more organized footer with multiple sections.