To begin, consider your documentation as a compilation of individual pages, where each page represents a distinct topic or section. When creating a new page, you will need to supply a unique identifier known as a "slug" in the markdown frontmatter. This slug determines the page's URL and its position within the navigation structure.
Furthermore, it is crucial to provide a meaningful title for each page in the frontmatter. This title will serve as the corresponding menu item's name in the navigation.
While the slug and title properties are vital for establishing a robust navigation structure, we also support a fallback system based on folders and filenames. If a page lacks a specified slug, the system will generate one based on the folder structure. In such cases, ensure that each topic folder contains an index.mdx file serving as the content page for that particular topic. Nonetheless, we encourage content writers to supply a slug in the frontmatter for greater control over the URL and navigation structure.
Here is an example of how the frontmatter for the current page is structured:
---
title: Navigation
slug: documentation/navigation
---
The navigation structure is generated automatically based on the pages you create. The main menu presents the top-level topics, with each topic corresponding to a specific page. This ensures that each menu item aligns with a page, resulting in a seamless and intuitive browsing experience for your users.
The sidebar menu focuses on the current topic, displaying the relevant pages within that particular branch.
If you wish to customize the navigation display, you have the option to disable branch-based filtering. This will showcase all pages across all topics in the sidebar menu, with the current page highlighted. Your development team can disable branch-based filtering for sidebar navigation by adding showFullNavigation: true
to the DocsKit theme options.
To facilitate navigation within each page, an automatically generated table of contents (ToC) is provided based on the headings used. By structuring your content with headings such as "Section 1" and "Subsection A," the ToC will be generated accordingly.
We recognize the significance of flexibility, which is why we provide you with the option to personalize the appearance of your pages. You can choose to disable the sidebar menu and/or the table of contents for specific pages, enabling you to concentrate solely on the content itself. To achieve this, add hideNavigation: true
or hideToc: true
to the frontmatter of the respective page.
---
title: My full-width page
slug: /full-width-page
hideNavigation: true
hideToc: true
---
By incorporating slugs and titles for your pages, you can establish a clear and intuitive navigation structure. This ensures that users can readily access the information they require, as each menu item corresponds to a dedicated page. Furthermore, the automatically generated table of contents enhances navigation within each page, contributing to an improved overall user experience.
Begin the creation of your well-structured documentation site by assigning each topic its own dedicated page with a unique slug and meaningful title. This will enable your users to navigate seamlessly through your valuable content, thereby enhancing their learning and discovery process.