From 7394828c7a84de2c3af0ca37546db17d6a703507 Mon Sep 17 00:00:00 2001
From: Alexey Rybak <50731695+reluctantfuturist@users.noreply.github.com>
Date: Wed, 10 Sep 2025 12:43:36 -0700
Subject: [PATCH] docs: horizontal nav bar (#3407)
# What does this PR do?
* Adds a horizontal nav bar for easy access to the API reference and the
Llama Stack Github repo
## Test Plan
* Built the docs and ran the local HTML server to verify changes
---
docs/_static/css/my_theme.css | 101 ++++++++++++++++++++++++++++++
docs/_static/js/horizontal_nav.js | 44 +++++++++++++
docs/source/conf.py | 1 +
3 files changed, 146 insertions(+)
create mode 100644 docs/_static/js/horizontal_nav.js
diff --git a/docs/_static/css/my_theme.css b/docs/_static/css/my_theme.css
index d078ec057..7dcd97c9b 100644
--- a/docs/_static/css/my_theme.css
+++ b/docs/_static/css/my_theme.css
@@ -1,5 +1,106 @@
@import url("theme.css");
+/* Horizontal Navigation Bar */
+.horizontal-nav {
+ background-color: #ffffff;
+ border-bottom: 1px solid #e5e5e5;
+ padding: 0;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1050;
+ height: 50px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+[data-theme="dark"] .horizontal-nav {
+ background-color: #1a1a1a;
+ border-bottom: 1px solid #333;
+}
+
+.horizontal-nav .nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 20px;
+ height: 100%;
+}
+
+.horizontal-nav .nav-brand {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+ text-decoration: none;
+}
+
+[data-theme="dark"] .horizontal-nav .nav-brand {
+ color: #fff;
+}
+
+.horizontal-nav .nav-links {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.horizontal-nav .nav-links a {
+ color: #666;
+ text-decoration: none;
+ font-size: 14px;
+ font-weight: 500;
+ padding: 8px 12px;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+}
+
+.horizontal-nav .nav-links a:hover,
+.horizontal-nav .nav-links a.active {
+ color: #333;
+ background-color: #f5f5f5;
+}
+
+.horizontal-nav .nav-links a.active {
+ font-weight: 600;
+}
+
+[data-theme="dark"] .horizontal-nav .nav-links a {
+ color: #ccc;
+}
+
+[data-theme="dark"] .horizontal-nav .nav-links a:hover,
+[data-theme="dark"] .horizontal-nav .nav-links a.active {
+ color: #fff;
+ background-color: #333;
+}
+
+.horizontal-nav .nav-links .github-link {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.horizontal-nav .nav-links .github-icon {
+ width: 16px;
+ height: 16px;
+ fill: currentColor;
+}
+
+/* Adjust main content to account for fixed nav */
+.wy-nav-side {
+ top: 50px;
+ height: calc(100vh - 50px);
+}
+
+.wy-nav-content-wrap {
+ margin-top: 50px;
+}
+
.wy-nav-content {
max-width: 90%;
}
diff --git a/docs/_static/js/horizontal_nav.js b/docs/_static/js/horizontal_nav.js
new file mode 100644
index 000000000..c2384f9d5
--- /dev/null
+++ b/docs/_static/js/horizontal_nav.js
@@ -0,0 +1,44 @@
+// Horizontal Navigation Bar for Llama Stack Documentation
+document.addEventListener('DOMContentLoaded', function() {
+ // Create the horizontal navigation HTML
+ const navHTML = `
+
+ `;
+
+ // Insert the navigation at the beginning of the body
+ document.body.insertAdjacentHTML('afterbegin', navHTML);
+
+ // Update navigation links based on current page
+ updateActiveNav();
+});
+
+function updateActiveNav() {
+ const currentPath = window.location.pathname;
+ const navLinks = document.querySelectorAll('.horizontal-nav .nav-links a');
+
+ navLinks.forEach(link => {
+ // Remove any existing active classes
+ link.classList.remove('active');
+
+ // Add active class based on current path
+ if (currentPath === '/' && link.getAttribute('href') === '/') {
+ link.classList.add('active');
+ } else if (currentPath.includes('/references/api_reference/') && link.getAttribute('href').includes('api_reference')) {
+ link.classList.add('active');
+ }
+ });
+}
diff --git a/docs/source/conf.py b/docs/source/conf.py
index 3f84d1310..0cbddef31 100644
--- a/docs/source/conf.py
+++ b/docs/source/conf.py
@@ -131,6 +131,7 @@ html_static_path = ["../_static"]
def setup(app):
app.add_css_file("css/my_theme.css")
app.add_js_file("js/detect_theme.js")
+ app.add_js_file("js/horizontal_nav.js")
app.add_js_file("js/keyboard_shortcuts.js")
def dockerhub_role(name, rawtext, text, lineno, inliner, options={}, content=[]):