diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
index a4ca7e346018..e95e10bada60 100644
--- a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
+++ b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
@@ -242,6 +242,12 @@ describe('themeConfig', () => {
             position: 'left',
             label: 'Current version',
           },
+          // Search with className
+          {
+            type: 'search',
+            position: 'right',
+            className: 'search-bar-wrapper',
+          },
         ],
       },
     };
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index ef8c33023fd2..cfeccd35ef3c 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;
@@ -833,6 +834,7 @@ declare module '@theme/NavbarItem/DropdownNavbarItem' {
 declare module '@theme/NavbarItem/SearchNavbarItem' {
   export interface Props {
     readonly mobile?: boolean;
+    readonly className?: string;
   }
 
   export default function SearchNavbarItem(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 9ab92085eca5..cbd137c06437 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,7 @@ 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');
 
   return (
     <NavbarContentLayout
@@ -74,7 +74,7 @@ export default function NavbarContent(): JSX.Element {
         <>
           <NavbarItems items={rightItems} />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
-          {autoAddSearchBar && (
+          {!searchBarItem && (
             <NavbarSearch>
               <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 8d3fe1b19d2f..236d237aa082 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/theme/NavbarItem/SearchNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
index dfefa83dc154..b533468cd17a 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/SearchNavbarItem.tsx
@@ -10,13 +10,16 @@ import type {Props} from '@theme/NavbarItem/SearchNavbarItem';
 import SearchBar from '@theme/SearchBar';
 import NavbarSearch from '@theme/Navbar/Search';
 
-export default function SearchNavbarItem({mobile}: Props): JSX.Element | null {
+export default function SearchNavbarItem({
+  mobile,
+  className,
+}: Props): JSX.Element | null {
   if (mobile) {
     return null;
   }
 
   return (
-    <NavbarSearch>
+    <NavbarSearch className={className}>
       <SearchBar />
     </NavbarSearch>
   );
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
index 9bdf1a8d9da8..340400b9f261 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(),
 });
 
 const NavbarItemSchema = Joi.object({
diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md
index 02e3c66db8f5..d1291bbc3cbc 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>