Two Navigation widgets that help visitors find their way. Breadcrumbs shows where a page sits, like "Home > Services > Roof Repair", and tells Google too. Language Selector lets visitors switch to another language on a multi-language site.
Spacing, Animations & Effects and the text style group (font, size, color, format, alignment, text shadow) are the same on every widget. See Widget design panel basics and Animations and effects.
How to add one
- Open the editor and click Add.
- Under Navigation, drag Breadcrumbs or Language Selector onto the page. Breadcrumbs usually go at the top of a page or in a page template; the Language Selector usually goes in the header.
- For Breadcrumbs, click Breadcrumbs Settings in the toolbar. The Language Selector has no settings window: open Design.
To put a Language Selector in the header in one click, go to Settings → Languages and click Add a Language Selector to the header.
Breadcrumbs
Breadcrumbs Settings
The window is called Breadcrumbs. Under Visible pages:
- Homepage: starts the trail with your homepage. On by default.
- Current page: ends the trail with the page you're on. On by default.
- Hide the breadcrumbs when there isn't a parent page: hides the widget on top-level pages, where the trail would only say "Home". Off by default.
- Add breadcrumb structured data for Google: adds breadcrumb markup so Google can show the trail in search results. On by default.
The trail follows the page order in the Pages panel. To change it, set a page's parent there (see Pages panel). Folders show as plain text, not links. Dynamic pages show the item's name, for example "Home > Services > Roof Repair". See Collections and dynamic pages.
Links
- The text style group (size up to 40px), for the links in the trail.
- Horizontal spacing: space between the links and dividers, 0–40px, per screen size.
Hover
- Hover font color: link color under the mouse.
- Underline on hover.
Current Page
- Color and Bold for the last item (the page you're on).
Divider
- Divider style: > (default), >>, /, | or -.
- Icon color: the divider's color.
- Size: 8–40px, per screen size.
Spacing, Animations & Effects
Margin, plus Entrance and Scroll animations.
Language Selector
It lists the languages the current page exists in and links to the same page in each language. The language you're editing is shown as the current one. On a site with one language it shows nothing on the live site (and a hint in Edit mode). To add languages, see Multi-language sites.
Site defaults
In Settings → Languages, under Language Selector, you set how a selector looks across the site:
- Show languages as: Own name (Español), English name (Spanish) or Code (ES).
- Style: Dropdown or List.
- Show flags.
Every selector set to Site default follows these. Each selector can still be changed on its own in its Design panel.
Languages
- Names: Site default (default), Own name, English or Code.
- Look: Site default (default), Dropdown or List (all languages in a row).
- Flags: Site default (default), Show or Hide.
- "Site default" follows Settings → Languages.
Text
- The text style group (size up to 40px).
- Space between languages (list): 0–60px, per screen size. Only matters for the List look.
Hover & Current Language
- Hover color.
- Current language color.
- Current language in bold.
Dropdown
- Background, Text color, Border color and Corner radius (0–24px, per screen size) for the open dropdown.
- Colors are drawn exactly as you pick them. Left empty, the text is black or white, whichever reads on the dropdown background.
Spacing, Animations & Effects
Margin, plus Entrance and Scroll animations.
Examples
- Service pages: Breadcrumbs at the top of every service page with Hide the breadcrumbs when there isn't a parent page on, so the homepage and top-level pages don't show it.
- Service area template: Breadcrumbs on the dynamic page shows "Home > Service Areas > Broken Arrow" on each town's page, with breadcrumb markup for each.
- Compact header switcher: a Language Selector with Look Dropdown, Names Code and Flags Hide, so it takes little room.
- Footer language row: a second selector in the footer set to List with Own name, so visitors see "English · Español · Français".
Limits and what it can't do
- Breadcrumbs follow the Pages panel only. You can't type your own trail.
- The Language Selector only lists languages the page has been added in. A page that only exists in English shows just English.
- In the editor, the selector's links don't go anywhere and the dropdown doesn't open (a click selects the widget). Use Preview to try it.
- Adding languages and the site defaults are in Settings → Languages, not on the widget.
- Neither widget can use Connect to Data.
Who can use it
Anyone with the Mount Olympus tool on the agency team. Client people need Editor to add or style these widgets. Adding languages stays with the agency.
Troubleshooting
- The breadcrumbs only say "Home": the page has no parent in the Pages panel. Move it under a folder or parent page, or turn on Hide the breadcrumbs when there isn't a parent page.
- A folder in the trail isn't clickable: folders aren't pages, so they show as plain text.
- The Language Selector is empty on the live site: the site has one language, or this page hasn't been added in another language yet.
- My selector doesn't match the others: it has its own Names, Look or Flags setting. Set them back to Site default.
- The dropdown text is hard to read: pick a text color that contrasts more with the dropdown Background, or clear Text color so it picks black or white.