Breadcrumbs Block

Overview

The Breadcrumbs block shows a visitor’s current location inside the site hierarchy. It is generated from the CMS page tree, so ancestor pages become links and the current page closes the trail.

Use Breadcrumbs in documentation, catalogs, account areas, and other nested content where the path helps people orient themselves. On shallow pages, the main navigation may already provide enough context.

Add a Breadcrumbs block

Open Add block, choose Breadcrumbs from the Navigation category, and place it in an inline article or a grid section. The path appears automatically from the current page ancestry; there are no breadcrumb items to enter by hand.

If a label or destination is wrong, rename or move the real page in the sitemap. Configure Separator and Show Home only after the hierarchy itself is correct.

Properties

Select the block and open Properties. Breadcrumbs Settings contains Separator and Show Home. Advanced contains block-level behavior, including entrance animation.

Page hierarchy

Breadcrumbs reads the current page ancestry automatically. Every ancestor is a navigable link, while the current page identifies the active location.

Labels come from page titles. The block has no manual item editor, so structural corrections belong in the sitemap: rename a page, move it under the correct parent, or remove unnecessary nesting.

Separator

Choose Slash (/), Chevron (›), Bullet (•), Arrow (→), or Pipe (|). In the selector, Chevron is stored as > and rendered as ›.

Use a familiar, visually quiet separator. It should distinguish levels without looking like a button or competing with the page title.

Show Home

Show Home is enabled by default. Turning it off removes only the first Home link; the rest of the ancestry remains unchanged.

When to use it

Breadcrumbs is most useful when a visitor can arrive several levels deep. Skip it when the trail only repeats an obvious top-level navigation choice.

Advanced

Animation Effects

Advanced controls the entrance animation for the entire block. Effects include None, fade, slide, reveal, zoom, blur, pop, flip, scroll focus, and floating variants, with duration, delay, and easing controls.

Navigation should be available immediately. Keep motion subtle, short, and free of delays that make the trail feel unresponsive.

Grid sizing

Breadcrumbs is content-driven. In a grid section, the default 12 × 1 frame is a placement hint, not a fixed visual box. Padding, long labels, and wrapping can require a second row.

Use the rendered View height audit to confirm the natural height. Grow the frame only when content needs room, and shrink frames that leave unexplained empty space.

Style Panel

Breadcrumbs exposes one Style Panel target: Breadcrumbs. Choose the preset, breakpoint, and state before making local adjustments.

Default state

The Default state includes Spacing, Background, Borders, Typography, and Effects. Use these controls to place the trail, establish contrast, and tune its visual weight.

Surface boundary

Breadcrumbs is normally frameless. If you give it a transparent or low-opacity bounded surface, keep the boundary visible with a subtle contrasting border or shadow.

Typography

Typography controls text color, font size, alignment, font family, and font weight for the generated trail.

Alignment

Horizontal alignment positions the trail within its available width. Vertical alignment matters when a Breadcrumbs block sits in a grid frame taller than its natural content.

Breakpoints

Use Tablet and Mobile overrides only when the trail needs a different size or alignment. Keep ancestor links, the current item, and separators readable as one coherent path.

On Hover

The Breadcrumbs hover state exposes Typography and Effects. Spacing, Background, and Borders are intentionally absent.

Feedback

Use restrained link feedback such as a text-color, weight, shadow, or supported hover-animation change. Hover does not replace keyboard focus, so verify that focused ancestor links remain clearly visible.

Responsive behavior

Luna uses a 24-column desktop grid, 12 columns on tablet, and 8 columns on mobile. Breadcrumbs remains content-driven and wraps when the available width is narrower than the generated path.

Tablet and mobile

If the block has a background or border, author all four padding sides explicitly at Tablet and Mobile. Inspect the real View to confirm that text never touches the surface edge and long page titles wrap naturally.

Interactive example

The live Breadcrumbs block above is generated from this documentation page’s real hierarchy.

Property summary

Separator

Chooses the character displayed between page levels.

Show Home

Includes or removes the Home link at the start of the generated trail.

Data source

Uses the current page hierarchy automatically; individual items are not authored inside the block.

Layout

Participates in normal document flow in inline content, or uses a compact content-driven frame inside a grid section.

Style target

The Breadcrumbs root supports Desktop, Tablet, Mobile, and the documented hover states.

Accessibility

Keep page titles concise enough to scan as a path. Ancestor links must remain keyboard-reachable, the current page must be visually distinct, and hover or focus feedback needs sufficient contrast.

Separators are visual punctuation. The hierarchy and labels must remain understandable without relying on separator shape alone.

Common mistakes

Do not type breadcrumb labels into a nearby text block, and do not use styling to hide an incorrect sitemap hierarchy.

Avoid oversized grid frames, unreadably small type, decorative separators that resemble controls, weak focus contrast, and aggressive entrance motion.