Footer

The Footer component provides a standardized, responsive footer for your application. It automatically populates its content—including branding, navigation links, social media icons, and copyright information—by reading your blocklet's metadata. This data-driven approach ensures consistency and simplifies configuration.

The component is designed to be responsive, adapting its layout for different screen sizes. It also includes built-in logic to hide itself when the application is running in an embedded mode, ensuring a clean user interface in integrations.

Basic Usage#

To add a footer to your application, simply import and render the Footer component. It requires no props for basic use, as it automatically sources data from the global window.blocklet object.

import React from 'react';
import { Footer } from '@blocklet/ui-react';

export default function App() {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <main style={{ flex: 1 }}>
        {/* Your application content goes here */}
      </main>
      <Footer />
    </div>
  );
}

Props#

The Footer component can be customized through the following props.

Metadata Configuration#

The content of the Footer is primarily configured through the blocklet's metadata file (blocklet.yml). The component reads specific fields from this file to render its different sections.

Below is an example of a blocklet.yml configuration that populates all sections of the footer.

name: my-app
title: My App
description: A detailed description of my application that appears in the footer.
copyright: 'My Company Inc.'

# Navigation links are structured into groups
navigation:
  # Main footer navigation, supports two levels for grouping
  footer:
    - title: 'Products'
      items:
        - title: 'Product A'
          link: '/products/a'
        - title: 'Product B'
          link: '/products/b'
    - title: 'Resources'
      items:
        - title: 'Documentation'
          link: '/docs'
        - title: 'Blog'
          link: '/blog'

  # Social media links
  social:
    - title: 'twitter' # Icon is inferred from the title (e.g., 'twitter', 'github')

Data Structure#

The navigation object in your metadata defines the links displayed in the footer. It is organized into three distinct sections: footer, social, and bottom.

Layouts#

The Footer component intelligently selects the most appropriate layout based on the provided data. This ensures a clean and functional presentation across different use cases.

• Standard Layout: This layout is automatically activated when footer navigation links or social media links are defined in your metadata. It features a multi-section design that elegantly organizes the brand information, social icons, and navigation columns. On mobile devices, the navigation groups become collapsible accordions for a better user experience.
• Plain Layout: If no footer or social links are provided, the component falls back to a simplified, single-row layout. This is ideal for applications that only require a copyright notice and a few essential links, such as "Terms of Service" or "Privacy Policy".

Theming#

You can customize the footer's appearance by passing a theme object. This object is deeply merged with the existing theme, allowing for targeted overrides.

import { Footer } from '@blocklet/ui-react';

const customTheme = {
  palette: {
    background: {
      default: '#2c3e50', // A darker background for the footer
    },
    text: {
      primary: '#ecf0f1',
      secondary: '#bdc3c7',
    },
    divider: '#34495e',
  },
};

// ... in your component's render method
<Footer theme={customTheme} bordered />;

Behavior in Embedded Mode#

The Footer component is wrapped in a higher-order component (withHideWhenEmbed) that automatically hides it when the application is rendered in an embedded context. This behavior is controlled by a session storage key, EMBED_MODE_KEY. If this key is set to 1, the footer will not be rendered. This is useful for preventing redundant footers when your blocklet is displayed inside another application.

For information on the header component, which is also configured via blocklet metadata, please see the Header documentation.