diff --git a/examples/catalog/components/home/Nav.tsx b/examples/catalog/components/home/Nav.tsx
index ddaf3ca6..534eab7b 100644
--- a/examples/catalog/components/home/Nav.tsx
+++ b/examples/catalog/components/home/Nav.tsx
@@ -1,4 +1,4 @@
-import { Nav } from 'portal';
+import Template from './NavTemplate';
 
 const NavBar: React.FC = () => {
   const navMenu = [
@@ -8,7 +8,7 @@ const NavBar: React.FC = () => {
     { title: 'GitHub', path: 'https://github.com/datopian/portal.js' },
   ];
 
-  return <Nav logo={'/images/logo.svg'} navMenu={navMenu} />;
+  return <Template menu={navMenu} logo={'/images/logo.svg'} />;
 };
 
 export default NavBar;
diff --git a/examples/catalog/components/home/NavTemplate.tsx b/examples/catalog/components/home/NavTemplate.tsx
new file mode 100644
index 00000000..217ee377
--- /dev/null
+++ b/examples/catalog/components/home/NavTemplate.tsx
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import { Disclosure } from '@headlessui/react';
+import { SearchIcon } from '@heroicons/react/solid';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
+
+const NavBar: React.FC<{ menu: any; logo: string }> = ({ menu, logo }) => {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    router.push({
+      pathname: '/search',
+      query: { q: searchQuery },
+    });
+  };
+
+  return (
+    <Disclosure as="nav" className="bg-white shadow">
+      {({ open }) => (
+        <>
+          <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
+            <div className="flex justify-between h-16">
+              <div className="flex px-2 lg:px-0">
+                <div className="flex-shrink-0 flex items-center">
+                  <a href="/">
+                    <img
+                      className="block lg:hidden h-8 w-auto"
+                      src={logo}
+                      alt="Portal.js"
+                    />
+                    <img
+                      className="hidden lg:block h-8 w-auto"
+                      src={logo}
+                      alt="Portal.js"
+                    />
+                  </a>
+                </div>
+                <div className="hidden lg:ml-6 lg:flex lg:space-x-8">
+                  {/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
+                  {menu.map((item, index) => (
+                    <a
+                      key={'menu-link' + index}
+                      href={item.path}
+                      className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                    >
+                      {item.title}
+                    </a>
+                  ))}
+                </div>
+              </div>
+              <div className="flex-1 flex items-center justify-center px-2 lg:ml-6 lg:justify-end">
+                <div className="max-w-lg w-full lg:max-w-xs">
+                  <label htmlFor="search" className="sr-only">
+                    Search
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <SearchIcon
+                        className="h-5 w-5 text-gray-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <form
+                      onSubmit={(e) => handleSubmit(e)}
+                      className="items-center"
+                    >
+                      <input
+                        id="search"
+                        type="search"
+                        name="search"
+                        onChange={(e) => {
+                          setSearchQuery(e.target.value);
+                        }}
+                        placeholder="Search"
+                        aria-label="Search"
+                        className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                      />
+                    </form>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center lg:hidden">
+                {/* Mobile menu button */}
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="lg:hidden">
+            <div className="pt-2 pb-3 space-y-1">
+              {/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" */}
+              {menu.map((item, index) => (
+                <a
+                  key={'mobile-menu-link' + index}
+                  href={item.path}
+                  className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
+                >
+                  {item.title}
+                </a>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+};
+
+export default NavBar;