diff --git a/packages/ui-toolkit/src/styleguide/bottomNav.js b/packages/ui-toolkit/src/styleguide/bottomNav.js
index 17331ca9..5d98c6d4 100644
--- a/packages/ui-toolkit/src/styleguide/bottomNav.js
+++ b/packages/ui-toolkit/src/styleguide/bottomNav.js
@@ -15,30 +15,63 @@ const Link = styled.a`
   text-decoration: none;
 `;
 
-export default props => {
-  const items = props.items.map(item => item.name);
-  const selectedIndex =
-    items.indexOf(props.link) > -1 ? items.indexOf(props.link) : 0;
+const previousAndNextSections = data => {
+  const items = data.items;
+  const link = data.link;
+  const sectionNames = items.map(item => item.name);
+  const index = items.findIndex(item => item.name === link);
+  let ret = { prevSection: null, nextSection: null };
 
-  if (!items.length) {
+  if (index > -1) {
+    ret = {
+      prevSection: index !== 0 ? sectionNames[index - 1] : null,
+      nextSection:
+        index < sectionNames.length - 1 ? sectionNames[index + 1] : null
+    };
+
+    return ret;
+  }
+
+  items.map(section => {
+    if (section.components.length > 0 && section.components[0].slug) {
+      section.components.map(subSection => {
+        if (subSection.slug === link.toLowerCase()) {
+          ret = previousAndNextSections({ items, link: section.name });
+        }
+        return subSection;
+      });
+    }
+    return section;
+  });
+
+  return ret;
+};
+
+export default props => {
+  const selectedIndex = previousAndNextSections({
+    items: props.items,
+    link: props.link
+  });
+
+  if (!props.items.length) {
     return null;
   }
 
   return (
     <BottomNav>
       <div>
-        {selectedIndex > 0 ? (
-          <Link href={`/#!/${items[selectedIndex - 1]}`}>
-            &larr; {items[selectedIndex - 1]}
+        {selectedIndex.prevSection && (
+          <Link href={`/#!/${selectedIndex.prevSection}`}>
+            &larr; {selectedIndex.prevSection}
           </Link>
-        ) : null}
+        )}
       </div>
       <div>
-        {selectedIndex < items.length ? (
-          <Link href={`/#!/${items[selectedIndex + 1]}`}>
-            {items[selectedIndex + 1]} &rarr;
+        {selectedIndex.nextSection && (
+          <Link href={`/#!/${selectedIndex.nextSection}`}>
+            {selectedIndex.nextSection} &rarr;
           </Link>
-        ) : null}
+        )}
       </div>
     </BottomNav>
   );