diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
index a8bdef350d6fb..9511d97b63aa5 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
@@ -44,10 +44,7 @@ function Navbar(): JSX.Element {
navbar: {items, hideOnScroll, style},
colorMode: {disableSwitch: disableColorModeSwitch},
} = useThemeConfig();
-
const [sidebarShown, setSidebarShown] = useState(false);
- const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
-
const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
@@ -73,6 +70,7 @@ function Navbar(): JSX.Element {
}
}, [windowSize]);
+ const hasSearchNavbarItem = items.some((item) => item.type === 'search');
const {leftItems, rightItems} = splitNavItemsByPosition(items);
return (
@@ -101,9 +99,7 @@ function Navbar(): JSX.Element {
{leftItems.map((item, i) => (
@@ -121,10 +117,7 @@ function Navbar(): JSX.Element {
onChange={onToggleChange}
/>
)}
-
+ {!hasSearchNavbarItem && }
+
+
+ );
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx
index 802ee0f7a9bc9..70451c855c575 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/index.tsx
@@ -8,11 +8,13 @@
import React from 'react';
import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem';
+import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem';
import type {Props} from '@theme/NavbarItem';
const NavbarItemComponents = {
default: () => DefaultNavbarItem,
localeDropdown: () => LocaleDropdownNavbarItem,
+ search: () => SearchNavbarItem,
// Need to lazy load these items as we don't know for sure the docs plugin is loaded
// See https://github.com/facebook/docusaurus/issues/3360
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css
new file mode 100644
index 0000000000000..361a1b239f368
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/styles.module.css
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@media (max-width: 996px) {
+ .searchWrapper {
+ position: absolute;
+ right: var(--ifm-navbar-padding-horizontal);
+ }
+}
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 0c6a4b2907000..a89fc6022cf62 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -107,6 +107,11 @@ const LocaleDropdownNavbarItemSchema = Joi.object({
className: Joi.string(),
});
+const SearchItemSchema = Joi.object({
+ type: Joi.string().equal('search').required(),
+ position: NavbarItemPosition,
+});
+
// Can this be made easier? :/
const isOfType = (type) => {
let typeSchema = Joi.string().required();
@@ -139,6 +144,10 @@ const NavbarItemSchema = Joi.object().when({
is: isOfType('localeDropdown'),
then: LocaleDropdownNavbarItemSchema,
},
+ {
+ is: isOfType('search'),
+ then: SearchItemSchema,
+ },
{
is: isOfType(undefined),
then: Joi.forbidden().messages({
diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md
index fcc888f2e0815..e2b3739971c16 100644
--- a/website/docs/api/themes/theme-configuration.md
+++ b/website/docs/api/themes/theme-configuration.md
@@ -395,12 +395,26 @@ module.exports = {
};
```
-````
+### Navbar search dropdown
+
+If you use the [search](../../search.md), the search bar will be the rightmost element in the navbar.
+
+However, with this special navbar item type, you can change the default location.
+
+```js {5-8} title="docusaurus.config.js"
+module.exports = {
+ themeConfig: {
+ navbar: {
+ items: [
{
- type: 'localeDropdown',
- position: 'left',
+ type: 'search',
+ position: 'right',
},
- ```
+ ],
+ },
+ },
+};
+```
### Auto-hide sticky navbar
@@ -416,7 +430,7 @@ module.exports = {
// ...
},
};
-````
+```
### Navbar style