Skip to content

feat: Add breadcrumb navigation, page actions toolbar, and copy page option #649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gaurav-nelson wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: Add breadcrumb navigation, page actions toolbar, and copy page option #649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8308e7
feat: Add breadcrumb navigation, page actions toolbar, and copy page …
gaurav-nelson Feb 25, 2026
a7406e0
Redesign TOC as a responsive component
gaurav-nelson Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions layouts/_default/baseof.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</div>
<script src="{{ "js/codeblock.js" | relURL }}"></script>
<script src="{{ "js/mobile-nav.js" | relURL }}"></script>
<script src="{{ "js/page-actions.js" | relURL }}"></script>
</body>
<!-- Uncomment when you have sorted out the feedback partials option
<body>
Expand Down
5 changes: 1 addition & 4 deletions layouts/blog/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@

<main class="pf-c-page__main" id="maincontent">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "page-toolbar.html" . }}
<div class="pf-l-grid__item pf-m-9-col">
<div class="pf-u-text-align-center">
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
Expand Down
5 changes: 3 additions & 2 deletions layouts/blog/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@
</div>
</div>
</div>
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
<main class="pf-c-page__main" tabindex="0">
<section class="pf-c-page__main-section">
{{ partial "toc-mobile.html" . }}
<div class="pf-u-display-flex">
{{ partial "toc.html" . }}
<div class="pf-c-content">
<h1>
{{- .Title -}}
Expand All @@ -45,7 +47,6 @@ <h1>
{{ .Content }}
</div>
</div>
{{ partial "toc.html" . }}
</div>
</section>
{{ partial "footer.html" . }}
Expand Down
5 changes: 1 addition & 4 deletions layouts/ci/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@
</div>
<main class="pf-c-page__main">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "page-toolbar.html" . }}
<div class="pf-u-display-flex">
<div class="pf-c-content">
<h1>{{- .Title -}}</h1>
Expand Down
5 changes: 1 addition & 4 deletions layouts/contribute/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@

<main class="pf-c-page__main">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "page-toolbar.html" . }}
<div class="pf-l-grid__item pf-m-9-col">
<div class="pf-u-text-align-center">
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
Expand Down
10 changes: 4 additions & 6 deletions layouts/contribute/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,15 @@
{{ partial "menu-contribute.html" . }}
</div>
</div>
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
<main class="pf-c-page__main" tabindex="0">
<section class="pf-c-page__main-section pf-m-fill">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "toc-mobile.html" . }}
{{ partial "page-toolbar.html" . }}
<div class="pf-u-display-flex">
{{ partial "toc.html" . }}
<div class="pf-c-content">
{{ .Content }}
</div>
{{ partial "toc.html" . }}
</div>
</section>
{{ partial "footer.html" . }}
Expand Down
5 changes: 1 addition & 4 deletions layouts/learn/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@

<main class="pf-c-page__main">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "page-toolbar.html" . }}
<div class="pf-l-grid__item pf-m-9-col">
<div class="pf-u-text-align-center">
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
Expand Down
10 changes: 4 additions & 6 deletions layouts/learn/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@
{{ partial "menu-learn.html" . }}
</div>
</div>
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
<main class="pf-c-page__main" tabindex="0">
<section class="pf-c-page__main-section pf-m-fill">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "toc-mobile.html" . }}
{{ partial "page-toolbar.html" . }}
<div class="pf-u-display-flex">
{{ partial "toc.html" . }}
<div class="pf-c-content">
{{ .Content }}

Expand Down Expand Up @@ -42,7 +41,6 @@
</div>
</div>
</div>
{{ partial "toc.html" . }}
</div>
</section>
{{ partial "footer.html" . }}
Expand Down
34 changes: 34 additions & 0 deletions layouts/partials/breadcrumbs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{{- if not .IsHome -}}
{{- $ancestors := .Ancestors.Reverse -}}
{{- $count := len $ancestors -}}
<nav class="pf-c-breadcrumb" aria-label="Breadcrumb">
<ol class="pf-c-breadcrumb__list">
{{- range $i, $a := $ancestors }}
<li class="pf-c-breadcrumb__item{{ if and (gt $count 2) (gt $i 0) }} pf-c-breadcrumb__item--collapsible{{ end }}">
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</span>
<a href="{{ .RelPermalink }}" class="pf-c-breadcrumb__link">
{{- if .IsHome }}Home{{ else }}{{ .Title }}{{ end -}}
</a>
</li>
{{- if and (gt $count 2) (eq $i 0) }}
<li class="pf-c-breadcrumb__item pf-c-breadcrumb__item--ellipsis">
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</span>
<button type="button" class="pf-c-breadcrumb__link pf-c-breadcrumb__expand-btn" aria-label="Show full breadcrumb path">&hellip;</button>
</li>
{{- end }}
{{- end }}
<li class="pf-c-breadcrumb__item">
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</span>
<span class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
{{- .Title -}}
</span>
</li>
</ol>
</nav>
{{- end -}}
1 change: 1 addition & 0 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,5 +70,6 @@
<a href="//www.redhat.com" target="top" aria-label="Visit Red Hat.com"><img src="/images/RHlogo.svg" alt="Red Hat logo" width="145px" height="613px"></a><span class="site-copyright">Copyright &copy; {{ now.Year }} Red Hat, Inc. All third-party trademarks are the property of their respective owners.</span>
</div>
<script src="{{ "js/bootstrap.bundle.js" | relURL }}"></script>
<script src="{{ "js/toc.js" | relURL }}"></script>
{{ partial "search-index.html" . }}
</footer>
47 changes: 47 additions & 0 deletions layouts/partials/page-actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{{- $repo := .Site.Params.github_repo | default "validatedpatterns/docs" -}}
{{- $branch := .Site.Params.github_branch | default "main" -}}
{{- $filePath := "" -}}
{{- $rawUrl := "" -}}
{{- $sourceLabel := "View source" -}}
{{- if .File -}}
{{- $filePath = .File.Path -}}
{{- $rawUrl = printf "https://raw.githubusercontent.com/%s/%s/content/%s" $repo $branch $filePath -}}
{{- if strings.HasSuffix $filePath ".md" -}}
{{- $sourceLabel = "View as Markdown" -}}
{{- end -}}
{{- end -}}

