> For the complete documentation index, see [llms.txt](https://developer.unstack.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.unstack.com/docs/components/header-and-footer.md).

# Header & Footer

## Header

The `<Header>` tag can be used to create a site header with your own custom HTML, CSS, and Javascript. This is a good option if Unstack's built-in site header does not provide the functionality you desire. To create your own header component, simply create a new component and use the `<Header>` tag as the outer wrapper for the component. (This should replace the `<Section>` tag as the outermost wrapper.)

```jsx
<Header dataRef={content.header}>
...
</Header>
```

### Attributes

* **className**: string (optional) - a hard-coded class name to add to the rendered element
* **dataRef**: DataLocator - the data-element storing the Section's configuration

## Footer

The `<Footer>` tag can be used to create a site footer with your own custom HTML, CSS, and Javascript. This is a good option if Unstack's built-in site footer does not provide the functionality you desire. To create your own footer component, simply create a new component and use the `<Footer>` tag as the outer wrapper for the component. (This should replace the `<Section>` tag as the outermost wrapper.)

```jsx
<Footer dataRef={content.footer}>
...
</Footer>
```

### Attributes

* **className**: string (optional) - a hard-coded class name to add to the rendered element
* **dataRef**: DataLocator - the data-element storing the Section's configuration

## Using a custom header or footer

Once you've created a header or footer component you can switch to using the custom header within the page settings drawer of a specific page:

<figure><img src="https://432340635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV9dxncXMEZBpbrUoDlLF%2Fuploads%2F7athUgC1ziMaz7Rl6TtK%2FScreen%20Shot%202023-01-20%20at%201.03.15%20PM.png?alt=media&amp;token=68ee786b-c391-46f2-b43f-2c931d4e9e17" alt=""><figcaption></figcaption></figure>

Or, set global defaults for different page types within settings in **Design** → **Header & Footer:**

<figure><img src="https://432340635-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FV9dxncXMEZBpbrUoDlLF%2Fuploads%2F71hQp0j7xL4CTMSJ42Gl%2FScreen%20Shot%202023-01-20%20at%201.01.49%20PM.png?alt=media&amp;token=5ac6dbe0-91be-4167-ad55-9ab1b7ebbbba" alt=""><figcaption></figcaption></figure>