Footer
Layout Component1import { 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.
Prop | Description |
---|---|
css | Type object css prop will be applied to the Footer's inner content container. |
_css | Type object _css prop will be applied to the root Footer element. |
background | Type string | string[] --color-bg_footer background value that you can set in Maker UI options. |
maxWidth | Type string | number | (string | number)[] 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:
Option | Property |
---|---|
errorBoundary | Type boolean options.errors . Defaultfalse |
maxWidth | Type string | number | (string | number)[] 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'23// This example omits key props like menus, options, etc.45export 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