Four navigation components connect every page — vertically, horizontally, and across the hierarchy
Every generated page contains up to four navigation components that together form a seamless network. No page is a dead end — users can always navigate up, down, sideways, or back.
Breadcrumbs appear on all L1, L2, and L3 pages in the fixed navigation bar. They show the full path from the L0 overview page to the current page. Every segment is a clickable link — except the current page.
Format examples
Design rule: The level badges (L0, L1, L2, ...) are small and subtle. They are the only place where level numbers are visible to users — they never appear in titles, headings, or link labels.
Breadcrumb structure: The outer element is a <nav class="nav-deep"> bar (fixed at the top). Inside it sits the actual breadcrumb as a nested <nav class="breadcrumb">. Each segment consists of a breadcrumb-link with a small breadcrumb-level badge. The last segment is not a link but a breadcrumb-current span. Separators use the class breadcrumb-sep.
Deep-dive links invite the user to explore a topic at the next deeper level. They feature an orange left border and a warm background. But: a deep-dive link is only displayed when two conditions are met.
Label variants (instead of “Deep Dive L2”)
Here is what a deep-dive link looks like in practice (from the Orchestrator page):
Deep-dive link structure: An <a> element with the class deep-dive-link contains two children: the deep-dive-content block (label, title, optional description) and the deep-dive-arrow arrow. Key visual traits: 4px orange left border, warm background, and the entire block shifts slightly right on hover.
Sibling navigation appears at the bottom of every L1, L2, and L3 page. It shows all pages at the same level as pill-shaped links. The current page is highlighted in orange — so users instantly see where they are and what else is available.
Live example: How the sibling nav of this page looks
Purpose: Sibling nav enables horizontal exploration without navigating back to the parent page. Users can jump directly from “Orchestrator” to “Pipelines” — both are L1 siblings under the same Developer L0.
Sibling nav structure: The container .sibling-nav has a top border separator. Inside are flex-wrapping pills (.sibling-nav-link) as links. The current page uses a <span> instead of <a> and receives the additional class .sibling-nav-current (orange background, white text). Numbering uses monospace font.
Two more navigation elements complete the system: The audience switch changes between audiences, while language flags switch between German and English. Both use relative paths — never absolute URLs.
index_dev_en.html to index_mgr_en.html.navigation_dev_en.html to navigation_dev_de.html.Relative path examples
Folder structure: L0 pages live in the root folder (output/). L1 pages in the subfolder l1/, L2 in l2/, L3 in l3/. All relative paths are based on this structure. Since language versions live in the same folder, switching languages is always a simple filename swap with no path navigation.
A deep-dive link should point to an L2 page, but the audience is 📊 Decision-Maker (maximum depth: L1). What happens?