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');
+  });
+});