---
title: "03 – Navigation"
slug: "03-navigation"
updated: 2024-07-11T15:07:34Z
published: 2024-07-11T15:07:34Z
---

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

# 03 – Navigation

## **Description**

This navigation block, also known interchangeably as a menu, can have up to eight editable links. This includes the usual text formatting such as Colors, and general styling. Plus, the option to stack the content in two rows in mobile view – depending on the number of navigation links chosen.

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4799ae98-7796-42be-9bcc-743503524354.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d9f45263-8619-4fee-8e90-3172ce66db86.png)

## Formatting options

### Padding

This refers to the space between the block's content and its border. This can be edited in the **Details Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Padding | Top | 10 |
| Right | 0 |
| Bottom | 10 |
| Left | 0 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/e247695f-74ba-4b9c-ad29-90f1bbbeb55a.png)

### Stack On Mobile

It allows you to display navigation text in two rows in mobile view.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Stack On Mobile | Navigation Text Stack | Hide |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/a3758436-02e7-421d-8cee-c9ee4b229efe.png)

### Show Number of Links

Used to change the number of required Navigation links.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Show Number of Links | 1 | 8 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/286a22dc-f71e-42c0-9d56-3e9ede5d287a.png)

### Block Background Color

Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Background Color | Block Background Color | #ffffff |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/8886ea81-d9b2-46a6-a416-c1d275e74a6e.png)

### Navigation Text Color

Used to change the navigation text color.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Navigation Text Color | Navigation Text | #000000 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/15928ba8-5a85-4104-802c-715f51458493.png)

### Line Height

Used to change the line height of the text.

> As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Line Height | Navigation Text | 18 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/aff576f5-ffaf-4369-8ce2-dc3ac6276d35.png)

### Links

Add the navigation links to the link fields.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Links | Link 1 | Blank |
| Link 2 | Blank |
| Link 3 | Blank |
| Link 4 | Blank |
| Link 5 | Blank |
| Link 6 | Blank |
| Link 7 | Blank |
| Link 8 | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/bff4334e-81f2-4c6b-ac54-0ffb55d536a0.png)

### Compatibility

There are no known render issues with this block.