diff --git a/app/views/about/index.html.erb b/app/views/about/index.html.erb
index 4c8befe12cc..2371234c23d 100644
--- a/app/views/about/index.html.erb
+++ b/app/views/about/index.html.erb
@@ -137,6 +137,11 @@
       <p id="copyright-p"><%= (_("Version %{version}  %{copyright} 2009-%{year} Paul Kelly and %{author}") % {:version => SETTINGS[:version], :copyright => "&copy;", :year=>DateTime.now.year, :author=>mail_to("ohadlevy@gmail.com", "Ohad Levy" )}).html_safe %></p>
       <p id="instance-id-p"><%= _("Instance %{uuid}") % {:uuid => Foreman.instance_id} %></p>
     </div>
+    <div class="stats-well" id="copyright-div">
+      <h4><%= _("Shortcuts") %> </h4>
+      <p><kbd>/</kbd> <%= _("To focus the page search bar") %></p>
+      <p><kbd>CTRL + SHIFT + F</kbd> <%= _("To focus the navigation search bar") %></p>
+    </div>
   </div>
   <%= slot('aboutFooterSlot', true) %>
 </div>
diff --git a/test/integration/config_report_js_test.rb b/test/integration/config_report_js_test.rb
index 468ac68ffdc..52102db3c4a 100644
--- a/test/integration/config_report_js_test.rb
+++ b/test/integration/config_report_js_test.rb
@@ -23,7 +23,7 @@ class ConfigReportJSTest < IntegrationTestWithJavascript
     report
     visit config_reports_path
     click_link(report.host.name)
-    has_selector?(".pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
-    assert_equal "host = #{report.host.name}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{report.host.name}", wait: 3)
+    assert_equal "host = #{report.host.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
 end
diff --git a/test/integration/fact_value_js_test.rb b/test/integration/fact_value_js_test.rb
index 9917a98cfc2..93248546008 100644
--- a/test/integration/fact_value_js_test.rb
+++ b/test/integration/fact_value_js_test.rb
@@ -14,19 +14,19 @@ def setup
     within(:xpath, "//tr[contains(.,'#{@fact_name.name}')]") do
       click_link(@host.fqdn)
     end
