Skip to Content
Nextra 4.0 is released. Read more

Footer

The footer area of the website. You can specify content for your default footer.

OptionTypeDescription
childrenReactNodeContent of the footer.
Default: "MIT ${new Date().getFullYear()} © Nextra."
classNamestringCSS class name

Example

You can add content, such as copyright information by passing it as children of the Footer component:

app/layout.jsx
import { Footer, Layout } from 'nextra-theme-docs'
 
export default function MyLayout({ children, ...props }) {
  return (
    <Layout>
      {children}
      <Footer>
        MIT {new Date().getFullYear()} ©{' '}
        <a href="https://nextra.site" target="_blank">
          Nextra
        </a>
        .
      </Footer>
      {children}
    </Layout>
  )
}

You can toggle visibility of the <Footer> on the specific pages by setting theme.footer property in the _meta.js file:

_meta.js
export default {
  'my-page': {
    theme: {
      footer: false // Hide footer on this page
    }
  }
}
Last updated on