diff --git a/src/Header/Header.jsx b/src/Header/Header.jsx
index 7dd3f10a..54c73d64 100644
--- a/src/Header/Header.jsx
+++ b/src/Header/Header.jsx
@@ -87,7 +87,7 @@ export class Header extends Component {
 				<>
 					<span
 						id="scrim"
-						className={this.state.scrimIsActive && styles.scrim}
+						className={this.state.scrimIsActive ? styles.scrim : undefined}
 						aria-hidden="true"
 					/>
 
diff --git a/src/Header/Nav/Dropdown/Components/BNF.jsx b/src/Header/Nav/Dropdown/Components/BNF.jsx
new file mode 100644
index 00000000..610afc31
--- /dev/null
+++ b/src/Header/Nav/Dropdown/Components/BNF.jsx
@@ -0,0 +1,127 @@
+import React from "react";
+import { Button } from "@nice-digital/nds-button";
+import { Grid, GridItem } from "@nice-digital/nds-grid";
+import styles from "./Components.module.scss";
+import services from "../../../../services.json";
+
+export function BNF() {
+	const baseUrl = services.external.find(
+		(service) => service.text == "BNF"
+	).href;
+
+	const drugsAtoZurl = baseUrl + "drug/#";
+
+	const drugsAtoZ = [
+		{ letter: "A", link: true },
+		{ letter: "B", link: true },
+		{ letter: "C", link: true },
+		{ letter: "D", link: true },
+		{ letter: "E", link: true },
+		{ letter: "F", link: true },
+		{ letter: "G", link: true },
+		{ letter: "H", link: true },
+		{ letter: "I", link: true },
+		{ letter: "J", link: true },
+		{ letter: "K", link: true },
+		{ letter: "L", link: true },
+		{ letter: "M", link: true },
+		{ letter: "N", link: true },
+		{ letter: "O", link: true },
+		{ letter: "P", link: true },
+		{ letter: "Q", link: true },
+		{ letter: "R", link: true },
+		{ letter: "S", link: true },
+		{ letter: "T", link: true },
+		{ letter: "U", link: true },
+		{ letter: "V", link: true },
+		{ letter: "W", link: true },
+		{ letter: "X", link: true },
+		{ letter: "Y", link: true },
+		{ letter: "Z", link: true },
+	];
+
+	return (
+		<section aria-label="BNF - dropdown navigation">
+			<h2 className="mt--0">BNF</h2>
+			<p>
+				The BNF aims to provide prescribers, pharmacists, and other healthcare
+				professionals with sound up-to-date information about the use of
+				medicines.
+			</p>
+			<Button variant="primary" to={baseUrl}>
+				View BNF
+			</Button>
+
+			<h3 className="mt--d">Drugs A to Z</h3>
+			<ol className={styles.alphabet}>
+				{drugsAtoZ.map(({ letter, link }) => {
+					return (
+						<li
+							key={letter}
+							className={`${styles.letter} ${link ? "" : styles.chunkyLetter}`}
+						>
+							{link ? (
+								<a href={`${drugsAtoZurl}${letter}`}>{letter}</a>
+							) : (
+								<span>{letter}</span>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">Browse A to Z by</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}interaction/`}>Interactions</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}treatment-summary/`}>Treatment summaries</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={6}>
+					<h3 className="mt--0">Browse by type</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href={`${baseUrl}dental-practitioners-formulary/`}>
+								Dental practitioners' formulary
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}nurse-prescribers-formulary/`}>
+								Nurse prescribers' formulary
+							</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}guidance/`}>Medicines guidance</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}wound-management/`}>Wound management</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}medical-devices/`}>Medical devices</a>
+						</li>
+						<li>
+							<a href={`${baseUrl}borderline-substance-taxonomy/`}>
+								Borderline substances
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3 className="mt--0">What’s new</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href={`${baseUrl}about/changes.html`}>Latest BNF</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href={`${baseUrl}about/`}>About BNF</a>
+		</section>
+	);
+}
diff --git a/src/Header/Nav/Dropdown/Components/BNFc.jsx b/src/Header/Nav/Dropdown/Components/BNFc.jsx
new file mode 100644
index 00000000..dc364b63
--- /dev/null
+++ b/src/Header/Nav/Dropdown/Components/BNFc.jsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { Button } from "@nice-digital/nds-button";
+import { Grid, GridItem } from "@nice-digital/nds-grid";
+import styles from "./Components.module.scss";
+
+const drugsAtoZ = [
+	{ letter: "A", link: "https://bnfc.nice.org.uk/drug/#A" },
+	{ letter: "B", link: "https://bnfc.nice.org.uk/drug/#B" },
+	{ letter: "C", link: "https://bnfc.nice.org.uk/drug/#C" },
+	{ letter: "D", link: "https://bnfc.nice.org.uk/drug/#D" },
+	{ letter: "E", link: "https://bnfc.nice.org.uk/drug/#E" },
+	{ letter: "F", link: "https://bnfc.nice.org.uk/drug/#F" },
+	{ letter: "G", link: "https://bnfc.nice.org.uk/drug/#G" },
+	{ letter: "H", link: "https://bnfc.nice.org.uk/drug/#H" },
+	{ letter: "I", link: "https://bnfc.nice.org.uk/drug/#I" },
+	{ letter: "J", link: "https://bnfc.nice.org.uk/drug/#J" },
+	{ letter: "K", link: "https://bnfc.nice.org.uk/drug/#K" },
+	{ letter: "L", link: "https://bnfc.nice.org.uk/drug/#L" },
+	{ letter: "M", link: "https://bnfc.nice.org.uk/drug/#M" },
+	{ letter: "N", link: "https://bnfc.nice.org.uk/drug/#N" },
+	{ letter: "O", link: "https://bnfc.nice.org.uk/drug/#O" },
+	{ letter: "P", link: "https://bnfc.nice.org.uk/drug/#P" },
+	{ letter: "Q", link: null },
+	{ letter: "R", link: "https://bnfc.nice.org.uk/drug/#R" },
+	{ letter: "S", link: "https://bnfc.nice.org.uk/drug/#S" },
+	{ letter: "T", link: "https://bnfc.nice.org.uk/drug/#T" },
+	{ letter: "U", link: "https://bnfc.nice.org.uk/drug/#U" },
+	{ letter: "V", link: "https://bnfc.nice.org.uk/drug/#V" },
+	{ letter: "W", link: "https://bnfc.nice.org.uk/drug/#W" },
+	{ letter: "X", link: null },
+	{ letter: "Y", link: null },
+	{ letter: "Z", link: null },
+];
+
+export function BNFc() {
+	return (
+		<section aria-label="BNFc - dropdown navigation">
+			<h2 className="mt--0">BNFc</h2>
+			<p>Everything NICE says on a topic in an interactive flowchart</p>
+			<Button variant="primary" to="https://bnfc.nice.org.uk/">
+				Explore BNFc
+			</Button>
+
+			<h3>Drugs A to Z</h3>
+			<ol className={styles.alphabet}>
+				{drugsAtoZ.map((letter) => {
+					return (
+						<li
+							key={letter.letter}
+							className={`${styles.letter} ${
+								letter.link == null ? styles.chunkyLetter : ""
+							}`}
+						>
+							{letter.link == null ? (
+								<span>{letter.letter}</span>
+							) : (
+								<a href={letter.link}>{letter.letter}</a>
+							)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<Grid gutter="loose">
+				<GridItem cols={12} md={3}>
+					<h3>Browse A to Z by</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/interaction/">Interactions</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/treatment-summary/">
+								Treatment summaries
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={6}>
+					<h3>Browse by type</h3>
+					<ul className={styles.listUnstyled} style={{ columnCount: 2 }}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/dental-practitioners-formulary/">
+								Dental practitioners' formulary
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/nurse-prescribers-formulary/">
+								Nurse prescribers' formulary
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/guidance/">
+								Medicines guidance
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/medical-devices/">
+								Medical devices
+							</a>
+						</li>
+						<li>
+							<a href="https://bnfc.nice.org.uk/borderline-substance-taxonomy/">
+								Borderline substances
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+				<GridItem cols={12} md={3}>
+					<h3>Latest</h3>
+					<ul className={styles.listUnstyled}>
+						<li>
+							<a href="https://bnfc.nice.org.uk/about/changes.html">
+								What's changed
+							</a>
+						</li>
+					</ul>
+				</GridItem>
+			</Grid>
+			<hr />
+			<a href="https://bnfc.nice.org.uk/about/">About BNF</a>
+		</section>
+	);
+}
diff --git a/src/Header/Nav/Dropdown/Components/Components.module.scss b/src/Header/Nav/Dropdown/Components/Components.module.scss
index 1873c1e6..65beb266 100644
--- a/src/Header/Nav/Dropdown/Components/Components.module.scss
+++ b/src/Header/Nav/Dropdown/Components/Components.module.scss
@@ -7,3 +7,82 @@
   max-width: none; // To override max-width of 66ch set on lists
   padding: 0;
 }
+
+.alphabet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: rem($nds-spacing-small);
+  list-style: none;
+  margin: rem(0 0 $nds-spacing-large);
+  max-width: 90%;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.chunkyLetter {
+  @include nds-font-size(h4);
+  color: $nds-colour-nice-dark-grey;
+
+  span {
+    width: 3.95ch;
+  }
+}
+
+.letter {
+  display: inline-block;
+  font-weight: bold;
+  margin: rem(0 $nds-spacing-small $nds-spacing-small 0);
+
+  a,
+  span {
+    display: block;
+    padding: rem($nds-spacing-small 0);
+    text-align: center;
+  }
+
+  a {
+    background: $nds-colour-true-white;
+    border: 1px solid $nds-colour-border;
+    text-decoration: none;
+    width: 4.95ch;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.btn {
+  &:hover,
+  &:focus,
+  &:active {
+    border: em(1px) solid $nds-colour-btn-primary-text !important;
+  }
+
+  &--cta {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-cta-text !important;
+    }
+  }
+
+  &--secondary {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-secondary-text !important;
+    }
+  }
+
+  &--inverse {
+    &:hover,
+    &:focus,
+    &:active {
+      border: em(1px) solid $nds-colour-btn-inverse-text !important;
+    }
+  }
+}
diff --git a/src/Header/Nav/Dropdown/Components/index.jsx b/src/Header/Nav/Dropdown/Components/index.jsx
index 0d773d2b..e7dc868b 100644
--- a/src/Header/Nav/Dropdown/Components/index.jsx
+++ b/src/Header/Nav/Dropdown/Components/index.jsx
@@ -1,2 +1,4 @@
 export { Guidance } from "./Guidance";
 export { More } from "./More";
+export { BNF } from "./BNF";
+export { BNFc } from "./BNFc";
diff --git a/src/Header/Nav/Dropdown/Dropdown.jsx b/src/Header/Nav/Dropdown/Dropdown.jsx
index 3032ef3c..b944eb93 100644
--- a/src/Header/Nav/Dropdown/Dropdown.jsx
+++ b/src/Header/Nav/Dropdown/Dropdown.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styles from "./Dropdown.module.scss";
-import { Guidance, More } from "./Components/";
+import { Guidance, More, BNF, BNFc } from "./Components/";
 import Remove from "@nice-digital/icons/lib/Remove";
 
 export function Dropdown({
@@ -15,6 +15,8 @@ export function Dropdown({
 	const components = {
 		Guidance: Guidance,
 		More: More,
+		BNF: BNF,
+		BNFc: BNFc,
 	};
 	const Component = components[component];
 
diff --git a/src/Header/Nav/Nav.test.jsx b/src/Header/Nav/Nav.test.jsx
index 2e261155..08671655 100644
--- a/src/Header/Nav/Nav.test.jsx
+++ b/src/Header/Nav/Nav.test.jsx
@@ -18,6 +18,7 @@ describe("Nav", () => {
 		isExpanded: false,
 		accountsData: null,
 		service: null,
+		handleScrim: () => {},
 	};
 	const externalServices = services.external;
 
diff --git a/src/Header/Nav/__snapshots__/Nav.test.jsx.snap b/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
index 07ad3acd..f61b16b1 100644
--- a/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
+++ b/src/Header/Nav/__snapshots__/Nav.test.jsx.snap
@@ -57,6 +57,7 @@ exports[`Nav Matches snapshot with no accounts links 1`] = `
     >
       <NavLinks
         currentService={null}
+        handleScrim={[Function]}
         servicesToDisplay={
           Array [
             Object {
@@ -121,6 +122,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
 <Nav
   accountsData={null}
   additionalSubMenuItems={Array []}
+  handleScrim={[Function]}
   isExpanded={false}
   service="link2"
 >
@@ -137,6 +139,7 @@ exports[`Nav Matches snapshot with sub links for selected external service 1`] =
       >
         <NavLinks
           currentService="link2"
+          handleScrim={[Function]}
           servicesToDisplay={
             Array [
               Object {
@@ -287,6 +290,7 @@ exports[`Nav internalServices Matches snapshot with sub links for selected inter
 <Nav
   accountsData={null}
   additionalSubMenuItems={Array []}
+  handleScrim={[Function]}
   isExpanded={false}
   service="internal1"
 >
@@ -303,6 +307,7 @@ exports[`Nav internalServices Matches snapshot with sub links for selected inter
       >
         <NavLinks
           currentService="internal1"
+          handleScrim={[Function]}
           servicesToDisplay={
             Array [
               Object {
diff --git a/src/Header/__snapshots__/Header.test.jsx.snap b/src/Header/__snapshots__/Header.test.jsx.snap
index de54cc46..72b86d44 100644
--- a/src/Header/__snapshots__/Header.test.jsx.snap
+++ b/src/Header/__snapshots__/Header.test.jsx.snap
@@ -1,95 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header Matches snapshot 1`] = `
-<div
-  className="header"
->
-  <header
-    aria-label="Site header"
+<Fragment>
+  <span
+    aria-hidden="true"
+    id="scrim"
+  />
+  <div
+    className="header"
   >
-    <ul
-      aria-label="Accessibility links"
-      className="a11yLinks"
+    <header
+      aria-label="Site header"
     >
-      <li>
-        <SkipLink
-          to="#content-start"
-        >
-          Skip to content
-        </SkipLink>
-      </li>
-      <li>
-        <SkipLink
-          to="https://www.nice.org.uk/accessibility"
-        >
-          Accessibility help
-        </SkipLink>
-      </li>
-    </ul>
-    <div
-      className="container"
-    >
-      <a
-        aria-label="Home"
-        className="home"
-        href="https://www.nice.org.uk/"
-        onClick={[Function]}
+      <ul
+        aria-label="Accessibility links"
+        className="a11yLinks"
       >
-        <SvgLogoFull
-          className="icon"
-          height={null}
-          width={null}
-        />
-      </a>
+        <li>
+          <SkipLink
+            to="#content-start"
+          >
+            Skip to content
+          </SkipLink>
+        </li>
+        <li>
+          <SkipLink
+            to="https://www.nice.org.uk/accessibility"
+          >
+            Accessibility help
+          </SkipLink>
+        </li>
+      </ul>
       <div
-        className="wrapper"
+        className="container"
       >
-        <div
-          className="search"
-        >
-          <Search
-            onNavigating="onNavigatingHandler"
-            placeholder="Search NICE…"
-            query=""
-            skipLinkId="content-start"
-            url="/search"
-          />
-        </div>
-        <button
-          aria-controls="header-menu"
-          aria-expanded={false}
-          aria-haspopup="menu"
-          aria-label="Expand site menu"
-          className="mobileMenuBtn"
-          id="header-menu-button"
+        <a
+          aria-label="Home"
+          className="home"
+          href="https://www.nice.org.uk/"
           onClick={[Function]}
-          type="button"
         >
-          Menu
-        </button>
+          <SvgLogoFull
+            className="icon"
+            height={null}
+            width={null}
+          />
+        </a>
         <div
-          className="account"
+          className="wrapper"
         >
-          <Account
-            accountsData={null}
-            environment="live"
-            isLoggedIn={false}
-            onLoginStatusChecked={[Function]}
-            provider="niceAccounts"
-          />
+          <div
+            className="search"
+          >
+            <Search
+              onNavigating="onNavigatingHandler"
+              placeholder="Search NICE…"
+              query=""
+              skipLinkId="content-start"
+              url="/search"
+            />
+          </div>
+          <button
+            aria-controls="header-menu"
+            aria-expanded={false}
+            aria-haspopup="menu"
+            aria-label="Expand site menu"
+            className="mobileMenuBtn"
+            id="header-menu-button"
+            onClick={[Function]}
+            type="button"
+          >
+            Menu
+          </button>
+          <div
+            className="account"
+          >
+            <Account
+              accountsData={null}
+              environment="live"
+              isLoggedIn={false}
+              onLoginStatusChecked={[Function]}
+              provider="niceAccounts"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <Nav
-      accountsLinks={null}
-      additionalSubMenuItems={Array []}
-      isExpanded={false}
-      onNavigating="onNavigatingHandler"
-      service={null}
-      skipLinkId="content-start"
-    />
-  </header>
-  <CoronaMessage />
-  <OldIEMessage />
-</div>
+      <Nav
+        accountsLinks={null}
+        additionalSubMenuItems={Array []}
+        handleScrim={[Function]}
+        isExpanded={false}
+        onNavigating="onNavigatingHandler"
+        service={null}
+        skipLinkId="content-start"
+      />
+    </header>
+    <CoronaMessage />
+    <OldIEMessage />
+  </div>
+</Fragment>
 `;
diff --git a/src/services.json b/src/services.json
index a4d77aa1..61bdbfe3 100644
--- a/src/services.json
+++ b/src/services.json
@@ -43,7 +43,8 @@
       "abbreviation": true,
       "title": "British National Formulary",
       "id": "bnf",
-      "dropdown": false,
+      "dropdown": true,
+      "dropdownComponent": "BNF",
       "links": [
         {
           "text": "Drugs",
@@ -73,7 +74,8 @@
       "abbreviation": true,
       "title": "British National Formulary for Children",
       "id": "bnfc",
-      "dropdown": false,
+      "dropdown": true,
+      "dropdownComponent": "BNFc",
       "links": [
         {
           "text": "Drugs",