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), 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).
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). |
| 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. 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 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.
- 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.
- Select the Navigation block, Settings tab.
- Under Burger menu on, tick the devices, for example Mobile and Tablet.
- In Composition to open, choose your composition, then the Opening mode.
- 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). 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).
- 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 |
- 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.
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).
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 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.
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). For a color specific to menu links, set it on a link then update the Menu link style (Save a block’s style).
Navigation links, dropdown panels and buttons take the color and typography of the navigation. You can give them others (Color a block and Format a 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. |
Esccloses 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.
Esccloses 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.