Skip to content

docs: update docs navbar #888

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

Merged
omeraplak merged 7 commits into from
Dec 24, 2025
Merged

docs: update docs navbar #888

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9ef3a2f
docs: refactor layout of sidebar
necatiozmen Dec 24, 2025
5b8a0fb
style: adjust navbar margin and remove accessibility ignore comments
necatiozmen Dec 24, 2025
595c03a
style: update navbar documentation tab label and adjust styles for im…
necatiozmen Dec 24, 2025
9c8cd2c
style: update navbar search functionality and adjust styles for impro…
necatiozmen Dec 24, 2025
bc32cb1
style: enhance navbar and sidebar styles for improved readability and…
necatiozmen Dec 24, 2025
5bcd339
style: remove unnecessary blank lines in custom CSS for cleaner code
necatiozmen Dec 24, 2025
78e1f0f
style: remove unused Ops component from Home page for cleaner code
necatiozmen Dec 24, 2025
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
134 changes: 132 additions & 2 deletions website/src/components/navbar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useLocation } from "@docusaurus/router";
import {
AcademicCapIcon,
ArrowPathIcon,
ArrowRightIcon,
BookOpenIcon,
BriefcaseIcon,
BuildingLibraryIcon,
Expand All @@ -15,7 +16,9 @@ import {
ComputerDesktopIcon,
CurrencyDollarIcon,
DocumentTextIcon,
HomeIcon,
InformationCircleIcon,
MagnifyingGlassIcon,
MegaphoneIcon,
PencilSquareIcon,
PuzzlePieceIcon,
Expand All @@ -29,7 +32,11 @@ import {
} from "@heroicons/react/24/outline";
import { BoltIcon, ChevronDownIcon, StarIcon } from "@heroicons/react/24/solid";
import { useMediaQuery } from "@site/src/hooks/use-media-query";
import SearchBar from "@theme/SearchBar";
import clsx from "clsx";
import React, { useState } from "react";
import { DiscordLogo } from "../../../static/img/logos/discord";
import { GitHubLogo } from "../../../static/img/logos/github";

// Santa Claus Icon Component
const SantaIcon = ({ className }: { className?: string }) => (
Expand Down Expand Up @@ -63,12 +70,29 @@ const SantaIcon = ({ className }: { className?: string }) => (
/>
</svg>
);
import { DiscordLogo } from "../../../static/img/logos/discord";
import { GitHubLogo } from "../../../static/img/logos/github";
import { useGitHubStars } from "../../contexts/GitHubStarsContext";
import useCasesData from "../usecases/usecases.json";
import styles from "./styles.module.css";

// Docs page tab configuration
const docTabs = [
{ label: "VoltAgent", href: "/docs/", match: "/docs/" },
{ label: "Observability", href: "/observability-docs/", match: "/observability-docs/" },
{
label: "Actions & Triggers",
href: "/actions-triggers-docs/",
match: "/actions-triggers-docs/",
},
{ label: "Evaluation", href: "/evaluation-docs/", match: "/evaluation-docs/" },
{
label: "Prompt Engineering",
href: "/prompt-engineering-docs/",
match: "/prompt-engineering-docs/",
},
{ label: "Deployment", href: "/deployment-docs/", match: "/deployment-docs/" },
{ label: "Recipes & Guides", href: "/recipes-and-guides/", match: "/recipes-and-guides/" },
];

export default function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isProductsOpen, setIsProductsOpen] = useState(false);
Expand Down Expand Up @@ -117,6 +141,112 @@ export default function Navbar() {
}
};

// Check if current page is a docs page
const isDocsPage =
location.pathname.includes("/docs") ||
location.pathname.includes("/observability-docs") ||
location.pathname.includes("/evaluation-docs") ||
location.pathname.includes("/prompt-engineering-docs") ||
location.pathname.includes("/deployment-docs") ||
location.pathname.includes("/actions-triggers-docs") ||
location.pathname.startsWith("/recipes-and-guides/");

// Render docs navbar for documentation pages
if (isDocsPage) {
return (
<nav className={styles.docsNavbar}>
{/* Top Row: Logo + Search + Version + Actions */}
<div className={styles.docsNavbarTop}>
<div className={styles.docsLeftSection}>
<Link to="/docs/" className={styles.docsLogoLink}>
<SantaIcon className={styles.docsLogoIcon} />
<span className={styles.docsLogoText}>voltagent</span>
<span className={styles.docsDocsText}>Docs</span>
</Link>
</div>
<div className={styles.docsCenterSection}>
<div className={styles.docsVersionBadge}>v1.0.x</div>
<div className={styles.docsSearchWrapper}>
{/* Hidden SearchBar - triggers on button click */}
<div className={styles.docsSearchHidden}>
<SearchBar />
</div>
<button
type="button"
className={styles.docsSearchButton}
onClick={() => {
// Click the hidden DocSearch button
const searchButton = document.querySelector(
".DocSearch-Button",
) as HTMLButtonElement;
if (searchButton) {
searchButton.click();
}
}}
aria-label="Search"
>
<MagnifyingGlassIcon className={styles.docsSearchIcon} />
<span className={styles.docsSearchText}>Search</span>
<span className={styles.docsSearchShortcut}>⌘K</span>
</button>
</div>
</div>
<div className={styles.docsRightSection}>
<Link
to="https://console.voltagent.dev/"
className={clsx(styles.docsSocialButton, styles.docsCtaButton)}
target="_blank"
rel="noopener noreferrer"
aria-label="Try VoltOps"
>
<span>Try VoltOps</span>
<ArrowRightIcon className={styles.docsCtaIcon} />
</Link>
<Link to="/" className={styles.docsSocialButton} aria-label="Home">
<HomeIcon className={styles.docsSocialIconHome} />
</Link>
<Link
to="https://s.voltagent.dev/discord"
className={styles.docsSocialButton}
target="_blank"
rel="noopener noreferrer"
aria-label="Discord"
>
<DiscordLogo className={styles.docsSocialIconDiscord} />
</Link>
<Link
to="https://github.com/voltagent/voltagent"
className={styles.docsSocialButton}
target="_blank"
rel="noopener noreferrer"
aria-label="GitHub"
>
<GitHubLogo className={styles.docsSocialIconGitHub} />
</Link>
</div>
</div>
{/* Bottom Row: Tabs */}
<div className={styles.docsNavbarBottom}>
<div className={styles.docsTabList} role="tablist" aria-label="Documentation sections">
Copy link

@cubic-dev-ai cubic-dev-ai bot Dec 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Incomplete ARIA tablist implementation. The role="tablist" container requires children with role="tab" and aria-selected attributes. Since these are navigation links rather than content-switching tabs, consider either removing role="tablist" or adding proper tab semantics.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At website/src/components/navbar/index.tsx, line 230:

<comment>Incomplete ARIA tablist implementation. The `role=&quot;tablist&quot;` container requires children with `role=&quot;tab&quot;` and `aria-selected` attributes. Since these are navigation links rather than content-switching tabs, consider either removing `role=&quot;tablist&quot;` or adding proper tab semantics.</comment>

<file context>
@@ -117,6 +141,112 @@ export default function Navbar() {
+        &lt;/div&gt;
+        {/* Bottom Row: Tabs */}
+        &lt;div className={styles.docsNavbarBottom}&gt;
+          &lt;div className={styles.docsTabList} role=&quot;tablist&quot; aria-label=&quot;Documentation sections&quot;&gt;
+            {docTabs.map((tab) =&gt; (
+              &lt;Link
</file context>
Suggested change
<div className={styles.docsTabList} role="tablist" aria-label="Documentation sections">
<div className={styles.docsTabList} aria-label="Documentation sections">
Fix with Cubic

{docTabs.map((tab) => (
<Link
key={tab.href}
to={tab.href}
className={clsx(
styles.docsTab,
location.pathname.startsWith(tab.match) && styles.docsTabActive,
)}
>
{tab.label}
</Link>
))}
</div>
</div>
</nav>
);
}

// Default navbar for non-docs pages
return (
<nav className={styles.navbar}>
<div className={styles.navbarInner}>
Expand Down
Loading
Loading