<div class="page-actions" data-permalink="{{ .Permalink }}">
<button type="button" class="page-actions__button" data-action="copy-page" aria-label="Copy page content">
<i class="far fa-copy" aria-hidden="true"></i>
<span class="page-actions__label"><span class="page-actions__label-full">Copy page</span><span class="page-actions__label-short">Copy</span></span>
</button>
<button type="button" class="page-actions__toggle" aria-expanded="false" aria-label="More actions">
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</button>
<ul class="page-actions__menu" role="menu">
<li role="menuitem">
<button type="button" data-action="copy-link">
<i class="fas fa-link" aria-hidden="true"></i> Copy link
</button>
</li>
{{- if $rawUrl }}
<li role="menuitem">
<a href="{{ $rawUrl }}" target="_blank" rel="noopener">
<i class="fab fa-markdown" aria-hidden="true"></i> {{ $sourceLabel }}
</a>
</li>
{{- end }}
<li class="page-actions__divider" role="separator"></li>
<li role="menuitem">
<a href="https://claude.ai/new?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
<i class="fas fa-robot" aria-hidden="true"></i> Open in Claude
</a>
</li>
<li role="menuitem">
<a href="https://chatgpt.com/?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
<i class="fas fa-comment-dots" aria-hidden="true"></i> Open in ChatGPT
</a>
</li>
</ul>
</div>
13 changes: 13 additions & 0 deletions layouts/partials/page-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="page-toolbar">
<div class="page-toolbar__toggle">
{{ partial "sidebar-toggle.html" . }}
</div>
<div class="page-toolbar__breadcrumbs">
{{ partial "breadcrumbs.html" . }}
</div>
{{- if not (and .IsSection .Parent.IsHome) }}
<div class="page-toolbar__actions">
{{ partial "page-actions.html" . }}
</div>
{{- end }}
</div>
5 changes: 1 addition & 4 deletions layouts/partials/patterns-browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,7 @@

<main class="pf-c-page__main">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "page-toolbar.html" . }}
<div class="pf-l-grid__item pf-m-9-col">
<div class="pf-u-text-align-center">
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
Expand Down
10 changes: 4 additions & 6 deletions layouts/partials/patterns-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@
{{ partial "menu-patterns.html" . }}
</div>
</div>
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
<main class="pf-c-page__main" tabindex="0">
<section class="pf-c-page__main-section">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "toc-mobile.html" . }}
{{ partial "page-toolbar.html" . }}
<div class="pf-u-display-flex">
{{ partial "toc.html" . }}
<div class="pf-c-content">
<div class="pf-c-panel pf-m-raised">
<div class="pf-c-panel__main">
Expand Down Expand Up @@ -109,7 +108,6 @@ <h1 class="pf-c-title pf-m-4xl">{{ .Title }}</h1>
</div>
</div>
</div>
{{ partial "toc.html" . }}
</div>
</section>
{{ partial "footer.html" . }}
Expand Down
19 changes: 19 additions & 0 deletions layouts/partials/toc-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{{- $toc := .TableOfContents -}}
{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}

{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}

<nav class="otp-mobile" aria-label="On this page">
<button class="otp-mobile__toggle" type="button" aria-expanded="false">
<span class="otp-mobile__label">On this page</span>
<span class="otp-mobile__chevron" aria-hidden="true">
<i class="fas fa-chevron-right"></i>
</span>
<span class="otp-mobile__current">Overview</span>
</button>
<div class="otp-mobile__dropdown">
{{- $tocHTML | safeHTML }}
</div>
</nav>

{{- end -}}
21 changes: 12 additions & 9 deletions layouts/partials/toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents">
<div class="pf-l-stack__item">
<div class="pf-c-jump-links__header">
<div class="pf-c-jump-links__label">
<h1>Table of Contents</h1>
</div>
</div>
{{- .TableOfContents | replaceRE "<ul>" "<ul class=\"pf-c-jump-links__list\">" | replaceRE "<li>" "<li class=\"pf-c-jump-links__item\">" | replaceRE "<a" "<a class=\"pf-c-jump-links__link\"" | safeHTML }}
</div>
{{- $toc := .TableOfContents -}}
{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}

{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}

<aside class="otp-desktop" aria-label="On this page">
<div class="otp-desktop__header">
<h2 class="otp-desktop__title">On this page</h2>
</div>
{{- $tocHTML | safeHTML }}
</aside>

{{- end -}}
10 changes: 4 additions & 6 deletions layouts/patterns/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@
{{ partial "menu-patterns.html" . }}
</div>
</div>
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
<main class="pf-c-page__main" tabindex="0">
<section class="pf-c-page__main-section pf-m-fill">
<!-- Sidebar toggle for mobile -->
<div class="sidebar-toggle-container">
{{ partial "sidebar-toggle.html" . }}
</div>
{{ partial "toc-mobile.html" . }}
{{ partial "page-toolbar.html" . }}
<div class="pf-u-display-flex">
{{ partial "toc.html" . }}
<div class="pf-c-content">
{{ .Content }}

Expand Down Expand Up @@ -42,7 +41,6 @@
</div>
</div>
</div>
{{ partial "toc.html" . }}
</div>
</section>
{{ partial "footer.html" . }}
Expand Down
Loading