Footer
A customizable footer component for any website
The Footer component is a customizable footer that can include a logo, app name, description, social media buttons,
(all pulled from config.js), as well as navigation and legal links.
It uses TextLink components for its links so you can pass any prop to it.
As the Footer is not a component that changes often or at all, I recommend just going into the file and
updating the links (defaultLegalLinks and defaultNavLinks) directly. If you prefer to keep it dynamic, you can still
pass them in as props.
Usage
The component automatically pulls the logo and app name from config.js if they are defined, so you can simply import the component and use it like this:
javascript
1import Footer from '@/components/organisms/Header'; 2 3<Footer 4 showDescription={false} 5 showSocials={false} 6/>
Since Footer uses the TextLink component, you can pass any prop to it. For example:
javascript
1{ 2 title: "Documentation", 3 href: "/docs" 4 props: { underline: true, fade: true } 5}
Props
| Name | Type | Default | Description |
|---|---|---|---|
| showLogo | boolean | true | If true, the logo will be displayed. |
| showAppName | boolean | true | If true, the app name will be displayed. |
| showDescription | boolean | true | If true, the app description will be displayed. |
| showCopyright | boolean | true | If true, the copyright text will be displayed. |
| showMadeWith | boolean | true | If true, the MadeWith text will be displayed. |
| showThemeSwitcher | boolean | true | If true, the ThemeSwitcher will be displayed. |
| showSocials | boolean | true | If true, the social media buttons will be displayed. |
| navLinks | array | [] | Array of navigation links. Each link is an object with title, href, and optional props. |
| legalLinks | array | [] | Array of legal links. Each link is an object with title, href, and optional props. |
| copyrightText | string | "Copyright © 2025 - All Rights Reserved." | Copyright text. |
| background | string | "bg-bg-0 dark:bg-bg-900" | Background color (use tailwind.config). |
| border | boolean | false | If true, a border will be displayed. |
| rounded | boolean | true | If true, the footer will have rounded top corners (can change side). |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes for the <footer> element. |