gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
62 lines (55 loc) • 3.58 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sub-page | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="level2" data-breadcrumb="Home > Pages > Section > Sub-page">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Documentation</div>
<h1 class="page-title">Nested sub-page</h1>
</div>
<div class="page-actions">
<button class="btn btn-outline">← Back to section</button>
</div>
</div>
</div>
<div class="row col-4-8">
<!-- Inner-page nav -->
<div class="card">
<div class="card-header"><div class="card-title">In this section</div></div>
<div class="card-body" style="padding:8px">
<a href="#" class="nav-link" style="color:var(--text-secondary);background:var(--primary-lt)">Overview</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">Quick start</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">Configuration</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">Components</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">API reference</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">Migration guide</a>
<a href="#" class="nav-link" style="color:var(--text-secondary)">Changelog</a>
</div>
</div>
<!-- Content -->
<div class="card">
<div class="card-header"><div class="card-title">Section overview</div></div>
<div class="card-body" style="font-size:13px;color:var(--text-secondary);line-height:1.7">
<p>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: <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">Home › Pages › Section › Sub-page</code>.</p>
<p style="margin-top:10px">In the v4 layout, you can nest as deeply as you need — the breadcrumb is driven by the <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">data-breadcrumb</code> attribute on <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px"><body></code>:</p>
<pre style="background:var(--bg-surface-secondary);padding:12px;border-radius:var(--radius);font-size:11.5px;font-family:var(--font-mono);color:var(--text);margin-top:8px;overflow-x:auto"><body data-breadcrumb="Home > Pages > Section > Sub-page"></pre>
<p style="margin-top:14px">Each segment is split on <code style="font-family:var(--font-mono);font-size:11.5px;background:var(--bg-surface-secondary);padding:1px 5px;border-radius:3px">></code> and rendered with separators. The last segment is marked active in the topbar.</p>
</div>
</div>
</div>
</div>
</main>
</body>
</html>