The Navigation Menu block shows the links of one of your Ghost menus. Every header pattern holds one, and the footer patterns hold one that shows the Secondary menu. You find it in the Content group of the block picker. It goes in a Section or a Dialog, or inside a Group, a Collection, a No Results or a Paywall. To place it in your header, add it to a Group inside the Navigation section.
The links come from Ghost Admin, under Settings › Navigation. You add, rename and reorder menu items there, not in Fantasma. The preview shows Fantasma's demo menu until you connect your Ghost site, as Preview with your Ghost content and members describes.
General
Setting
What it does
Menu
Which Ghost menu the block shows: Primary (the default) or Secondary. The footer patterns use Secondary. When the menu has no items in Ghost, the block shows nothing.
Layout
Setting
What it does
Layout
Row (the default) puts the links side by side and opens dropdowns as panels. A row does not fold up on phones by itself. The header patterns hide it on phones and show a menu button that opens the Mobile menu dialog. Stack puts the links under each other, and an item with sub-items opens and closes its list below it when a visitor clicks it. Use Stack in a phone menu or a side drawer.
Justification
Places the links on the Left (the default), in the Center or on the Right. The Standard header pattern centers them.
Dropdowns from Ghost menu items
Ghost menus have one level. A menu item whose label starts with a hyphen and a space, such as - Tutorials, becomes a sub-item of the item above it that has no hyphen. Visitors see the label without the hyphen.
For example, these items in Ghost Admin make a Resources item with two sub-items:
Label in Ghost Admin
What visitors see
Resources
A menu link
- Documentation
A link in the dropdown under Resources
- Tutorials
A link in the dropdown under Resources
About
The next menu link, with no dropdown
In a Row, the dropdown opens when the pointer is over the item. Visitors who use a keyboard press Tab to reach a small arrow button that appears beside the item and Enter to open it, and Esc closes it. A dropdown that would run past the right edge of the menu opens toward the left. The parent item stays a link to its own page.
In a Stack, the parent item opens and closes its sub-items. It no longer goes to its own page. When visitors need that page, add it again as the first sub-item, such as - All resources with the same URL. Dropdowns work the same way in the Secondary menu. Sub-items go one level deep. Set up your site menu walks through a menu with dropdowns.
The look of the links
The links, the dropdown panel and the links inside it each take their look from a block in the Navigation group of the Blocks panel:
Block
What it styles
Menu Link
Each link in the menu, and in a Stack, each sub-item too. It has a Current state for the link to the page the visitor is on, and its default Hover state fades the link to 70%.
Dropdown
The panel a link opens in a Row, with its background, text color, border, corners, shadow and padding.
Dropdown Link
Each link inside that panel. By default, the link under the pointer gets a muted background.
These three are never placed on a page by themselves. You change them in the Blocks panel, and the change reaches every Navigation Menu on the site. When Menu Link has more than one variant or format, the Navigation Menu's panel shows Variant and Format at the top, so each menu can pick its own. How block variants and formats work explains variants, formats and states.
Built-in Menu
A project made in Fantasma 1 can have a Built-in Menu inside its Navigation section. It is the full-screen panel the menu button opens on phones. It still works, and you can select it in the sidebar to change what it holds and on which screens it shows. You cannot delete it or add a second one. New projects use a Mobile menu dialog instead, as Navigation section describes.
The Navigation Menu block shows the links of one of your Ghost menus. Every header pattern holds one, and the footer patterns hold one that shows the Secondary menu. You find it in the Content group of the block picker. It goes in a Section or a Dialog, or inside a Group, a Collection, a No Results or a Paywall. To place it in your header, add it to a Group inside the Navigation section.
The links come from Ghost Admin, under Settings › Navigation. You add, rename and reorder menu items there, not in Fantasma. The preview shows Fantasma's demo menu until you connect your Ghost site, as Preview with your Ghost content and members describes.
General
Layout
Dropdowns from Ghost menu items
Ghost menus have one level. A menu item whose label starts with a hyphen and a space, such as
- Tutorials, becomes a sub-item of the item above it that has no hyphen. Visitors see the label without the hyphen.For example, these items in Ghost Admin make a Resources item with two sub-items:
Resources- Documentation- TutorialsAboutIn a Row, the dropdown opens when the pointer is over the item. Visitors who use a keyboard press Tab to reach a small arrow button that appears beside the item and Enter to open it, and Esc closes it. A dropdown that would run past the right edge of the menu opens toward the left. The parent item stays a link to its own page.
In a Stack, the parent item opens and closes its sub-items. It no longer goes to its own page. When visitors need that page, add it again as the first sub-item, such as
- All resourceswith the same URL. Dropdowns work the same way in the Secondary menu. Sub-items go one level deep. Set up your site menu walks through a menu with dropdowns.The look of the links
The links, the dropdown panel and the links inside it each take their look from a block in the Navigation group of the Blocks panel:
These three are never placed on a page by themselves. You change them in the Blocks panel, and the change reaches every Navigation Menu on the site. When Menu Link has more than one variant or format, the Navigation Menu's panel shows Variant and Format at the top, so each menu can pick its own. How block variants and formats work explains variants, formats and states.
Built-in Menu
A project made in Fantasma 1 can have a Built-in Menu inside its Navigation section. It is the full-screen panel the menu button opens on phones. It still works, and you can select it in the sidebar to change what it holds and on which screens it shows. You cannot delete it or add a second one. New projects use a Mobile menu dialog instead, as Navigation section describes.
Shared settings
The Navigation Menu also has the Layout settings for its width, the Display settings and the Advanced settings.