Navigation

Navigation is one of the core concepts in xyd to understand as it determines how your documentation pages are organized, navigated, and accessed by users. It provides flexible ways to structure your content.

Overview

You can customize the navigation by adding a routes in docs.json file to your project.

The navigation property controls the hierarchy of your documentation. It's grouped into multiple properties:

• sidebar - Main navigation, usually displayed on the left side where all pages are rendered.
• tabs - Navigate through tabs, the most in header area.
• sidebarDropdown - Navigate through sidebar dropdown.
• anchors - Fixed navigation, helpful for displaying a static navigation/links.
• segments - Smaller navigational structures based on specific route.

Sidebar

The simples way to define sidebar is declaring a pages within it:

Groups

If you need more advanced structures, define sidebar as object:

Nested Groups

You can also define nested groups:

Group PageComing Soon

If you want to have a clickable group as a page, define page instead of group:

Routing

You can also do more advanced routing in the sidebar, like matching based on the specific route:

Order

Thanks to order you are able to set a custom order of docs groups. It's the most useful with auto-generatated docs - for OpenAPI/GraphQL integration for example. There are a few options how to change an order:

Tabs

Navigation Item structure displayed in tabs-like style:

Sidebar Dropdown

Navigation Item structure displayed in dropdown-like style inside sidebar:

Anchors

Anchors provide a way to add fixed navigation elements. They're useful for displaying important external links or resources.

SegmentsExperimental

Segments allows you to create smaller navigational structures based on specific route. Thanks to that you can create for example a subheader that will shown only on specific route:

File-Convention RoutingComing Soon

Using file-convention routing means the generated HTML pages are mapped from the directory structure of the source Markdown files.

For example, given the following directory structure:

The generated HTML pages will be:

index.md

If you crate an index.md file at root of your documentation project, xyd will serve that content as index page.