---
title: "Footer"
description: "Add a simple or a multi-column site footer with navigation, social links, copyright, band backgrounds and locale-aware logo links."
requested_language: sk
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/sk/next/components/footer
version: unreleased (main)
docs_index: https://docs.systhema.app/sk/next/llms.txt
---
> This page isn't translated yet. Showing English.
Systhema ships two footers that render from data. `FooterSimpleInstance` is one centred column: logo, a row of links, social icons and a copyright line. `FooterAdvancedInstance` has a main band with the logo, text, social links and up to four navigation columns, and a bottom bar with the copyright and legal links. Both render real lists and labelled landmarks, and both are built from exported parts.
```tsx preview iframe bleed height=560 title="FooterAdvancedInstance"
import { FooterAdvancedInstance, Paragraph } from '@systhemaui/next'
const logo = (
)
const instagram =
''
const linkedin =
''
export default function Demo() {
return (
A small studio for brand and web design.}
socialItems={[
{ label: 'Instagram', url: 'https://www.instagram.com/', icon: instagram },
{ label: 'LinkedIn', url: 'https://www.linkedin.com/', icon: linkedin },
]}
navigationGroups={[
{
type: 'navigation',
title: 'Studio',
items: [
{ label: 'Work', url: '#' },
{ label: 'Services', url: '#' },
{ label: 'Journal', url: '#' },
],
},
{
type: 'navigation',
title: 'Company',
items: [
{ label: 'About', url: '#' },
{ label: 'Careers', url: '#' },
{ label: 'Press kit', url: '#', openInNewTab: true },
],
},
{
type: 'content',
title: 'Visit',
content: 12 Harbour Street, Northwind. Monday to Friday.,
},
]}
copyright="© 2026 Northwind Studio"
bottomNavigation={[
{ label: 'Privacy', url: '#' },
{ label: 'Terms', url: '#' },
{ label: 'Cookies', url: '#' },
]}
/>
)
}
```
## Import
```tsx
import { FooterAdvancedInstance, FooterSimpleInstance } from '@systhemaui/next'
```
In a React app without Next.js, import them from `@systhemaui/react`.
## `FooterSimpleInstance`
One centred column: the logo and optional `content`, a row of `navigationItems`, `socialItems` and a `copyright` line. Each part renders only when you pass its prop.
```tsx preview iframe bleed height=380 title="FooterSimpleInstance"
import { FooterSimpleInstance } from '@systhemaui/next'
const logo = (
)
const youtube =
''
const instagram =
''
export default function Demo() {
return (
)
}
```
## `FooterAdvancedInstance`
The main band holds the logo, `content` and `socialItems` on one side and the `navigationGroups` on the other, as columns that go from one to two (at `md`) to four (at `lg`). The bottom bar holds `copyright` and `bottomNavigation`.
A navigation group is one of two kinds:
- `{ type: 'navigation', title?, items }`: a titled list of links (`{ label, url, openInNewTab? }`).
- `{ type: 'content', title?, content }`: a titled block of any content, such as an address or opening hours.
Each group's `title` renders as a real heading (`FooterMainNavigationGroupTitle`), an `` by default. Set `elementProps.mainNavigationGroupTitle.as` to `'h3'` or `'h4'` to fit the page's heading outline.
The root `