High-level navigation enhancements (#2074)

* Migrate gator docs

* fixes

* swizzle desktop sidebar

* update codeowners

* Add initial dropdown component.

Signed-off-by: bgravenorst <[email protected]>

* Add front page.

Signed-off-by: bgravenorst <[email protected]>

* Update SDK connect guides

* Fix category sections.

Signed-off-by: bgravenorst <[email protected]>

* Inital dropdown style changes.

Signed-off-by: bgravenorst <[email protected]>

* Update dropdown behaviour.

Signed-off-by: bgravenorst <[email protected]>

* Add link to Embedded wallets (#2069)

* Add embedded wallets.

Signed-off-by: bgravenorst <[email protected]>

* Stylesheet updates.

Signed-off-by: bgravenorst <[email protected]>

* Apply feedback.

Signed-off-by: bgravenorst <[email protected]>

---------

Signed-off-by: bgravenorst <[email protected]>

* Minor update. (#2070)

Signed-off-by: bgravenorst <[email protected]>

* Update react-native.md (#2068)

* Update react-native.md

Expo Demo repo had been deleted and was a broken link.

* Update sdk/quickstart/react-native.md

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update sdk/quickstart/react-native.md

Co-authored-by: Alexandra Carrillo <[email protected]>

* Update react-native.md

---------

Co-authored-by: Alexandra Carrillo <[email protected]>

* chore(deps): bump tar-fs from 1.16.4 to 1.16.5 in the npm_and_yarn group (#2072)

Bumps the npm_and_yarn group with 1 update: [tar-fs](https://github.com/mafintosh/tar-fs).


Updates `tar-fs` from 1.16.4 to 1.16.5
- [Commits](https://github.com/mafintosh/tar-fs/commits)

---
updated-dependencies:
- dependency-name: tar-fs
  dependency-version: 1.16.5
  dependency-type: indirect
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Alexandra Carrillo <[email protected]>

* fixes

* Add front page.

Signed-off-by: bgravenorst <[email protected]>

* Remove dup.

Signed-off-by: bgravenorst <[email protected]>

* High-level navigation changes

* add get started button

* updates to sdk intro + redirects

* add api reference docs and fix links

* minor adjustments

* address feedback

* move llm prompt and update copy

* change file names (delegation-toolkit) and fix links

* fix lint error

* Add product banner

* update icons

* minor fix

* fix version ordering and color mode

* hide top nav + enhancements

* fix embedded wallets sdk dropdown

* fix sidebar bug

* address reviewer feedback

---------

Signed-off-by: bgravenorst <[email protected]>
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: bgravenorst <[email protected]>
Co-authored-by: Byron Gravenorst <[email protected]>
Co-authored-by: RobItu <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: 4 people

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?