diff --git a/src/components/Navegation.tsx b/src/components/Navegation.tsx
new file mode 100644
index 0000000..5bb9011
--- /dev/null
+++ b/src/components/Navegation.tsx
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import "./Navegation.modules.scss";
+
+export const Navegation = () => {
+  const [isActive, setIsActive] = useState(false);
+
+  const handlechange = () => {
+    setIsActive((isActive) => !isActive);
+  };
+
+  let toggleClassCheck = isActive ? "active" : "";
+
+  return (
+    <>
+      <nav className="MenuRoutes">
+        <ul className="links_wrapper">
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/"}> Sobre </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Pagamentos"}> Formas de Pagamento </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Entrega"}> Entrega </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Segurança"}> Segurança e Privacidade </NavLink>
+          </li>
+          <li className={`Title_links ${toggleClassCheck} `}>
+            <NavLink to={"/Contatos"}> Contatos </NavLink>
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+};