Footer Block

Footer is a site footer built on MUI Stack and rendered as a <footer> by default, with logo, content, and copyright regions on a primary-colored bar.

Installation

npm

npm install @nodeblocks/frontend-footer-block

yarn

yarn add @nodeblocks/frontend-footer-block

pnpm

pnpm add @nodeblocks/frontend-footer-block

bun

bun add @nodeblocks/frontend-footer-block

What You Need

Item	Why it matters
logoSrc	Image URL for Footer.Logo
content	Main footer body (links, text, or custom JSX)
copyright	Copyright or legal line (ReactNode, e.g. <>© 2024 …</>)

Composition modes

Pass logoSrc, content, and copyright on Footer to render the default blocks (Footer.Logo, Footer.Content, Footer.Copyright). Use compound children to replace a block’s markup (children on Footer.Content and Footer.Copyright wins over the matching root prop). Use a function child with blocks and blockOrder to add sections or change order.

Code Examples

Quick Start

Live Editor

function Example() {
  const footerLinks = (
    <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
      <a href="#about" style={{color: 'inherit'}}>
        About Us
      </a>
      <a href="#contact" style={{color: 'inherit'}}>
        Contact Us
      </a>
    </div>
  );

  return (
    <Footer
      logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
      content={footerLinks}
      copyright={<>© 2024 Nodeblocks.</>}
    />
  );
}

Result

Loading...

Links and layout

Customize link groups, copyright copy, and root spacing (sx). Use MUI Stack / Link in content when your app already imports them (see Storybook Default).

Live Editor

function Example() {
  return (
    <Footer
      logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
      content={
        <div style={{display: 'flex', flexWrap: 'wrap', gap: 16}}>
          <a href="#about" style={{color: 'inherit'}}>
            About
          </a>
          <a href="#privacy" style={{color: 'inherit'}}>
            Privacy
          </a>
          <a href="#terms" style={{color: 'inherit'}}>
            Terms
          </a>
        </div>
      }
      copyright={<>© 2025 Example Corp. All rights reserved.</>}
      sx={{py: 4}}
    />
  );
}

Result

Loading...

Contrast on the primary bar

The root footer uses backgroundColor: primary.main and color: primary.contrastText. For MUI Link inside content, set sx={{ color: 'common.white' }} (or inherit) so links stay visible—see Storybook.

Compound Components

Use subcomponents in children; each block uses its children when provided, otherwise the matching root prop from context.

Live Editor

function Example() {
  return (
    <Footer
      logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
      content={null}
      copyright={<>© 2024 Nodeblocks.</>}
    >
      <Footer.Logo
        src="https://docs.nodeblocks.dev/img/icon-small.png"
        sx={{width: {xs: 30, sm: 50}}}
      />
      <Footer.Content>
        <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
          <a href="#services" style={{color: 'inherit'}}>
            Services
          </a>
          <a href="#pricing" style={{color: 'inherit'}}>
            Pricing
          </a>
        </div>
      </Footer.Content>
      <Footer.Copyright>© 2024 Nodeblocks. All rights reserved.</Footer.Copyright>
    </Footer>
  );
}

Result

Loading...

Block Override

Use function children to add blocks or change order.

Live Editor

function Example() {
  return (
    <Footer
      logoSrc="https://docs.nodeblocks.dev/img/icon-small.png"
      content={
        <a href="#about" style={{color: 'inherit'}}>
          About
        </a>
      }
      copyright={<>© 2024 Nodeblocks.</>}
    >
      {({defaultBlocks, defaultBlockOrder}) => ({
        blocks: {
          ...defaultBlocks,
          logo: <Footer.Logo />,
          content: <Footer.Content />,
          social: (
            <div style={{display: 'flex', gap: 12, fontSize: 14}}>
              <a href="#twitter" style={{color: 'inherit'}}>
                Twitter
              </a>
              <a href="#linkedin" style={{color: 'inherit'}}>
                LinkedIn
              </a>
            </div>
          ),
          copyright: <Footer.Copyright />,
        },
        blockOrder: ['logo', 'content', 'social', 'copyright'],
      })}
    </Footer>
  );
}

Result

Loading...

When to use block overrides

Use overrides when you need extra sections (for example social links), a custom blockOrder, or swapped blocks while keeping default footer styling. defaultBlockOrder is logo, content, copyright.

Important Props

Core Props

Prop	Type	Required	Default	Description
logoSrc	string	Yes	-	URL for the footer logo (Footer.Logo uses src or this value)
content	ReactNode	Yes	-	Main footer body (links, text, or custom JSX)
copyright	ReactNode	Yes	-	Copyright or legal notice

Content Props

Set logoSrc, content, and copyright on the root. Subcomponents read them from context unless you pass local props or children (compound mode).

Component	Prop	Type	Required	Default	Description
Logo	src	string	No	Root logoSrc	Logo image URL; uses src when set, otherwise logoSrc
Logo	alt	string	No	Footer logo	Image alt text
Logo	logoSrc	string	No	Root logoSrc	Overrides context URL for this block
Logo	—	BoxProps<'img'>	No	-	Other img props (className, sx, etc.)
Content	children	ReactNode	No	Root content	Content markup (children ?? content)
Content	content	ReactNode	No	Root content	Overrides context for this block
Copyright	children	ReactNode	No	Root copyright	Copyright markup (children ?? copyright)
Copyright	copyright	ReactNode	No	Root copyright	Overrides context for this block

Logo, Content, and Copyright are Footer.Logo, Footer.Content, and Footer.Copyright.

Layout and Composition Props

Prop	Type	Required	Default	Description
children	BlocksOverride | ReactNode	No	undefined	Compound subcomponents or function override returning blocks and blockOrder
className	string	No	undefined	Class name for the root container (nbb-footer is applied by default)
sx	SxProps	No	undefined	MUI system styles for the root container

Footer inherits StackProps (except children and content), including spacing (default { xs: 2, sm: 4 }), direction (default { xs: 'column', sm: 'row' }), and id. Root uses component="footer", backgroundColor: primary.main, color: primary.contrastText, and responsive padding. Render order is logo, content, copyright; defaultBlockOrder is logo, content, copyright.

Default UI Blocks

Block	Built on	Notes
Footer (root)	Stack (component="footer")	Primary bar; direction column (xs) / row (sm+)
Footer.Logo	Box (component="img")	alt default Footer logo; src falls back to logoSrc
Footer.Content	Box	flex: 1, typography: body2
Footer.Copyright	Box	typography: body2

TypeScript

import { Footer } from '@nodeblocks/frontend-footer-block';
import type { ReactNode } from 'react';

type FooterConfig = {
  logoSrc: string;
  content: ReactNode;
  copyright: ReactNode;
};

const config: FooterConfig = {
  logoSrc: 'https://docs.nodeblocks.dev/img/icon-small.png',
  content: (
    <a href="#about" style={{ color: 'inherit' }}>
      About Us
    </a>
  ),
  copyright: <>© 2024 Nodeblocks.</>,
};

<Footer {...config} />;