[Support] Updates to navigation in support docs (#24957)

* Updates to navigation in support docs

* Updates navigation

Author: angelampcosta

src/content/docs/cache/how-to/edge-browser-cache-ttl/set-browser-ttl.mdx

@@ -6,6 +6,8 @@ sidebar:
 
 ---
 
+import { DashButton } from "~/components";
+
 Specify a time for a visitor’s Browser Cache TTL to accelerate the page load for repeat visitors to your website. To configure cache duration within Cloudflare’s data centers, refer to [Edge Cache TTL](/cache/how-to/cache-rules/settings/#edge-ttl).
 
 By default, Cloudflare honors the cache expiration set in your `Expires` and `Cache-Control` headers. Cloudflare overrides any `Cache-Control` or `Expires` headers with values set via the **Browser Cache TTL** option under **Caching** on your dashboard if:
@@ -27,8 +29,10 @@ If you modify cached assets, the new asset is not displayed to repeat visitors b
 
 :::
 
-1. Log in to your Cloudflare dashboard.
-2. Select **Caching**.
-3. Under **Browser Cache TTL**, select the drop-down menu to select the desired cache expiration time.
+1. In the Cloudflare dashboard, go to the **Caching** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Under **Browser Cache TTL**, select the desired cache expiration time from the drop-down menu.
 
 The **Respect Existing Headers** option tells Cloudflare to honor the settings in the `Cache-Control` headers from your origin web server.

src/content/docs/support/third-party-software/content-management-system-cms/caching-html-with-drupal.mdx

@@ -5,6 +5,8 @@ title: Caching HTML with Drupal
 
 ---
 
+import { DashButton } from "~/components";
+
 ## Overview
 
 :::note
@@ -20,27 +22,27 @@ You can [cache HTML of inactive users](https://blog.cloudflare.com/caching-anon
 
 To avoid browser cache collisions, you must first enable Bypass Cache on Cookie in the Cloudflare dashboard. To do this,
 
-1\. Log in to your Cloudflare account.
+1. In the Cloudflare dashboard, go to the **Caching** page.
 
-2\. Click on the **Caching** app.
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
 
-3\. Scroll down to **Browser Cache TTL** and choose **Respect Existing Headers**.
+2. Under **Browser Cache TTL**, choose **Respect Existing Headers**.
 
-Now, you can configure the *Bypass Cache on Cookie* setting using Cloudflare **Page Rules**. 
+Now, you can configure the *Bypass Cache on Cookie* setting using Cloudflare **Cache Rules**. 
 
 ***
 
 ## Set Bypass Cache on Cookie
 
-When the *Bypass Cache on Cookie* page rule matches the criteria we set, Cloudflare will cache static images and other files, without caching HTML. To configure *Bypass Cache on Cookie* using **Page Rules**, 
+When the *Bypass Cache on Cookie* page rule matches the criteria we set, Cloudflare will cache static images and other files, without caching HTML. To configure *Bypass Cache on Cookie* using **Cache Rules**, 
 
-1\. Log in to your Cloudflare account.
+1. In the Cloudflare dashboard, go to the **Rules** page.
 
-2\. Go to **Rules > Page Rules**.
+   <DashButton url="/?to=/:account/:zone/rules/page-rules" />
 
-3\. Click the **Create Page Rule** button and enter your domain. In the example below, the domain is [www.orangeclouded.com](http://www.orangeclouded.com). 
+2. Select **Create Page Rule** button and enter your domain. In the example below, the domain is [www.orangeclouded.com](http://www.orangeclouded.com). 
 
-4\. Configure the Page Rules settings as follows:
+3. Configure the Page Rules settings as follows:
 
 * use the *\** wildcard operator on the Drupal installation path to match the entire domain
 * set the Cache Level to Cache Everything

src/content/docs/support/third-party-software/content-management-system-cms/caching-static-html-with-wordpresswoocommerce.mdx

@@ -5,6 +5,8 @@ title: Caching Static HTML with WordPress/WooCommerce
 
 ---
 
+import { DashButton } from "~/components";
+
 ## Overview
 
 :::note
@@ -22,21 +24,23 @@ Enterprise Cloudflare customers can use *Custom Cache Keys* to take their perf
 
 Before starting - be sure that Cloudflare is set to respect `Cache-Control` headers from your origin web server; otherwise, you may find `Cache-Control` headers are overridden by Cloudflare with the value set in the **Browser Cache TTL** option. To set the **Respect Existing Headers** option:
 
-1. Log into your Cloudflare account.
-2. Click the **Caching** app.
-3. Scroll down to **Browser Cache TTL**, and select the **Respect Existing Headers** value.
+1. In the Cloudflare dashboard, go to the **Caching** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Under **Browser Cache TTL**, select the **Respect Existing Headers** value.
 
 ***
 
 ## Cache Static HTML with Cloudflare Cache Rules
 
-1\. Log in to your Cloudflare account.
-
-2\. Go to **Rules >** **Overview** and select **Create Cache Rule**.
+1. In the Cloudflare dashboard, go to the **Caching** page.
 
-3\. Set the cache rule to match your WordPress installation path. If your site is at [https://www.example.com](https://www.example.com), the rule would be [https://www.example.com](https://www.example.com/).
+   <DashButton url="/?to=/:account/:zone/caching/cache-rules" />
 
-4\. Select the appropriate settings to cache static HTML:
+2. Select **Create rule**.
+3. Set the cache rule to match your WordPress installation path. If your site is at [https://www.example.com](https://www.example.com), the rule would be [https://www.example.com](https://www.example.com/).
+4. Select the appropriate settings to cache static HTML:
 
 * *Eligible for cache* instructs Cloudflare to cache static HTML.
 * When the *Bypass Cache on Cookie* rule matches the criteria you set, Cloudflare won't cache HTML ([though static images and other files will still be cached](/cache/concepts/default-cache-behavior/)). Depending on whether you're using raw WordPress, or WooCommerce, you should use one of the configurations below:
@@ -54,6 +58,6 @@ Before starting - be sure that Cloudflare is set to respect `Cache-Control` he
 
 * Finally, setting *Edge Cache TTL* will define the maximum period of time Cloudflare should keep cached files before getting them back from the origin web server. Even after setting a long Edge Cache TTL time, you can still [manually clear the cache](https://support.cloudflare.com/hc/en-us/articles/200169246-How-do-I-purge-my-cache-) or use our WordPress plugin to automatically manage cache purging.
 
-5\. Click **Save and Deploy** to finish. 
+5. Select **Save and Deploy**.
 
 Additionally, by using the [*Automatic Cache Management* feature of the Cloudflare WordPress plugin](https://support.cloudflare.com/hc/en-us/articles/115002708027-What-does-Automatic-Cache-Management-in-the-Cloudflare-Plugin-do-), you are able to automatically purge the cache for your site after your site changes (i.e. changing/customizing your theme or editing, deleting or creating a post, attachment or page).

src/content/docs/support/third-party-software/e-commerce/caching-static-html-with-magento-business-and-enterprise-only.mdx

@@ -5,6 +5,8 @@ title: Caching Static HTML with Magento (Business and Enterprise only)
 
 ---
 
+import { DashButton } from "~/components";
+
 ## Overview
 
 :::note
@@ -22,17 +24,19 @@ Before logging in to the Magento admin panel or adding something to a shopping c
 
 To cache static HTML using Cloudflare Page Rules:
 
-1\. Log in to your Cloudflare account.
+1. In the Cloudflare dashboard, go to the **Caching** page.
 
-2\. Click on the **Caching** app. 
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
 
-3\. Scroll down to **Browser Cache TTL** option and choose **Respect Existing Headers**.
+2. Under **Browser Cache TTL**, choose **Respect Existing Headers**.
 
 With this setting in place, you can set the necessary Page Rules to cache anonymize page visits.
 
-4\. Go to **Rules >** **Page Rules**.
+3. In the Cloudflare dashboard, go to the **Rules** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/page-rules" />
 
-5\. Click the **Create Page Rule** button and enter your domain. In the example below, the domain is `www.orangeclouded.com`.
+4. Select **Create Page Rule** and enter your domain. In the example below, the domain is `www.orangeclouded.com`.
 
 * *Cache Everything* will instruct Cloudflare to cache static HTML.
 * When the *Bypass Cache on Cookie* rule matches the criteria we set, Cloudflare won't cache HTML ([though static images and other files will still be cached](/cache/concepts/default-cache-behavior/)). Depending on whether you're using Magento 1 or Magento 2, you will need a different rule:
@@ -43,7 +47,7 @@ With this setting in place, you can set the necessary Page Rules to cache anonym
 
 ![The Create a Page Rule dialog with settings to instruct Cloudflare to cache static HTML, the Bypass Cache on cookie rule instructing Cloudflare not to cache HTML while static images and other files are still cached, and the Edge Cache TTL set to a month.](~/assets/images/support/hc-import-page_rules_caching_static_html_with_magento.png)
 
-6\. Click **Save and Deploy**.
+5. Select **Save and Deploy**.
 
 :::note
 

src/content/docs/support/third-party-software/others/configure-cloudflare-and-heroku-over-https.mdx

@@ -4,7 +4,7 @@ source: https://support.cloudflare.com/hc/en-us/articles/205893698-Configure-Clo
 title: Configure Cloudflare and Heroku over HTTPS
 ---
 
-import { Example } from "~/components";
+import { Example, DashButton  } from "~/components";
 
 ## Overview
 
@@ -26,7 +26,11 @@ Below, you will need to add DNS records for a subdomain and the apex domain (als
 
 ### Step 2a - Add a subdomain
 
-To start, log in to your Cloudflare account, navigate to the **DNS** app and add a 'www' *CNAME* record that points to the custom domain (also known as *DNS target*) that you obtained in Step 1 above for your subdomain.
+In the Cloudflare dashboard, go to the **DNS** page.
+
+   <DashButton url="/?to=/:account/:zone/dns" />
+
+Add a 'www' *CNAME* record that points to the custom domain (also known as *DNS target*) that you obtained in Step 1 above for your subdomain.
 
 <Example>