-    has_selector?(".pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
-    assert_equal "host = #{@host.fqdn}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "host = #{@host.fqdn}", wait: 3)
+    assert_equal "host = #{@host.fqdn}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
   test "fact_name fact links" do
     visit fact_values_path
     find(:xpath, "//tr[contains(.,'#{@fact_name.name}')]//td[2]//a").click
-    has_selector?(".pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
-    assert_equal "name = #{@fact_name.name}", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "name = #{@fact_name.name}", wait: 3)
+    assert_equal "name = #{@fact_name.name}", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
   test "value fact links" do
     visit fact_values_path
     click_link(@value.value)
-    has_selector?(".pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
-    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.pf-c-text-input-group__text-input').value
+    has_selector?(".foreman-search-bar .pf-c-text-input-group__text-input", text: "facts.#{@fact_name.name} = \"#{@value.value}\"", wait: 3)
+    assert_equal "facts.#{@fact_name.name} = \"#{@value.value}\"", find('.foreman-search-bar .pf-c-text-input-group__text-input').value
   end
 end
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js b/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
index 8c0a00c5737..43d51d91085 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/Layout.fixtures.js
@@ -15,6 +15,14 @@ const subItemsA = [
     href: '/c',
     id: 'menu_item_cc',
   },
+
+  {
+    title: 'Ac',
+    isDivider: false,
+    onClick: mockOnClick,
+    href: '/ac',
+    id: 'menu_item_ac',
+  },
 ];
 const subItemsB = [
   {
@@ -26,7 +34,7 @@ const subItemsB = [
   },
 ];
 
-const PFitems = [
+export const PFitems = [
   {
     title: 'Monitor',
     initialActive: true,
@@ -40,31 +48,6 @@ const PFitems = [
     subItems: subItemsB,
   },
 ];
-// Server Hash Data
-const monitorChildren = [
-  {
-    type: 'item',
-    name: 'Dashboard',
-    title: 'Dashboard',
-    exact: true,
-    url: '/',
-  },
-  {
-    type: 'item',
-    name: 'Facts',
-    title: 'Facts',
-    url: '/fact_values',
-  },
-];
-
-const hostsChildren = [
-  {
-    type: 'item',
-    name: 'All Hosts',
-    title: 'All Hosts',
-    url: '/hosts/new',
-  },
-];
 
 const namelessChildren = [
   {
@@ -76,21 +59,6 @@ const namelessChildren = [
   },
 ];
 
-const hashItemsA = [
-  {
-    type: 'sub_menu',
-    name: 'Monitor',
-    icon: 'fa fa-tachometer',
-    children: monitorChildren,
-  },
-  {
-    type: 'sub_menu',
-    name: 'Hosts',
-    icon: 'fa fa-server',
-    children: hostsChildren,
-  },
-];
-
 export const hashItemNameless = [
   {
     type: 'sub_menu',
diff --git a/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js b/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
index 67a09712f4c..0696d709cb8 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/LayoutSelectors.js
@@ -36,7 +36,6 @@ const childToMenuItem = (child, currentLocation, currentOrganization) => ({
     child.title === currentLocation || child.title === currentOrganization
       ? 'mobile-active'
       : '',
-  href: child.url || '#',
-  preventHref: true,
+  href: child.url,
   onClick: child.onClick || null,
 });
diff --git a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
index 8a878a03639..a5758cc4064 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
+++ b/webpack/assets/javascripts/react_app/components/Layout/Navigation.js
@@ -9,6 +9,7 @@ import {
   NavItemSeparator,
 } from '@patternfly/react-core';
 import { getCurrentPath } from './LayoutHelper';
+import { NavigationSearch } from './NavigationSearch';
 
 const titleWithIcon = (title, iconClass) => (
   <div>
@@ -45,7 +46,7 @@ const Navigation = ({
 
   items.forEach(item => {
     item.subItems.forEach(subItem => {
-      if (!subItem.isDivider) {
+      if (!subItem.isDivider && subItem.href) {
         // don't keep the query parameters for the key
         subItemToItemMap[pathFragment(subItem.href)] = item.title;
       }
@@ -70,7 +71,7 @@ const Navigation = ({
             } else {
               groups[currIndex].groupItems.push({
                 ...sub,
-                isActive: currentPath === sub.href.split('?')[0],
+                isActive: currentPath === sub.href?.split('?')[0],
               });
             }
           });
@@ -81,6 +82,8 @@ const Navigation = ({
     [items.length, currentPath]
   );
 
+  if (!items.length) return null;
+
   const clickAndNavigate = (_onClick, href, event) => {
     if (event.ctrlKey) return;
     event.preventDefault();
@@ -95,6 +98,7 @@ const Navigation = ({
   return (
     <Nav id="foreman-nav" ouiaId="foreman-nav">
       <NavList>
+        <NavigationSearch clickAndNavigate={clickAndNavigate} items={items} />
         {groupedItems.map(({ title, iconClass, groups, className }, index) => (
           <React.Fragment key={index}>
             <NavExpandable
diff --git a/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
new file mode 100644
index 00000000000..451a0bc6718
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Layout/NavigationSearch.js
@@ -0,0 +1,231 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuList,
+  Popper,
+  SearchInput,
+} from '@patternfly/react-core';
+import { translate as __ } from '../../common/I18n';
+
+export const NavigationSearch = ({ items, clickAndNavigate }) => {
+  const navLinks = {};
+  let parent = null;
+  items.forEach(item => {
+    item.subItems.forEach(group => {
+      if (group.isDivider) {
+        parent = group.title;
+      } else {
+        navLinks[group.title] = {
+          ...group,
+          parents: [item.title, parent].filter(Boolean),
+        };
+      }
+    });
+    parent = null;
+  });
+
+  const navItems = Object.keys(navLinks);
+  const menuNav = navItem => (
+    <MenuItem
+      to={navLinks[navItem].href}
+      onClick={event =>
+        clickAndNavigate(
+          navLinks[navItem].onClick,
+          navLinks[navItem].href,
+          event
+        )
+      }
+      itemId={navItem}
+      key={navItem}
+      description={[...navLinks[navItem].parents, navItem].join(' > ')}
+    >
+      {navItem}
+    </MenuItem>
+  );
+  const [autocompleteOptions, setAutocompleteOptions] = useState(
+    navItems.slice(0, 10).map(menuNav)
+  );
+  const [value, setValue] = useState('');
+
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
+
+  const searchInputRef = useRef(null);
+  const autocompleteRef = useRef(null);
+
+  const onClear = () => {
+    setValue('');
+  };
+
+  const onChange = newValue => {
+    if (
+      newValue !== '' &&
+      searchInputRef?.current?.contains(document.activeElement)
+    ) {
+      setIsAutocompleteOpen(true);
+
+      // When the value of the search input changes, build a list of no more than 10 autocomplete options.
+      // Options which start with the search input value are listed first, followed by options which contain
+      // the search input value.
+      let options = navItems
+        .filter(option => option.toLowerCase().includes(newValue.toLowerCase()))
+        .map(menuNav);
+      if (options.length > 10) {
+        options = options.slice(0, 10);
+      }
+
+      // The menu is hidden if there are no options
+      setIsAutocompleteOpen(options.length > 0);
+
+      setAutocompleteOptions(options);
+    } else {
+      setIsAutocompleteOpen(false);
+    }
+    setValue(newValue);
+  };
+  // Whenever an autocomplete option is selected, set the search input value, close the menu, and put the browser
+  // focus back on the search input
+  const onSelect = e => {
+    e.stopPropagation();
+    setIsAutocompleteOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClick = event => {
+      if (
+        isAutocompleteOpen &&
+        autocompleteRef?.current &&
+        !autocompleteRef.current.contains(event.target)
+      ) {
+        // The autocomplete menu should close if the user clicks outside the menu.
+        setIsAutocompleteOpen(false);
+      } else if (
+        !isAutocompleteOpen &&
+        searchInputRef?.current &&
+        searchInputRef.current.contains(event.target)
+      ) {
+        // The autocomplete menu should open if the user clicks on the search input.
+        setIsAutocompleteOpen(true);
+      }
+    };
+    const handleMenuKeys = event => {
+      if (
+        isAutocompleteOpen &&
+        searchInputRef.current &&
+        searchInputRef.current === event.target
+      ) {
+        // the escape key closes the autocomplete menu and keeps the focus on the search input.
+        if (event.key === 'Escape') {
+          setIsAutocompleteOpen(false);
+          searchInputRef.current.focus();
+          // the up and down arrow keys move browser focus into the autocomplete menu
+        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          const firstElement = autocompleteRef.current.querySelector(
+            'li > a:not(:disabled)'
+          );
+          firstElement && firstElement.focus();
+          event.preventDefault(); // by default, the up and down arrow keys scroll the window
+          // the tab, enter, and space keys will close the menu, and the tab key will move browser
+          // focus forward one element (by default)
+        } else if (
+          event.key === 'Tab' ||
+          event.key === 'Enter' ||
+          event.key === 'Space'
+        ) {
+          setIsAutocompleteOpen(false);
+          if (event.key === 'Enter' || event.key === 'Space') {
+            event.preventDefault();
+          }
+        }
+        // If the autocomplete is open and the browser focus is in the autocomplete menu
+        // hitting tab will close the autocomplete and but browser focus back on the search input.
+      } else if (
+        isAutocompleteOpen &&
+        autocompleteRef?.current?.contains(event.target) &&
+        event.key === 'Tab'
+      ) {
+        event.preventDefault();
+        setIsAutocompleteOpen(false);
+        searchInputRef.current.focus();
+      }
+    };
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClick);
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClick);
+    };
+  }, [isAutocompleteOpen]);
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.ctrlKey && event.shiftKey && event.key === 'F') {
+        // Focus the search input on Ctrl+Shift+F
+        if (searchInputRef.current) {
+          searchInputRef.current.focus();
+        }
+      }
+    };
+
+    // Add the event listener
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Remove the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  const searchInput = (
+    <SearchInput
+      value={value}
+      placeholder={__('Search and go')}
+      onChange={onChange}
+      onClear={onClear}
+      ref={searchInputRef}
+      id="navigation-search"
+      onSearch={(_, event) => {
+        const firstItem = navItems.find(option =>
+          option.toLowerCase().includes(value.toLowerCase())
+        );
+        if (firstItem) {
+          clickAndNavigate(
+            navLinks[firstItem].onClick,
+            navLinks[firstItem].href,
+            event
+          );
+        }
+      }}
+    />
+  );
+
+  const autocomplete = (
+    <Menu
+      ouiaId="navigation-search-menu"
+      ref={autocompleteRef}
+      onSelect={onSelect}
+      className="navigation-search-menu"
+    >
+      <MenuContent>
+        <MenuList>{autocompleteOptions}</MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  return (
+    <Popper
+      trigger={searchInput}
+      popper={autocomplete}
+      isVisible={isAutocompleteOpen}
+      enableFlip={false}
+      // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience
+      appendTo={() => document.querySelector('#navigation-search')}
+    />
+  );
+};
+
+NavigationSearch.propTypes = {
+  items: PropTypes.array.isRequired,
+  clickAndNavigate: PropTypes.func.isRequired,
+};
diff --git a/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
new file mode 100644
index 00000000000..21026c18cdc
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Layout/__tests__/NavigationSearch.test.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { act, render, fireEvent } from '@testing-library/react';
+import { NavigationSearch } from '../NavigationSearch';
+import { PFitems } from '../Layout.fixtures';
+
+describe('NavigationSearch', () => {
+  const items = PFitems;
+  it('should display autocomplete options when input is typed', async () => {
+    const {
+      queryAllByRole,
+      getByPlaceholderText,
+      getByRole,
+      getByLabelText,
+    } = render(
+      <div className="pf-c-masthead pf-m-display-inline">
+        <NavigationSearch items={items} clickAndNavigate={() => {}} />
+      </div>
+    );
+    const input = getByPlaceholderText('Search and go');
+    act(() => input.focus());
+    await act(async () => {
+      await fireEvent.change(input, { target: { value: 'a' } });
+    });
+    expect(queryAllByRole('menuitem')).toHaveLength(2);
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
index 4b2e094085e..8a0ed54d651 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/__tests__/__snapshots__/LayoutSelectors.test.js.snap
@@ -133,7 +133,6 @@ Array [
         "id": "menu_item_dashboard",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -142,7 +141,6 @@ Array [
         "id": "menu_item_facts",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -151,16 +149,14 @@ Array [
         "id": "menu_item_audits",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
         "className": "mobile-active",
-        "href": "#",
+        "href": undefined,
         "id": "menu_item_reports",
         "isDivider": true,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -169,7 +165,6 @@ Array [
         "id": "menu_item_config_management",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -178,7 +173,6 @@ Array [
         "id": "menu_item_report_templates",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
     ],
@@ -194,7 +188,6 @@ Array [
         "id": "menu_item_all_hosts",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -203,16 +196,14 @@ Array [
         "id": "menu_item_create_host",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
         "className": "mobile-active",
-        "href": "#",
+        "href": undefined,
         "id": "menu_item_provisioning_setup",
         "isDivider": true,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -221,7 +212,6 @@ Array [
         "id": "menu_item_architectures",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
     ],
@@ -237,7 +227,6 @@ Array [
         "id": "menu_item_host_groups",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
       Object {
@@ -246,7 +235,6 @@ Array [
         "id": "menu_item_global_parameters",
         "isDivider": false,
         "onClick": null,
-        "preventHref": true,
         "title": undefined,
       },
     ],
diff --git a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
index 799e0753a83..324a0762eaf 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Layout/components/Toolbar/__snapshots__/HeaderToolbar.test.js.snap
@@ -110,6 +110,13 @@ exports[`HeaderToolbar rendering render HeaderToolbar 1`] = `
                       "onClick": [MockFunction],
                       "title": "Cc",
                     },
+                    Object {
+                      "href": "/ac",
+                      "id": "menu_item_ac",
+                      "isDivider": false,
+                      "onClick": [MockFunction],
+                      "title": "Ac",
+                    },
                   ],
                   "icon": "fa fa-user",
                   "name": "User",
diff --git a/webpack/assets/javascripts/react_app/components/Layout/layout.scss b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
index 68fc1111635..4566ea25b59 100644
--- a/webpack/assets/javascripts/react_app/components/Layout/layout.scss
+++ b/webpack/assets/javascripts/react_app/components/Layout/layout.scss
@@ -53,6 +53,38 @@
   .pf-m-expandable>.pf-c-nav__link{
     text-align: left;
   }
+
+  .navigation-search-menu {
+    .pf-c-menu__item {
+      padding: 5px;
+      .pf-c-menu__item-description {
+        word-break: break-word;
+      }
+    }
+    --pf-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+    --pf-c-menu--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-menu__list-item--Color: var(--pf-global--Color--100);
+    --pf-c-menu__list-item--BackgroundColor: transparent;
+    --pf-c-menu__list-item--hover--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+    --pf-c-menu__list-item--focus-within--Color: var(--pf-global--palette--blue-400);
+    --pf-c-menu__list-item--focus-within--BackgroundColor: var(
+      --pf-global--BackgroundColor--200
+    );
+
+    --pf-c-menu__item-description--Color: var(--pf-global--Color--200);
+    --pf-c-menu__list-item--hover--Color: unset;
+  }
+  #navigation-search {
+    width:calc(#{var(--pf-c-page__sidebar--Width)} - 10px);
+    margin-left: 5px;
+    .pf-c-button.pf-m-control {
+      display: none;
+    }
+  }
 }
 
 .pf-c-page {