# Navigation

The **Navigation** block builds the menu of your site, horizontal, vertical or folded behind a burger. This page describes its settings, the burger menu, the navigation link, the dropdown menu and the Content type links block.

## Add the block

Insert the **Navigation** block ([Add a block](https://lovelyrender.com/documentation/add-block/)), or type `menu` in the block search. Its usual place is the header or the footer of the site, written once for all pages ([Write the header, menu and footer once](https://lovelyrender.com/documentation/header-menu-footer-once/)).

In the navigation, add its entries with the **+**:

| Block | Purpose |
| --- | --- |
| **Navigation Link** | A link to a page, or a label that cannot be clicked. |
| **Navigation Dropdown** | A submenu: a title and a panel that unfolds. |
| **Button** | A call to action that stands out from the other entries, “Book an appointment” for example ([Button](https://lovelyrender.com/documentation/button-block/)). |
| **Post type links** | A link to each published content of a type, kept up to date by the site. See the section The links of a content type. |
| Paragraph | Free text between the links. |

On a link, **Add before** and **Add after** from the **⋮** menu, or `Ctrl+Alt+T` and `Ctrl+Alt+Y`, add a navigation link right next to it. They work in the navigation as in the panel of a submenu.

The navigation does not space its links by itself: set the **Gap** in the **Flex layout** panel of its **Settings** tab, as on a [Container](https://lovelyrender.com/documentation/container-block/). The header of the creations sets one.

## Set up the navigation

Select the **Navigation** block. At the top of the **Settings** tab, the **Region name** field names the menu for screen readers. The **Navigation settings** panel sets its submenus and its burger menu.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Region name** | The name that screen readers announce for this menu, “Main menu” or “Footer menu” for example. | Empty |
| **Open submenus** | **On hover**: a submenu opens when the pointer passes over its title. **On click**: it opens on a click on its title and stays open until the next click. Applies to all the submenus of this navigation. | **On hover** |
| **Burger menu on** | The devices on which the entries fold behind a burger icon: **Mobile**, **Tablet** and **Desktop**. The three boxes can be combined. | No box ticked |
| **Burger icon** | The icon that opens the menu, chosen in the icon picker: the library, the animated icons and your own SVGs. Shown when a device is ticked. | The three bars |
| **Burger position** | Groups the burger at the start, in the center or at the end of the bar. Shown when a device is ticked. | Its natural place |
| **Composition to open** | The composition that the burger opens. Compositions are in **Templates** > **Compositions**. | **None** |
| **Opening mode** | **Modal**: the composition opens in the center, over the page. **Side panel**: it slides in from the side. Shown when a composition is chosen. | **Modal** |

![The settings of the Navigation block: the Region name field, then the Navigation settings panel with Open submenus on On hover, the Mobile, Tablet and Desktop boxes of Burger menu on, then Composition to open on None.](https://static.lovelyrender.com/uploads/2026/10/916-doc-blocs2-navigation.png)

## The burger menu

The burger folds the entries of the navigation and opens a composition in their place, which you build with the same blocks as a page. A single composition serves all the ticked devices.

1. To prepare the mobile menu, create a composition in **Templates** > **Compositions**, then publish it. Start it with a heading, which becomes the announced name of the window.
2. Select the **Navigation** block, **Settings** tab.
3. Under **Burger menu on**, tick the devices, for example **Mobile** and **Tablet**.
4. In **Composition to open**, choose your composition, then the **Opening mode**.
5. If you want, change the **Burger icon** and the **Burger position**.

The burger is published only with a device ticked and a composition chosen. As long as one is missing, the navigation is published as is, without a burger and without folding its entries. As soon as you tick a device without a composition, a **Burger menu** box appears in the page in place of the burger. It carries the list of compositions and the opening mode: choose them there.

- To close the menu, place a **Dismiss overlay** block in the composition, with the icon of your choice ([Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)). The burger, hidden under the open panel, does not close it again.
- A composition in draft does not open.
- On a site in several languages, translate the composition: the burger opens the version in the language of the page ([Translate a page](https://lovelyrender.com/documentation/translate-page/)).
- The burger is styled through the **Default** and **Hover** states of the Navigation block. It is not a block to select.

## The navigation link

Write the label in the block, in the field marked **Link label…**. The label is plain text, with no bold or hand-placed link: its formatting is set in the **Styles** tab. Without a destination, the entry stays a label that cannot be clicked, to head a submenu column for example.

A navigation link carries the registered style **Menu link**: it takes the color of the text around it, that of the menu or the header. The style gives it a little space around its text. Its **Colors** panel has no link color: the entry is itself a link. For a light menu on a dark background, give the menu a text color: its links follow.

Its states are **Default**, **Hover**, **Focus** and **Active**. On the site, the entry that leads to the displayed page takes the **Active** state and a screen reader announces it as the current page. An entry that opens a modal or a side panel is never marked.

## The Link panel

The destination is set in the **Settings** tab, **Link** panel. The Button block, the Container, the Heading and the Media have the same panel.

| Setting | Effect | Default value |
| --- | --- | --- |
| Field **Search or paste a URL…** | A click in the empty field offers **Home page** and the archive of each type that has one, marked **Template**. Type two characters to search your pages, posts, compositions and media library files. Type an address, `https://`, `mailto:`, `tel:` or `#anchor`, then confirm it under the **Address** label. | Empty |
| **Hide the link from search engines** | Removes the address from the published page: the entry stays clickable, but search engines do not follow it. Grays out **Nofollow** and **Open in a new tab**. | Off |
| **Link opening** | **In a modal**, **Modal at the bottom left**, **Modal at the bottom center**, **Modal at the bottom right**, **On the right side** or **Classic (in the browser tab)**. Absent for a `mailto:`, `tel:` or `#anchor` address, for the home page and for an archive. | **Classic (in the browser tab)** |
| **Accessible name** | The name that screen readers announce in place of the content of the link. Leave empty on an entry that carries a visible label. | Empty |
| **Nofollow** | Asks search engines not to follow the link or pass any value to it. For a sponsored link or a link you do not vouch for. | Off |
| **Open in a new tab** | Opens the destination in a new tab. Available with the **Classic (in the browser tab)** opening and without **Hide the link from search engines**. | Off |

![The Link panel of a navigation link: the Search or paste an address field, Hide the link from search engines, Link opening set to Classic (in the browser tab), the Accessible name field and its help, Nofollow and Open in a new tab.](https://static.lovelyrender.com/uploads/2026/10/919-doc-blocs2-lien.png)

- Once the destination is chosen, the field becomes a pill with the title of the content and two buttons, **Edit** and **Remove link**. Both erase the destination: choose another one.
- A link to a page of your site is kept by the identifier of the page: rename it or change its address, and the link follows.
- A destination pointing to a composition or a media library file opens only as an overlay. **Classic (in the browser tab)** disappears, **Hide the link from search engines** and **Nofollow** stay on and **Open in a new tab** is disabled.
- A link in a new tab carries an invisible mention, read by screen readers: “opens in a new tab”. Do not write it in the label: it would be read twice.

**Tip:** To jump to a section of a page, paste the address of the page followed by the anchor, `https://my-site.com/offer#pricing`. On a single page, the anchor alone is enough: `#pricing`. The anchor of a Heading block is shown in its **Advanced** panel, **HTML anchor** field.

## The dropdown menu

The **Navigation Dropdown** block creates two blocks locked together: a **Navigation Link** for the title and a **Dropdown Panel** for the content. The panel accepts links, buttons and other dropdown menus. In the editor, click the title of the submenu to show its panel and fill it.

To set the symbol, select the dropdown menu (select the title then go up to the parent block) and open its **Symbol** panel.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Show symbol** | Shows the symbol next to the title. | On |
| **Symbol style** | The + that rotates to form a ×, the + that becomes −, the chevron that flips from ↓ to ↑ or the chevron that rotates from → to ↓. | The chevron that flips from ↓ to ↑ |
| **Circle around symbol** | Puts a circle around the symbol. | Off |
| **Symbol position** | **Left** or **Right** of the title. | **Right** |

The symbol is part of the link: it takes its color and changes with it on hover. For a visitor who asks for less motion, it flips at once.

### The dropdown panel

Select the **Dropdown Panel**, **Settings** tab, **Dropdown settings** panel. The **Width** setting offers **Classic**, the natural width of the panel, or **Full width**, all the available width. **Classic** is the default value.

The panel carries the registered style **Dropdown Panel**: the page background, rounded corners, a light shadow, 8 px of padding and a fade on opening. It is placed under its link and over the page, with **Position** **Absolute** and a **Z-index** of 1000 ([Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)).

### Open submenus on click

A large submenu, across the whole width of the page, is hard to cross on hover. Then select the Navigation block and set **Open submenus** to **On click**.

| Behavior | On hover | On click |
| --- | --- | --- |
| Opening | The pointer on the title. | A click on the title. |
| Closing | The pointer leaving the submenu, after a short moment. | A new click on the title, a followed link, a click elsewhere, `Esc` or the focus leaving the submenu. |
| The open title | Its usual style. | Its **Active** state. |
| The title’s link | The title can lead to a page. | The title opens the submenu and no longer leads to a page. |

On click, the title’s **Link** panel shows “In click mode, the title opens the submenu: put the page link in the panel”. An address already entered on the title is kept and comes back if you switch to **On hover**.

## The links of a content type

The **Post type links** block shows a link to each published content of a type, grouped under their parent. A content added or unpublished updates the list without you touching it. Type `list` in the block search to find it.

As long as no type is chosen, the block shows “Choose a content type in the block settings”. A type with no published content shows “No published entry for this content type”.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Content type** | The type to list. Only the types that can be displayed on the site are offered. | **Select a post type** |
| **Sort by** | **Alphabetical**, **ID** or **Publication date**. | **Alphabetical** |
| **Order** | **Ascending** or **Descending**. | **Ascending** |
| **Show children** | Arranges the contents under their parent, as expandable items. Turned off, all the contents are listed flat. | On |
| **Max children per item** | The number of children shown under each parent. 0 means no limit. With **Show children**. | 0 |

![The List settings panel of the Content type links block: Content type on Choose a content type, Sort by Alphabetical, Order Ascending, Show children turned on and Maximum children per item at 0.](https://static.lovelyrender.com/uploads/2026/10/940-doc-blocs2-liens-type.png)

The **Accordion settings** panel sets how the parents unfold:

- **Opening mode**, **One at a time** among the parents of the same level, or **Multiple**;
- **All open by default**;
- **Cannot be closed**, which keeps all the parents unfolded without the visitor being able to fold them, and hides the other settings of the panel;
- the style, the circle and the position of the symbol.

The symbol cannot be hidden: on a phone, without hover, it is the only cue for an expandable parent. With **Cannot be closed**, nothing folds and the symbol disappears.

The **List display** panel sets the **Indent (px)** of nested levels: empty, it equals the browser’s 40 px. It offers a **List style per level** for the first three levels. **Nested numbering** (1, 1.1, 1.1.1) is offered when all levels are numbered.

## Style the link entry

The list contains a single **Link entry** block, which styles each listed content, parent and child alike. In the preview, click any entry: the link entry is selected and the others take on its styling as you set it. Its states are **Default**, **Hover**, **Focus** and **Active**.

The **Active** state styles the entry of the page being read. It carries the **Link entry** style: an underline on hover and focus, the entry of the page being read in the main color and in bold. The parents of the page being read stay unfolded. Even in a burger menu, a screen reader announces the entry as the current page.

**Tip:** For the side menu of documentation, set the list to the “Documentation” type with its children. On each article, the reader sees their section unfolded and the article they are reading highlighted.

## Style the menus

The **Menu** part of the design catalog gives a look to the menu links and submenus of the whole site: **Simple**, **Underlined on hover**, **Active bar** or **Pills** ([Adopt a design from the catalog](https://lovelyrender.com/documentation/adopt-catalog-design/)). For a color specific to menu links, set it on a link then update the **Menu link** style ([Save a block’s style](https://lovelyrender.com/documentation/save-block-style/)).

Navigation links, dropdown panels and buttons take the color and typography of the navigation. You can give them others ([Color a block](https://lovelyrender.com/documentation/color-block/) and [Format a text](https://lovelyrender.com/documentation/format-text/)).

## On a phone

On the devices ticked in **Burger menu on**, the entries fold behind the burger, which opens your composition. On the others, the navigation stays unfolded. A dropdown panel that runs out of room on the right of the screen opens inward.

## Accessibility

Submenus open with the keyboard, depending on the content of their title:

| The submenu title | Opening |
| --- | --- |
| A link, with a destination | The focus: arriving on the title with `Tab` unfolds the submenu. `Enter` follows the link. |
| A label without a destination, or any title of a click navigation | `Enter` or `Space`, like a button. |

- `Esc` closes the submenu and returns the focus to its title. In a nested submenu, it closes only the level where the focus is.
- Leaving the submenu with the keyboard closes it. A screen reader announces the title as unfolded or folded.
- The burger is a real link, announced as **Open menu**. The panel it opens is announced as a window, receives the focus and puts the page underneath to sleep. `Esc` closes it and returns the focus to the burger. The focus does not loop inside the panel.
- When a page carries two menus, give each a **Region name**. If one has none, the editor’s **Accessibility** panel flags it.

## See also

- [Write the header, menu and footer once](https://lovelyrender.com/documentation/header-menu-footer-once/)
- [Open a modal or a side panel](https://lovelyrender.com/documentation/open-modal-side-panel/)
- [Button](https://lovelyrender.com/documentation/button-block/)
- [Breadcrumbs](https://lovelyrender.com/documentation/breadcrumb-block/)