> For the complete documentation index, see [llms.txt](https://docs.probloggertemplates.com/guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.probloggertemplates.com/guides/hypermag/getting-started/header-menu.md).

# 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="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FTFVirETCASX36wP2pFwH%2Fimage.png?alt=media&amp;token=4a091f21-ac52-4aee-b519-802893aff75a" alt="Sublinks" width="459"><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="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FX9z9NGXAjume6E2pAgMg%2Fimage.png?alt=media&amp;token=0c3b2073-18ba-47b7-b060-ba8831017107" alt="Bootstrap icon" data-size="original">
{% endstep %}

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

<img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2F76loCjohUmLpqxbEgU31%2Fimage.png?alt=media&amp;token=89ca7937-27c5-4e1c-8fd9-4414526e4052" 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="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FZSsSrh2G0NN2LLrDHVuw%2Fimage.png?alt=media&amp;token=10d46e29-0815-4ec3-b548-c77a3399516c" alt="Label name"><figcaption></figcaption></figure>

**Example:**

<figure><img src="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2FQhOnEzIyf53ii8IP83js%2Fimage.png?alt=media&amp;token=3a4fba8b-e522-40cb-966a-26d1b3f32b71" alt="Mega menu" width="534"><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="https://3541635086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtjauJ2SCTA4KF9vk4mp7%2Fuploads%2Fw7HLSAN2bQ3FT4wehEad%2Fimage.png?alt=media&amp;token=7febac36-a789-40a0-87ac-8095e11c5147" alt="Mega tabs" width="539"><figcaption></figcaption></figure>

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