From 14e0a3ba7485af4b6d8169482c745dc8d10c4f94 Mon Sep 17 00:00:00 2001
From: Khushal Rajput <khushalrajput1978@gmail.com>
Date: Fri, 30 Oct 2026 01:03:25 +0530
Subject: [PATCH] fix(theme-classic): render mobile HTML navbar items as list
 items

---
 .../src/theme/NavbarItem/HtmlNavbarItem.tsx   |  2 +-
 .../__tests__/HtmlNavbarItem.test.tsx         | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/NavbarItem/__tests__/HtmlNavbarItem.test.tsx

diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/HtmlNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/HtmlNavbarItem.tsx
index d1b47036c908..0b820cda0d7f 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/HtmlNavbarItem.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/HtmlNavbarItem.tsx
@@ -16,7 +16,7 @@ export default function HtmlNavbarItem({
   mobile = false,
   isDropdownItem = false,
 }: Props): ReactNode {
-  const Comp = isDropdownItem ? 'li' : 'div';
+  const Comp = mobile || isDropdownItem ? 'li' : 'div';
   return (
     <Comp
       className={clsx(
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/__tests__/HtmlNavbarItem.test.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/__tests__/HtmlNavbarItem.test.tsx
new file mode 100644
index 000000000000..a04091b775df
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/__tests__/HtmlNavbarItem.test.tsx
@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+
+import {describe, expect, it} from 'vitest';
+import {render} from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+
+import HtmlNavbarItem from '../HtmlNavbarItem';
+
+describe('HtmlNavbarItem', () => {
+  it('renders a li element on mobile', () => {
+    const {container} = render(<HtmlNavbarItem value="Example" mobile />);
+
+    expect(container.firstElementChild?.tagName).toBe('LI');
+  });
+
+  it('renders a div element on desktop', () => {
+    const {container} = render(<HtmlNavbarItem value="Example" />);
+
+    expect(container.firstElementChild?.tagName).toBe('DIV');
+  });
+
+  it('renders a li element for dropdown items', () => {
+    const {container} = render(
+      <HtmlNavbarItem value="Example" isDropdownItem />,
+    );
+
+    expect(container.firstElementChild?.tagName).toBe('LI');
+  });
+});