# Header

<figure><img src="https://3985976695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT3t4pDs63s3Soj1JetJw%2Fuploads%2FelUfecPJHW9pNs2aagz4%2Fheader.png?alt=media&#x26;token=fcddc79a-371c-4c5c-95ff-cbf50c48b75a" alt=""><figcaption></figcaption></figure>

The header section is used on the pages of your marketing (public) website.

It includes your logo and brand, and the navigation menus.

The navigation menu can point to another page or to a section of the current page.

Component: `<Header />`

File: `src/components/Header/Header.tsx`

{% code title="page.tsx" %}

```typescript
import { Header } from "@/components/Header/Header";
```

{% endcode %}

{% hint style="info" %}
To use your own logo, place it here `/public/logo.png`
{% endhint %}

***

{% hint style="info" %}
If you need basic components like buttons, inputs, etc, they are all available with [ChakraUI](https://chakra-ui.com/).
{% endhint %}