diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index ef8c33023fd25..e2f671457e22c 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -775,6 +775,7 @@ declare module '@theme/Navbar/Search' {
 
   export interface Props {
     readonly children: ReactNode;
+    readonly className?: string;
   }
 
   export default function NavbarSearch(props: Props): JSX.Element;
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
index 9ab92085eca5e..31ffbdb147609 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Content/index.tsx
@@ -56,7 +56,8 @@ export default function NavbarContent(): JSX.Element {
   const items = useNavbarItems();
   const [leftItems, rightItems] = splitNavbarItems(items);
 
-  const autoAddSearchBar = !items.some((item) => item.type === 'search');
+  const searchBarItem = items.find((item) => item.type === 'search');
+  const autoAddSearchBar = !!searchBarItem;
 
   return (
     <NavbarContentLayout
@@ -75,7 +76,7 @@ export default function NavbarContent(): JSX.Element {
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
           {autoAddSearchBar && (
-            <NavbarSearch>
+            <NavbarSearch className={searchBarItem.className}>
               <SearchBar />
             </NavbarSearch>
           )}
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
index 8d3fe1b19d2fe..236d237aa082c 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
@@ -6,10 +6,14 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import type {Props} from '@theme/Navbar/Search';
 
 import styles from './styles.module.css';
 
-export default function NavbarSearch({children}: Props): JSX.Element {
-  return <div className={styles.searchBox}>{children}</div>;
+export default function NavbarSearch({
+  children,
+  className,
+}: Props): JSX.Element {
+  return <div className={clsx(className, styles.searchBox)}>{children}</div>;
 }
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
index 9bdf1a8d9da80..0ca9247120996 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
@@ -202,6 +202,7 @@ const LocaleDropdownNavbarItemSchema = NavbarItemBaseSchema.append({
 
 const SearchItemSchema = Joi.object({
   type: Joi.string().equal('search').required(),
+  className: Joi.string().default(''),
 });
 
 const NavbarItemSchema = Joi.object({
diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md
index 02e3c66db8f5d..41ee5ae277586 100644
--- a/website/docs/api/themes/theme-configuration.md
+++ b/website/docs/api/themes/theme-configuration.md
@@ -602,6 +602,7 @@ However, with this special navbar item type, you can change the default location
 | --- | --- | --- | --- |
 | `type` | `'search'` | **Required** | Sets the type of this item to a search bar. |
 | `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
+| `className` | `string` | `''` | Custom CSS class for this navbar item. |
 
 </APITable>