> ## Documentation Index
> Fetch the complete documentation index at: https://docs.softr.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Header

> The main features of the Header block.

The header area of the site is usually used to display the navigation bar, logo, signin/signup , and can include other functionality depending on the nature of the site. Softr has several header layouts with different types of links and buttons that can be customized according to your requirements.

# Common Header Features

## Logo

All the Header block layouts have a **Logo** field that can be removed or changed by clicking on it. You can upload an image or choose one from the library.

<Frame caption="The “Logo” field">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image1.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=8bb127491f229e7a7d665a106163c4bf" alt="The “Logo” field" width="834" height="326" data-path="building-blocks/images/header/image1.png" />
</Frame>

## Buttons and links

Apart from the logo, there are **Buttons** and **Links**, which can also have **Sublinks** that appear within a dropdown opened when hovering over or clicking the link. Each layout has certain links and buttons by default, but you can add as many as you wish.

<Frame caption="Links and sublinks">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image2.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=9ec03a6fcdd0daa4f7f467839954ff22" alt="Links and sublinks" width="729" height="232" data-path="building-blocks/images/header/image2.png" />
</Frame>

The links have a text area to enter the link name and an **Add action** button to specify what the link does. The action can be set to **Open Page, Scroll to section**, **Open external url,** or **Sign out**

<Frame caption="Link actions">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image3.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=56277fdd4b360a01d62146eeb0dc508b" alt="Link actions" width="840" height="730" data-path="building-blocks/images/header/image3.png" />
</Frame>

A **Sublink** can be added to the link by clicking the **Add sublink** option.

<Frame>
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image4.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=1917ab170c4f0cab6fceea4980c7eee8" alt="Notion image" width="844" height="474" data-path="building-blocks/images/header/image4.png" />
</Frame>

After adding a **Sublink**, the **Add action** option of the link becomes unavailable, as its only action now is to display the sublinks. Sublinks are configured similar to Links.

**Buttons** have a configuration similar to that of **Links**. The only difference is the visual layout.

## Show User Profile

This option is typically used to show a user profile icon with a dropdown to logged-in users. By default, you have the **Sign Out** and **My Profile** links, but you can add as many additional options as needed as well as remove the default ones.

<Frame caption="Show user profile">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image5.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=cd3157aa2e0195c848aae57e09c77972" alt="Show user profile" width="850" height="776" data-path="building-blocks/images/header/image5.png" />
</Frame>

You can see how this option is applied in [this tutorial](/11ba304436ed4354a8669d4869624b9c) on setting up Memberships.

## Sticky Header

Lastly, there is the **Always show the header on top of the screen** option. When enabled, the header will become sticky and will stay on the screen when scrolling down.

<Frame>
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image6.gif?s=ea79a3f93d5d1e52ce6dfc13d7f58f66" alt="Notion image" width="1348" height="540" data-path="building-blocks/images/header/image6.gif" />
</Frame>

That's it for the overview. You can explore each layout in greater detail in the subsections to this article.

# Header Layouts

## Header with sublinks and button

<Frame caption="Header with sublinks and button">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image7.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=6e3c8ac99665d9060b978f518add4c5e" alt="Header with sublinks and button" width="1195" height="265" data-path="building-blocks/images/header/image7.png" />
</Frame>

This layout has a button and several **Links**, one of which has **Sublinks**. The dropdown with **Sublinks** opens on click.

## Header with links and buttons

<Frame caption="Header with links and buttons">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image8.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=a284795baadc1a9c2a8534061ad8e0d1" alt="Header with links and buttons" width="1197" height="134" data-path="building-blocks/images/header/image8.png" />
</Frame>

This layout has several **Links** and two **Buttons**, which are meant as **Sign In**
and **Sign Up** buttons but can also be customized to serve a different purpose.

## Header with hamburger menu

<Frame caption="Header with hamburger menu">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image9.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=abd599a8e0bc1d7c1296424ae85d7b81" alt="Header with hamburger menu" width="1205" height="101" data-path="building-blocks/images/header/image9.png" />
</Frame>

In this layout, the **Link** items appear under the hamburger menu. Here you can add **Links** only (no **Buttons**), and they will all appear within the hamburger menu, as shown below.

<Frame caption="Menu expanded">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image10.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=d61306539865a0fd3e24071558dcbc06" alt="Menu expanded" width="1190" height="317" data-path="building-blocks/images/header/image10.png" />
</Frame>

## Header with sublinks, icon and description

<Frame caption="Header with sublinks, icons, and description">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image11.gif?s=0fe1a3200dd7e238ff717596eed67dc9" alt="Header with sublinks, icons, and description" width="1320" height="246" data-path="building-blocks/images/header/image11.gif" />
</Frame>

This layout has an option to add an **Icon** and **Description** to **Sublinks**, which appear when hovering over the parent link, as shown above.

In the screenshot below, you can see what the icon and description configuration looks like.

<Frame caption="A sublink with a description and icon">
  <img src="https://mintcdn.com/softr-2b8a27e1/FcBwBs-feRHC_5Vm/building-blocks/images/header/image12.png?fit=max&auto=format&n=FcBwBs-feRHC_5Vm&q=85&s=3500d718d5697f318dcceea233629771" alt="A sublink with a description and icon" width="838" height="892" data-path="building-blocks/images/header/image12.png" />
</Frame>

The **Icon** image can be customized by clicking on it and either uploading a new image or choosing one from the library. The **Description** is a text area, where you can add longer texts with multiple lines to describe the item.
