Navigation

Author: handotdev

core-concepts/navigation.mdx

@@ -4,12 +4,6 @@ description: "Structure and customize your documentation's navigation hierarchy"
 icon: "map"
 ---
 
-export const LayoutFrame = ({ children }) => (
-  <div className="flex justify-center py-6 pointer-events-none border border-zinc-200/50 dark:border-zinc-800 rounded-2xl bg-zinc-100 dark:bg-zinc-900">
-    {children}
-  </div>
-)
-
 The [navigation](/core-concepts/settings#param-navigation) property in [docs.json](/core-concepts/settings) defines how users will browse through your documentation. Think of it as the blueprint for your documentation's menu structure.
 
 With proper navigation configuration, you can organize your content into a logical hierarchy that makes it easy for users to find exactly what they're looking for.
@@ -18,10 +12,8 @@ With proper navigation configuration, you can organize your content into a logic
 
 Pages are the most fundamental navigation component.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/pages-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/pages-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/pages-light.png" />
+<img className="hidden dark:block" src="/images/navigation/pages-dark.png" />
 
 Pages is an array where each entry must be a reference to the path of a [page file](/core-concepts/pages).
 
@@ -44,10 +36,8 @@ Pages is an array where each entry must be a reference to the path of a [page fi
 
 Groups allow you to group your pages. Groups can also be nested within each other.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/groups-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/groups-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/groups-light.png" />
+<img className="hidden dark:block" src="/images/navigation/groups-dark.png" />
 
 ```json
 {
@@ -79,10 +69,8 @@ Groups allow you to group your pages. Groups can also be nested within each othe
 Tabs help distinguish between different topics or sections of your
 documentation.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/tabs-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/tabs-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/tabs-light.png" />
+<img className="hidden dark:block" src="/images/navigation/tabs-dark.png" />
 
 ```json
 "navigation": {
@@ -117,10 +105,8 @@ documentation.
 
 Anchors are another way to section your content. They show up on top of your side navigation.
 
-<LayoutFrame>
-    <img className="block dark:hidden w-52" src="/images/navigation/anchors-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/anchors-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/anchors-light.png" />
+<img className="hidden dark:block" src="/images/navigation/anchors-dark.png" />
 
 The configuration is very similar to tabs.
 
@@ -161,10 +147,8 @@ While not required, we highly recommend that you set an `icon` field as well.
 
 Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/dropdowns-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/dropdowns-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/dropdowns-light.png" />
+<img className="hidden dark:block" src="/images/navigation/dropdowns-dark.png" />
 
 While not required, we also recommend that you set an icon for each dropdown item.
 
@@ -204,10 +188,8 @@ While not required, we also recommend that you set an icon for each dropdown ite
 
 Versions can be leveraged to partition your navigation into different versions.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/versions-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/versions-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/versions-light.png" />
+<img className="hidden dark:block" src="/images/navigation/versions-dark.png" />
 
 ```json
 {
@@ -242,10 +224,9 @@ Versions can be leveraged to partition your navigation into different versions.
 
 Languages can be leveraged to partition your navigation into different languages.
 
-<LayoutFrame>
-  <img className="block dark:hidden w-52" src="/images/navigation/languages-light.png" />
-  <img className="hidden dark:block w-52" src="/images/navigation/languages-dark.png" />
-</LayoutFrame>
+<img className="block dark:hidden" src="/images/navigation/languages-light.png" />
+<img className="hidden dark:block" src="/images/navigation/languages-dark.png" />
+
 
 We currently support the following languages: