High-level navigation enhancements

delegation-toolkit/index.md

@@ -1,13 +1,13 @@
 ---
-title: Introduction to the MetaMask Delegation Toolkit
+title: Delegation Toolkit introduction
 sidebar_label: Introduction
 description: High-level overview of the Delegation Toolkit, its benefits, and where to start in the documentation.
 sidebar_position: 1
 ---
 
 import CardList from "@site/src/components/CardList"
 
-# MetaMask Delegation Toolkit
+# Embed smart accounts using the Delegation Toolkit
 
 The MetaMask Delegation Toolkit is a [Viem](https://viem.sh/)-based collection of tools for integrating
 embedded smart contract wallets, known as [MetaMask smart accounts](concepts/smart-accounts.md),

developer-tools/dashboard/index.md

@@ -1,13 +1,14 @@
 ---
 sidebar_label: Introduction
+title: Developer dashboard introduction
 description: Documentation for using the MetaMask Developer dashboard
 sidebar_position: 1
 ---
 
 import CardList from '@site/src/components/CardList'
 import Banner from '@site/src/components/Banner'
 
-# Developer dashboard documentation
+# Introduction
 
 The [MetaMask Developer dashboard](https://developer.metamask.io/) provides developers with a
 comprehensive overview and control of their Infura service.

docusaurus.config.js

@@ -15,6 +15,9 @@ const codeTheme = themes.dracula
 const remarkCodesandbox = require('remark-codesandbox')
 const isProd = process.env.NODE_ENV === 'production'
 const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTools.html", "utf-8");
+const connectDropdown = fs.readFileSync("./src/components/NavDropdown/ConnectMetaMask.html", "utf-8");
+const embedDropdown = fs.readFileSync("./src/components/NavDropdown/EmbedMetaMask.html", "utf-8");
+const extendDropdown = fs.readFileSync("./src/components/NavDropdown/ExtendScale.html", "utf-8");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'MetaMask developer documentation',
@@ -225,33 +228,43 @@ const config = {
         respectPrefersColorScheme: true,
       },
       navbar: {
-        title: ' │ ‎ Documentation',
         logo: {
           alt: 'MetaMask logo',
           src: 'img/metamask-logo.svg',
           srcDark: 'img/metamask-logo-dark.svg',
           width: 150,
         },
+        hideOnScroll: true,
         items: [
           {
-            to: 'sdk',
-            label: 'SDK',
-          },
-          {
-            to: 'wallet',
-            label: 'Wallet API',
-          },
-          {
-            to: 'delegation-toolkit',
-            label: 'Delegation Toolkit',
+            type: 'dropdown',
+            label: 'Connect to MetaMask',
+            items: [
+              {
+                type: "html",
+                value: connectDropdown,
+              },
+            ],
           },
           {
-            to: 'snaps',
-            label: 'Snaps',
+            type: 'dropdown',
+            label: 'Embed MetaMask',
+            items: [
+              {
+                type: "html",
+                value: embedDropdown,
+              },
+            ],
           },
           {
-            to: 'services',
-            label: 'Services',
+            type: 'dropdown',
+            label: 'Extend and scale',
+            items: [
+              {
+                type: "html",
+                value: extendDropdown,
+              },
+            ],
           },
           {
             type: 'dropdown',
@@ -333,15 +346,15 @@ const config = {
                 href: 'https://github.com/MetaMask/metamask-docs',
               },
               {
-                label: 'MetaMask wallet GitHub',
+                label: 'MetaMask extension GitHub',
                 href: 'https://github.com/MetaMask/metamask-extension/',
               },
               {
                 label: 'MetaMask SDK GitHub',
                 href: 'https://github.com/MetaMask/metamask-sdk/',
               },
               {
-                label: 'MetaMask Mobile GitHub',
+                label: 'MetaMask mobile GitHub',
                 href: 'https://github.com/MetaMask/metamask-mobile',
               },
               {

sdk/connect/javascript-dynamic.md

@@ -271,4 +271,4 @@ Common issues and solutions include:
 - **Mobile experience issues:**
   - Test on actual mobile devices.
   - Verify redirect URLs.
-  - Check MetaMask Mobile installation.
+  - Check MetaMask mobile app installation.

sdk/guides/use-deeplinks.md

@@ -8,13 +8,13 @@ import TabItem from "@theme/TabItem";
 
 # Use deeplinks
 
-You can use deeplinks to directly route your users to specific, pre-configured functions inside the MetaMask Mobile app.
+You can use deeplinks to directly route your users to specific, pre-configured functions inside the MetaMask mobile app.
 For example, you can create a deeplink that lets users make one-click payments with a preset token, recipient, and amount.
 You can also convert deeplinks to QR codes, so users can scan them with a mobile device.
 
-If a user doesn't have MetaMask Mobile installed, deeplinks route the user to a landing page where they can download the app.
+If a user doesn't have the mobile app installed, deeplinks route the user to a landing page where they can download the app.
 
-This page highlights deeplinks available for MetaMask Mobile.
+This page highlights deeplinks available for the MetaMask mobile app.
 
 ## Open a dapp inside the in-app browser
 
@@ -36,7 +36,7 @@ https://metamask.app.link/dapp/app.uniswap.org
 </Tabs>
 
 
-This deeplink takes the user directly to the dapp URL in the MetaMask Mobile in-app browser.
+This deeplink takes the user directly to the dapp URL in the MetaMask mobile in-app browser.
 
 The example navigates to `app.uniswap.org` in the in-app browser.
 
@@ -64,7 +64,7 @@ https://metamask.app.link/send/0x0000000@137?value=1e16
 </Tabs>
 
 This deeplink starts the process of sending a transaction in the native currency.
-If the chain ID is specified, MetaMask Mobile automatically switches to the correct network.
+If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network.
 
 The example displays the confirmation screen to send 0.01 POL (`1e16` wei) in Polygon (chain ID `137`) to recipient address `0x0000000`.
 
@@ -97,7 +97,7 @@ https://metamask.app.link/send/0x176211869cA2b568f2A7D4EE941E073a821EE1ff@59144/
 </Tabs>
 
 This deeplink starts the process of sending a transaction in an ERC-20 token.
-If the chain ID is specified, MetaMask Mobile automatically switches to the correct network.
+If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network.
 
 The example displays the confirmation screen to send 1 USDC (`1e6` units, contract address `0x176211869cA2b568f2A7D4EE941E073a821EE1ff`) on Linea (chain ID `59144`) to recipient address `0x0000000`.
 
@@ -131,7 +131,7 @@ https://metamask.app.link/buy?chainId=59144&address=0x176211869cA2b568f2A7D4EE94
 </Tabs>
 
 This deeplink starts the on-ramp process to buy native currency or ERC-20 tokens.
-If the chain ID is specified, MetaMask Mobile automatically switches to the correct network.
+If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network.
 
 The example starts the on-ramp process to buy $100 (`amount=100`) of USDC (contract address `0x176211869cA2b568f2A7D4EE941E073a821EE1ff`) on Linea (chain ID `59144`).
 The fiat currency depends on the onboarding status of the user and the region they select.
@@ -167,7 +167,7 @@ https://metamask.app.link/sell?chainId=59144&amount=125
 </Tabs>
 
 This deeplink starts the off-ramp process to sell native currency.
-If the chain ID is specified, MetaMask Mobile automatically switches to the correct network.
+If the chain ID is specified, the MetaMask mobile app automatically switches to the correct network.
 
 The example starts the off-ramp process to sell 125 ETH (`amount=125`) on Linea (chain ID `59144`).
 

sdk/index.md

@@ -1,5 +1,6 @@
 ---
 slug: /
+title: SDK introduction
 description: Introduction page for MetaMask SDK documentation.
 keywords: [connect, MetaMask, SDK, integrate, dapp]
 ---
@@ -9,7 +10,7 @@ import CardList from '@site/src/components/CardList'
 
 # Seamlessly connect to MetaMask using the SDK
 
-MetaMask SDK enables a fast, reliable, and seamless connection from your dapp to the MetaMask extension and MetaMask Mobile.
+MetaMask SDK enables a fast, reliable, and seamless connection from your dapp to the MetaMask extension and MetaMask mobile app.
 With the SDK, you can easily onboard users and interact with their accounts on desktop or mobile, across all EVM networks.
 
 <p align="center">
@@ -29,9 +30,9 @@ With the SDK, you can easily onboard users and interact with their accounts on d
 
 MetaMask SDK gives your dapp a powerful upgrade:
 
-- **Cross-platform, cross-browser support** - One integration covers both desktop and mobile, all major browsers, and the MetaMask Mobile app—streamlining your user onboarding and eliminating edge cases.
+- **Cross-platform, cross-browser support** - One integration covers both desktop and mobile, all major browsers, and the MetaMask mobile app—streamlining your user onboarding and eliminating edge cases.
 - **Mobile connection that just works** - Say goodbye to clunky "open in in-app browser" flows.
-  The SDK enables a native connection from any mobile browser (Safari, Chrome, etc.) directly to MetaMask Mobile, using secure deeplinking and session management.
+  The SDK enables a native connection from any mobile browser (Safari, Chrome, etc.) directly to the MetaMask mobile app, using secure deeplinking and session management.
 - **Production-ready, battle-tested** - MetaMask SDK is used in high-volume dapps across DeFi, NFTs, gaming, and more—ensuring stability, speed, and a smooth developer experience.
 - **Multichain-ready by design** - Today, the SDK supports all EVM networks.
   Coming soon: Seamless connection to non-EVM chains like Solana and Bitcoin.

sdk/reference/sdk-options.md

@@ -114,9 +114,9 @@ The metadata options are:
 - `iconUrl` - URL of the dapp's icon
 
 :::tip important
-Setting `dappMetaData` creates a clear and trustworthy user experience when connecting your dapp to
-MetaMask Mobile.
-MetaMask Mobile displays this metadata in the connection modal to help users identify and verify the
+Setting `dappMetaData` creates a clear and trustworthy user experience when connecting your dapp to the
+MetaMask mobile app.
+MetaMask displays this metadata in the connection modal to help users identify and verify the
 connection request.
 :::
 
@@ -262,7 +262,7 @@ openDeeplink: (link: string) => {
 </TabItem>
 </Tabs>
 
-A function that is called to open a deeplink to the MetaMask Mobile app.
+A function that is called to open a deeplink to the MetaMask mobile app.
 
 ### `readonlyRPCMap`
 

sdk/reference/supported-platforms.md

@@ -6,9 +6,9 @@ description: Supported dapp platforms for MetaMask SDK.
 
 With MetaMask SDK, you can connect your dapp to MetaMask in the following ways:
 
-- **Desktop web dapps** - Automatically connect to the MetaMask wallet extension, or connect to MetaMask Mobile using a QR code.
+- **Desktop web dapps** - Automatically connect to the MetaMask extension, or connect to the MetaMask mobile app using a QR code.
 
-- **Mobile dapps** - The SDK generates a deeplink that takes users directly to MetaMask Mobile.
+- **Mobile dapps** - The SDK generates a deeplink that takes users directly to the MetaMask mobile app.
 
 The following table expands on the SDK's connection methods:
 

services/index.md

@@ -1,4 +1,5 @@
 ---
+title: Services introduction
 sidebar_label: Introduction
 sidebar_position: 1
 ---

snaps/index.mdx

@@ -1,14 +1,17 @@
 ---
 sidebar_label: Introduction
+title: Snaps introduction
 description: Introduction page for the MetaMask Snaps documentation.
 ---
 
 import CardList from '@site/src/components/CardList'
 import YoutubeEmbed from '@site/src/components/YoutubeEmbed'
 
-# Extend the functionality of MetaMask using Snaps
+# Create a custom mini app using Snaps
 
-Snaps is an open source system that allows anyone to safely extend the functionality of [MetaMask](https://metamask.io/), creating new web3 end user experiences. Get started building your own Snaps by [installing MetaMask Flask](get-started/install-flask.md).
+Snaps is an open source system that allows anyone to safely create a mini app that runs inside the MetaMask extension,
+enabling new web3 end user experiences.
+Get started building your own Snaps by [installing MetaMask Flask](get-started/install-flask.md).
 
 ## What can you do with a Snap?
 

snaps/learn/about-snaps/index.md

@@ -5,8 +5,8 @@
 
 # About Snaps
 
-MetaMask Snaps is an open source system that allows anyone to safely extend the functionality of
-MetaMask, creating new web3 end user experiences.
+MetaMask Snaps is an open source system that allows anyone to safely create a mini app that runs inside the MetaMask extension,
+enabling new web3 end user experiences.
 For example, a Snap can add support for different blockchain networks, add custom account types, or
 provide additional functionality using its own APIs.
 This allows MetaMask to be used with a far more diverse set of protocols, dapps, and services.

src/components/CallToAction/CallToAction.module.scss

@@ -1,14 +1,14 @@
 .call-to-action {
   position: relative;
-  padding: 1.5rem 0 6.4rem;
+  padding: 2rem 0 6.4rem;
   overflow: hidden;
 
   @include bp(tablet) {
-    padding-top: 2rem;
+    padding-top: 4rem;
   }
 
   @include bp(desktop) {
-    padding: 3rem 0 8rem;
+    padding: 5rem 0 8rem;
   }
 }
 

src/components/Card.tsx

@@ -15,13 +15,14 @@ export type CardItem = {
   href: string
   description?: string | ReactNode
   theme?: string
+  buttonIcon?: 'arrow-right' | 'external-arrow'
 }
 
-export default function Card({ title, href, description, theme }: CardItem) {
+export default function Card({ title, href, description, theme, buttonIcon = "arrow-right" }: CardItem) {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
-    <li className={clsx(styles['item'], isHovered && styles['active'])}>
+    <div className={clsx(styles['item'], isHovered && styles['active'])}>
       <CutOffCorners size="s">
         <div
           className={styles['holder']}
@@ -49,7 +50,7 @@ export default function Card({ title, href, description, theme }: CardItem) {
                   as="button"
                   label={false}
                   type={theme === 'dark' ? 'secondary' : 'primary'}
-                  icon="arrow-right"
+                  icon={buttonIcon}
                   className={styles['button']}
                   style={
                     theme === 'dark'
@@ -68,6 +69,6 @@ export default function Card({ title, href, description, theme }: CardItem) {
           </Link>
         </div>
       </CutOffCorners>
-    </li>
+    </div>
   )
 }