diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 5685caa..9aeb7ba 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -65,6 +65,7 @@ class SkinVector extends SkinMustache {
 		'is-quiet' => true,
 		'class' => 'sticky-header-icon'
 	];
+	private const SEARCH_EXPANDING_CLASS = 'vector-search-box-show-thumbnail';
 
 	/**
 	 * T243281: Code used to track clicks to opt-out link.
@@ -325,7 +326,16 @@ class SkinVector extends SkinMustache {
 	private function getStickyHeaderData() {
 		return [
 			'data-primary-action' => !$this->shouldHideLanguages() ? $this->getULSButtonData() : '',
-			'data-button-start' => self::NO_ICON,
+			'data-button-start' => [
+				'href' => '#p-search',
+				'label' => $this->msg( 'search' ),
+				'icon' => 'wikimedia-search',
+				'is-quiet' => true,
+				'class' => 'vector-sticky-header-search-toggle',
+			],
+			'data-search' => [
+				'class' => $this->shouldSearchExpand() ? self::SEARCH_EXPANDING_CLASS : '',
+			],
 			'data-buttons' => [
 				self::TALK_ICON, self::HISTORY_ICON, self::NO_ICON, self::NO_ICON
 			]
@@ -423,7 +433,7 @@ class SkinVector extends SkinMustache {
 		}
 
 		if ( $this->shouldSearchExpand() ) {
-			$searchClass .= ' vector-search-box-show-thumbnail';
+			$searchClass .= " " . self::SEARCH_EXPANDING_CLASS;
 		}
 
 		// Annotate search box with a component class.
diff --git a/includes/templates/StickyHeader.mustache b/includes/templates/StickyHeader.mustache
index fe531fc..616ba9f 100644
--- a/includes/templates/StickyHeader.mustache
+++ b/includes/templates/StickyHeader.mustache
@@ -6,6 +6,11 @@
 			{{>Button}}
 			{{/data-button-start}}
 		</div>
+		{{#data-search}}
+		<div class="vector-search-box {{class}}">
+			<div class="vector-secondary-search" id="vector-sticky-header-search"></div>
+		</div>
+		{{/data-search}}
 		<div class="vector-sticky-header-context-bar">
 			<div class="vector-sticky-header-context-bar-primary">{{html-title}}</div>
 		</div>
diff --git a/jsdoc.json b/jsdoc.json
index 28eedc2..9c3e5bf 100644
--- a/jsdoc.json
+++ b/jsdoc.json
@@ -22,6 +22,7 @@
 				"Element": "https://developer.mozilla.org/docs/Web/API/Element",
 				"Event": "https://developer.mozilla.org/docs/Web/API/Event",
 				"HTMLElement": "https://developer.mozilla.org/docs/Web/API/HTMLElement",
+				"NodeList": "https://developer.mozilla.org/docs/Web/API/NodeList",
 				"HTMLInputElement": "https://developer.mozilla.org/docs/Web/API/HTMLInputElement",
 				"\"removeEventListener\"": "https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener",
 				"Window": "https://developer.mozilla.org/docs/Web/API/Window",
diff --git a/resources/skins.vector.js/searchToggle.js b/resources/skins.vector.js/searchToggle.js
index 015a4c0..591156d 100644
--- a/resources/skins.vector.js/searchToggle.js
+++ b/resources/skins.vector.js/searchToggle.js
@@ -1,7 +1,6 @@
 var
-	HEADER_SELECTOR = '.mw-header',
-	SEARCH_TOGGLE_SELECTOR = '.search-toggle',
-	SEARCH_BOX_ID = 'p-search',
+	HEADER_SELECTOR = 'header',
+	SEARCH_BOX_SELECTOR = '.vector-search-box',
 	SEARCH_VISIBLE_CLASS = 'vector-header-search-toggled';
 
 /**
@@ -22,7 +21,9 @@ function bindSearchBoxHandler( searchBox, header ) {
 			// Check if the click target was a suggestion link. WVUI clears the
 			// suggestion elements from the DOM when a suggestion is clicked so we
 			// can't test if the suggestion is a child of the searchBox.
-			!$( ev.target ).closest( '.wvui-typeahead-suggestion' ).length &&
+			//
+			// Note: The .closest API is feature detected in `initSearchToggle`.
+			!ev.target.closest( '.wvui-typeahead-suggestion' ) &&
 			!searchBox.contains( ev.target )
 		) {
 			// eslint-disable-next-line mediawiki/class-doc
@@ -53,15 +54,20 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) {
 		// from the page when clicked.
 		ev.preventDefault();
 
-		bindSearchBoxHandler( searchBox, header );
-
 		// eslint-disable-next-line mediawiki/class-doc
 		header.classList.add( SEARCH_VISIBLE_CLASS );
 
-		// Defer focusing the input to another task in the event loop. At the time
+		// Defer binding the search box handler until after the event bubbles to the
+		// top of the document so that the handler isn't called when the user clicks
+		// the search toggle. Event bubbled callbacks execute within the same task
+		// in the event loop.
+		//
+		// Also, defer focusing the input to another task in the event loop. At the time
 		// of this writing, Safari 14.0.3 has trouble changing the visibility of the
 		// element and focusing the input within the same task.
 		setTimeout( function () {
+			bindSearchBoxHandler( searchBox, header );
+
 			var searchInput = /** @type {HTMLInputElement|null} */ ( searchBox.querySelector( 'input[type="search"]' ) );
 
 			if ( searchInput ) {
@@ -73,14 +79,34 @@ function bindToggleClickHandler( searchBox, header, searchToggle ) {
 	searchToggle.addEventListener( 'click', handler );
 }
 
-module.exports = function initSearchToggle() {
-	var
-		header = /** @type {HTMLElement|null} */ ( document.querySelector( HEADER_SELECTOR ) ),
-		searchBox = /** @type {HTMLElement|null} */ ( document.getElementById( SEARCH_BOX_ID ) ),
-		searchToggle =
-			/** @type {HTMLElement|null} */ ( document.querySelector( SEARCH_TOGGLE_SELECTOR ) );
+/**
+ * Enables search toggling behavior in a header given a toggle element (e.g.
+ * search icon).  When the toggle element is clicked, a class,
+ * `SEARCH_VISIBLE_CLASS`, will be applied to a header matching the selector
+ * `HEADER_SELECTOR` and the input inside the element, SEARCH_BOX_SELECTOR, will
+ * be focused.  This class can be used in CSS to show/hide the necessary
+ * elements. When the user clicks outside of SEARCH_BOX_SELECTOR, the class will
+ * be removed.
+ *
+ * @param {HTMLElement|null} searchToggle
+ */
+module.exports = function initSearchToggle( searchToggle ) {
+	// Check if .closest API is available (IE11 does not support it).
+	if ( !searchToggle || !searchToggle.closest ) {
+		return;
+	}
 
-	if ( !( searchBox && searchToggle && header ) ) {
+	var header =
+	/** @type {HTMLElement|null} */ ( searchToggle.closest( HEADER_SELECTOR ) );
+
+	if ( !header ) {
+		return;
+	}
+
+	var searchBox =
+	/** @type {HTMLElement|null} */ ( header.querySelector( SEARCH_BOX_SELECTOR ) );
+
+	if ( !searchBox ) {
 		return;
 	}
 
diff --git a/resources/skins.vector.js/skin.js b/resources/skins.vector.js/skin.js
index 27592db..431102b 100644
--- a/resources/skins.vector.js/skin.js
+++ b/resources/skins.vector.js/skin.js
@@ -50,7 +50,9 @@ function main( window ) {
 	dropdownMenus();
 	vector.init();
 	initSearchLoader( document );
-	searchToggle();
+	// Initialize the search toggle for the main header only. The sticky header
+	// toggle is initialized after wvui search loads.
+	searchToggle( document.querySelector( '.mw-header .search-toggle' ) );
 	languageButton();
 	stickyHeader();
 }
diff --git a/resources/skins.vector.js/stickyHeader.js b/resources/skins.vector.js/stickyHeader.js
index f9f9e79..bbb41fc 100644
--- a/resources/skins.vector.js/stickyHeader.js
+++ b/resources/skins.vector.js/stickyHeader.js
@@ -6,7 +6,8 @@ var
 	FIRST_HEADING_ID = 'firstHeading',
 	USER_MENU_ID = 'p-personal',
 	VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
-	VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list';
+	VECTOR_MENU_CONTENT_LIST_SELECTOR = '.vector-menu-content-list',
+	SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle';
 
 /**
  * Copies attribute from an element to another.
@@ -141,6 +142,31 @@ function makeStickyHeaderFunctional(
 	stickyObserver.observe( stickyIntersection );
 }
 
+/**
+ * @param {HTMLElement} header
+ */
+function setupSearchIfNeeded( header ) {
+	var
+		searchToggle = header.querySelector( SEARCH_TOGGLE_SELECTOR );
+
+	if ( !(
+		searchToggle &&
+		window.fetch &&
+		document.body.classList.contains( 'skin-vector-search-vue' )
+	) ) {
+		return;
+	}
+
+	// Load the `skins.vector.search` module here or setup an event handler to
+	// load it depending on the outcome of T289718. After it loads, initialize the
+	// search toggle.
+	//
+	// Example:
+	// mw.loader.using( 'skins.vector.search', function () {
+	//   initSearchToggle( searchToggle );
+	// } );
+}
+
 module.exports = function initStickyHeader() {
 	var header = document.getElementById( STICKY_HEADER_ID ),
 		stickyIntersection = document.getElementById(
@@ -162,4 +188,5 @@ module.exports = function initStickyHeader() {
 	}
 
 	makeStickyHeaderFunctional( header, stickyIntersection, userMenu, userMenuStickyContainer );
+	setupSearchIfNeeded( header );
 };
diff --git a/resources/skins.vector.search/App.vue b/resources/skins.vector.search/App.vue
index 48a48b9..61301fe 100644
--- a/resources/skins.vector.search/App.vue
+++ b/resources/skins.vector.search/App.vue
@@ -1,6 +1,6 @@
 <template>
 	<wvui-typeahead-search
-		id="searchform"
+		:id="id"
 		ref="searchForm"
 		:client="getClient"
 		:domain="domain"
@@ -48,10 +48,6 @@ module.exports = {
 		var wvuiSearchForm = this.$refs.searchForm.$el;
 
 		if ( this.autofocusInput ) {
-			// TODO: The wvui-typeahead-search component accepts an id prop but does not
-			// display that value as an HTML attribute on the form element.
-			wvuiSearchForm.querySelector( 'form' ).setAttribute( 'id', 'searchform' );
-
 			// TODO: The wvui-typeahead-search component does not accept an autofocus parameter
 			// or directive. This can be removed when its does.
 			wvuiSearchForm.querySelector( 'input' ).focus();
@@ -75,6 +71,10 @@ module.exports = {
 		}
 	},
 	props: {
+		id: {
+			type: String,
+			required: true
+		},
 		searchPageTitle: {
 			type: String,
 			default: 'Special:Search'
diff --git a/resources/skins.vector.search/skins.vector.search.js b/resources/skins.vector.search/skins.vector.search.js
index eb05c4f..a7f2b56 100644
--- a/resources/skins.vector.search/skins.vector.search.js
+++ b/resources/skins.vector.search/skins.vector.search.js
@@ -6,37 +6,55 @@ var
 
 /**
  * @param {HTMLElement} searchForm
+ * @param {NodeList} secondarySearchElements
  * @param {HTMLInputElement} search
  * @param {string|null} searchPageTitle title of page used for searching e.g. Special:Search
  *  If null then this will default to Special:Search.
  * @return {void}
  */
-function initApp( searchForm, search, searchPageTitle ) {
+function initApp( searchForm, secondarySearchElements, search, searchPageTitle ) {
+	/**
+	 *
+	 * @ignore
+	 * @param {Function} createElement
+	 * @param {string} id
+	 * @return {Vue.VNode}
+	 */
+	var renderFn = function ( createElement, id ) {
+		return createElement( App, {
+			props: $.extend( {
+				id: id,
+				autofocusInput: search === document.activeElement,
+				action: searchForm.getAttribute( 'action' ),
+				searchAccessKey: search.getAttribute( 'accessKey' ),
+				searchPageTitle: searchPageTitle,
+				searchTitle: search.getAttribute( 'title' ),
+				searchPlaceholder: search.getAttribute( 'placeholder' ),
+				searchQuery: search.value
+			},
+			// Pass additional config from server.
+			config
+			)
+		} );
+	};
 	// eslint-disable-next-line no-new
 	new Vue( {
 		el: searchForm,
-		/**
-		 *
-		 * @param {Function} createElement
-		 * @return {Vue.VNode}
-		 */
 		render: function ( createElement ) {
-			return createElement( App, {
-				props: $.extend( {
-					autofocusInput: search === document.activeElement,
-					action: searchForm.getAttribute( 'action' ),
-					searchAccessKey: search.getAttribute( 'accessKey' ),
-					searchPageTitle: searchPageTitle,
-					searchTitle: search.getAttribute( 'title' ),
-					searchPlaceholder: search.getAttribute( 'placeholder' ),
-					searchQuery: search.value
-				},
-				// Pass additional config from server.
-				config
-				)
-			} );
+			return renderFn( createElement, 'searchform' );
 		}
 	} );
+
+	// Initialize secondary search elements like the search in the sticky header.
+	Array.prototype.forEach.call( secondarySearchElements, function ( secondarySearchElement ) {
+		// eslint-disable-next-line no-new
+		new Vue( {
+			el: secondarySearchElement,
+			render: function ( createElement ) {
+				return renderFn( createElement, secondarySearchElement.id );
+			}
+		} );
+	} );
 }
 /**
  * @param {Document} document
@@ -48,9 +66,12 @@ function main( document ) {
 		titleInput = /** @type {HTMLInputElement|null} */ (
 			searchForm.querySelector( 'input[name=title]' )
 		),
-		search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) );
+		search = /** @type {HTMLInputElement|null} */ ( document.getElementById( 'searchInput' ) ),
+		// Since App.vue requires a unique id prop, only query elements with an id attribute.
+		secondarySearchElements = document.querySelectorAll( '.vector-secondary-search[id]' );
+
 	if ( search && searchForm ) {
-		initApp( searchForm, search, titleInput && titleInput.value );
+		initApp( searchForm, secondarySearchElements, search, titleInput && titleInput.value );
 	}
 }
 main( document );
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index ef93c68..e19fb14 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -46,6 +46,7 @@
 	&-start {
 		display: flex;
 		align-items: center;
+		flex-grow: 1;
 	}
 
 	&-end {
@@ -88,6 +89,29 @@
 			background-image: linear-gradient( to right, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) 20px );
 		}
 	}
+
+	.vector-search-box {
+		// Hide the search box until the user toggles it.
+		display: none;
+	}
+
+	&.vector-header-search-toggled {
+		.vector-sticky-header-search-toggle,
+		.vector-sticky-header-context-bar {
+			display: none;
+		}
+
+		.vector-search-box {
+			display: block;
+			flex-basis: unit( 500px / @font-size-browser / @font-size-base, em );
+		}
+
+		// Increase the start margin of the search box to account for the input
+		// expanding on focus.
+		.vector-search-box-show-thumbnail {
+			margin-left: @size-search-expand;
+		}
+	}
 }
 
 .client-nojs .vector-sticky-header {
diff --git a/stories/StickyHeader.stories.data.js b/stories/StickyHeader.stories.data.js
index 2075258..18602bc 100644
--- a/stories/StickyHeader.stories.data.js
+++ b/stories/StickyHeader.stories.data.js
@@ -18,7 +18,16 @@ const data = {
 		label: '196 languages',
 		'html-vector-button-icon': `<span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span>`
 	},
-	'data-button-start': NO_ICON,
+	'data-search': {
+		class: ''
+	},
+	'data-button-start': {
+		icon: 'wikimedia-search',
+		href: '#',
+		class: 'search-toggle',
+		'is-quiet': true,
+		label: 'Search'
+	},
 	'data-button-end': NO_ICON,
 	'data-buttons': [
 		NO_ICON, NO_ICON, NO_ICON, NO_ICON