# Header Menu

Access your blog **Layout** > and click on the **Edit Icon** > in the **Header Menu** gadget.

### Default Links and Sub Links

Default Link Example: `Features` 

SubLink Level 1 Example: `_Level 1` “Before the Title add 1 underscore” 

SubLink Level 2 Example: `__Level 2` “Before the Title add 2 underscore”

**Example:**

<figure><img src="/files/2jGFE8IDlU5vzQOpavQI" alt="Sublinks" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
INFO: Level 2 Links must be between or below level 1 links.
{% endhint %}

### Menu Icons

This template uses Bootstrap Icons as the main icon source, so you can choose from thousands of awesome icons to use on your menu link.

Icon Code: `<i code="HTML Code"></i>`

#### How to get HTML Code?

{% stepper %}
{% step %}
Go to the [Bootstrap Icons Gallery](https://icons.getbootstrap.com/).

{% endstep %}

{% step %}
Search for the desired icon, then click on the icon to access the info page.

{% endstep %}

{% step %}
Copy the **HTML Code** available in the **Code Point** section as illustrated in the image below.

<img src="/files/QhKROYaBlc1kCmGzWWyI" alt="Bootstrap icon" data-size="original">
{% endstep %}

{% step %}
Edit the link text by adding the **Icon Code** as in the example below.

<img src="/files/ukaSkwN25TXgeicrRFyo" alt="Icon code" data-size="original">
{% endstep %}
{% endstepper %}

{% hint style="info" %}
INFO: Icons are currently not supported for sub links.
{% endhint %}

### Mega Menu

Shortcode: `{getPosts} $label={Label Name}`&#x20;

Label Name: `Custom Label`, `recent`

The `$label={}` attribute is optional! The default value is `recent`.

#### What is Label?

<figure><img src="/files/Ft7aQPuPJj7cwut3FBr7" alt="Label name"><figcaption></figcaption></figure>

**Example:**

<figure><img src="/files/1vx6nYM0hon2KJODiu3r" alt="Mega menu" width="375"><figcaption></figcaption></figure>

### Mega Tabs

Shortcode: `{getPosts} $label={Label Name/Label Name}`&#x20;

Label Settings: Labels must be separated by `/`. Only 5 Labels are supported.

**Example:**

<figure><img src="/files/4yrPvkGKLlFMGBtdGE24" alt="Mega tabs" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
INFO: Mega links must be on the first level! There is no predefined limit amount.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.probloggertemplates.com/guides/spotlight/getting-started/header-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.