diff --git a/organize/navigation.mdx b/organize/navigation.mdx index 847fef149..bb5acaf7f 100644 --- a/organize/navigation.mdx +++ b/organize/navigation.mdx @@ -7,7 +7,11 @@ The [navigation](organize/settings#param-navigation) property in `docs.json` con With proper navigation configuration, you can organize your content so that users can find exactly what they're looking for. -## Pages +## Basic navigation components + +These are the fundamental building blocks for organizing your documentation. + +### Pages Pages are the most fundamental navigation component. Pages map to the MDX files that make up your documentation. @@ -39,7 +43,7 @@ In the `navigation` object, `pages` is an array where each entry must reference } ``` -## Groups +### Groups Use groups to organize your sidebar navigation into sections. Groups can be nested within each other, labeled with tags, and styled with icons. @@ -103,7 +107,11 @@ Set `expanded: true` on a group to make it expanded by default in the navigation } ``` -## Tabs +## Top-level navigation structures + +These components create major divisions in your documentation and appear at the top level of your navigation hierarchy. + +### Tabs Tabs create distinct sections of your documentation with separate URL paths. Tabs create a horizontal navigation bar at the top of your documentation that lets users switch between sections. @@ -153,7 +161,7 @@ In the `navigation` object, `tabs` is an array where each entry is an object tha } ``` -### Menus +#### Menus within tabs Menus add dropdown navigation items to a tab. Use menus to help users go directly to specific pages within a tab. @@ -199,7 +207,7 @@ In the `navigation` object, `menu` is an array where each entry is an object tha } ``` -## Anchors +### Anchors Anchors add persistent navigation items to the top of your sidebar. Use anchors to section your content, provide quick access to external resources, or create prominent calls to action. @@ -274,7 +282,7 @@ Global anchors are particularly useful for linking to resources that are not par } ``` -## Dropdowns +### Dropdowns Dropdowns are contained in an expandable menu at the top of your sidebar navigation. Each item in a dropdown directs to a section of your documentation. @@ -323,7 +331,7 @@ In the `navigation` object, `dropdowns` is an array where each entry is an objec } ``` -## Products +### Products -## Breadcrumbs +### Breadcrumbs Breadcrumbs display the full navigation path at the top of pages. Some themes have breadcrumbs enabled by default and others do not. You can control whether breadcrumbs are enabled for your site using the `styling` property in your `docs.json`. @@ -675,11 +691,11 @@ Breadcrumbs display the full navigation path at the top of pages. Some themes ha -## Interaction configuration +### Interaction configuration Control how users interact with navigation elements using the `interaction` property in your `docs.json`. -### Enable auto-navigation for groups +#### Auto-navigation for groups When a user expands a navigation group, some themes will automatically navigate to the first page in the group. You can override a theme's default behavior using the `drilldown` option.