Footer

The Footer component is designed to provide a structured and customizable footer section for your application. It supports multiple columns, optional subfooters, and responsive behavior, including collapsible sections on mobile devices.

Usage

First of all, you need to import the Footer component from the kitchn package.

import { Footer } from "kitchn"

Default

Code Editor

<Footer>
  <FooterGroup title={"Company"}>
    <FooterLink href={"#"}>{"Home"}</FooterLink>
    <FooterLink href={"#"}>{"About"}</FooterLink>
    <FooterLink href={"#"}>{"Careers"}</FooterLink>
    <FooterLink href={"#"}>{"Partners"}</FooterLink>
    <FooterLink href={"#"}>{"Blog"}</FooterLink>
    <FooterLink href={"#"}>{"Next.js Conf"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"Product"}>
    <FooterLink href={"#"}>{"Pricing"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitHub"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitLab"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for Bitbucket"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass Edge Network"}</FooterLink>
    <FooterLink href={"#"}>{"Integrations Marketplace"}</FooterLink>
    <FooterLink href={"#"}>{"Command-Line"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"Education"}>
    <FooterLink href={"#"}>{"Documentation"}</FooterLink>
    <FooterLink href={"#"}>{"Guides"}</FooterLink>
    <FooterLink href={"#"}>{"Support"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"More"}>
    <FooterLink href={"#"}>{"Open Source Software"}</FooterLink>
    <FooterLink href={"#"}>{"Design System"}</FooterLink>
  </FooterGroup>
</Footer>

Multi-group columns

Code Editor

<Footer>
  <FooterGroup title={"Company"}>
    <FooterLink href={"#"}>{"Home"}</FooterLink>
    <FooterLink href={"#"}>{"About"}</FooterLink>
    <FooterLink href={"#"}>{"Careers"}</FooterLink>
    <FooterLink href={"#"}>{"Partners"}</FooterLink>
    <FooterLink href={"#"}>{"Blog"}</FooterLink>
    <FooterLink href={"#"}>{"Next.js Conf"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"Product"}>
    <FooterLink href={"#"}>{"Pricing"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitHub"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitLab"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for Bitbucket"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass Edge Network"}</FooterLink>
    <FooterLink href={"#"}>{"Integrations Marketplace"}</FooterLink>
    <FooterLink href={"#"}>{"Command-Line"}</FooterLink>
  </FooterGroup>

  <FooterColumn>
    <FooterGroup title={"Education"}>
      <FooterLink href={"#"}>{"Documentation"}</FooterLink>
      <FooterLink href={"#"}>{"Guides"}</FooterLink>
      <FooterLink href={"#"}>{"Support"}</FooterLink>
    </FooterGroup>

    <FooterGroup title={"More"}>
      <FooterLink href={"#"}>{"Open Source Software"}</FooterLink>
      <FooterLink href={"#"}>{"Design System"}</FooterLink>
    </FooterGroup>
  </FooterColumn>
</Footer>

Subfooter

Code Editor

<Footer
  subfooter={"Copyright © onRuntime 2023. All rights reserved."}
>
  <FooterGroup title={"Company"}>
    <FooterLink href={"#"}>{"Home"}</FooterLink>
    <FooterLink href={"#"}>{"About"}</FooterLink>
    <FooterLink href={"#"}>{"Careers"}</FooterLink>
    <FooterLink href={"#"}>{"Partners"}</FooterLink>
    <FooterLink href={"#"}>{"Blog"}</FooterLink>
    <FooterLink href={"#"}>{"Next.js Conf"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"Product"}>
    <FooterLink href={"#"}>{"Pricing"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitHub"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for GitLab"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass for Bitbucket"}</FooterLink>
    <FooterLink href={"#"}>{"Tonight Pass Edge Network"}</FooterLink>
    <FooterLink href={"#"}>{"Integrations Marketplace"}</FooterLink>
    <FooterLink href={"#"}>{"Command-Line"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"Education"}>
    <FooterLink href={"#"}>{"Documentation"}</FooterLink>
    <FooterLink href={"#"}>{"Guides"}</FooterLink>
    <FooterLink href={"#"}>{"Support"}</FooterLink>
  </FooterGroup>

  <FooterGroup title={"More"}>
    <FooterLink href={"#"}>{"Open Source Software"}</FooterLink>
    <FooterLink href={"#"}>{"Design System"}</FooterLink>
  </FooterGroup>
</Footer>

Props

Name	Type	Default	Required	Description
`subfooter`	`React.ReactNode`	`undefined`	No	An optional subfooter element displayed below the main footer content.
`children`	`React.ReactNode`	`undefined`	Yes	The main content of the footer, typically composed of `FooterColumn` and `FooterGroup`.

FooterGroup Props

Name	Type	Default	Required	Description
`title`	`string`	`undefined`	Yes	The title of the footer group, which is displayed as a header or a collapse label on mobile devices.

FooterLink Props

Name	Type	Default	Required	Description
`href`	`string`	`undefined`	Yes	The URL that the link should navigate to when clicked.

Last updated on March 5, 2025

Fieldset Grid