Footer

Layout Component
1import { Footer } from 'maker-ui'

The Footer component sits at the bottom of your layout tree and renders a semantic <footer> component for content like nav menus, copyright information, subscribe forms, etc.

This component renders an inner container so you can use both the _css and css props for responsive styling.

Props#

In addition to the props below, you can also add id and className props for custom selectors.

PropDescription
css
Type
object
Styles from the css prop will be applied to the Footer's inner content container.
_css
Type
object
Styles from the _css prop will be applied to the root Footer element.
background
Type
string | string[]
Overrides the Topbar's default --color-bg_footer background value that you can set in Maker UI options.
maxWidth
Type
string | number | (string | number)[]
Overrides footer.maxWidth that you can set in Maker UI options.
The override props are designed for conditional use cases or runtime logic. Whenever possible, use Maker UI options instead.

Maker UI Options#

Your options configuration has a footer object with the following properties:

OptionProperty
errorBoundary
Type
boolean
When true, this will wrap the inner contents of the Footer in an Error Boundary that you can customize with options.errors.
Defaultfalse
maxWidth
Type
string | number | (string | number)[]
The max-width of the Topbar's content container. Can be a responsive array.
Default1020

Usage#

Add Footer to the bottom of your layout, right before the closing </Layout> tag:

1import { Layout, Header, Content, Main, Footer } from 'maker-ui'
2
3// This example omits key props like menus, options, etc.
4
5export const MyLayout = ({ children }) => (
6 <Layout>
7 <Header />
8 <Content>
9 <Main>{children}</Main>
10 </Content>
11 <Footer>Your custom footer content</Footer>
12 </Layout>
13)
Contents