Docs
Section overview

This page demonstrates a nested layout — a sub-page within a section, with its own inner navigation. The breadcrumb in the topbar reflects the depth: Home › Pages › Section › Sub-page.

In the v4 layout, you can nest as deeply as you need — the breadcrumb is driven by the data-breadcrumb attribute on <body>:

<body data-breadcrumb="Home > Pages > Section > Sub-page">

Each segment is split on > and rendered with separators. The last segment is the current page — never a link, always marked active.

Every earlier segment turns into a link when it has somewhere to go. A label matching a sidebar entry resolves on its own — Forms links to form.html with no extra markup. For anything else, name the target after a |:

<body data-breadcrumb="Home > Projects|projects.html > Acme Website Redesign">

Segments with neither a match nor an explicit target stay plain text — which is what Pages and Section are doing in this page's own breadcrumb.