Change Sidebar Ordering#

Dokz doesn't sort your sidebar links on any particular oder, this is because Dokz generates the sidebar links based on the pages directory tree

To give a specific order to your sidebar you can use the sidebarOrdering prop in the DokzProvider:

jsx
1
import { DokzProvider } from 'dokz'
2
import React from 'react'
3
4
const order = {
5
    'index.mdx': true,
6
    anotherDirectory: false, // use false to exclude directories and files
7
    pageName: true, // you can omit the mdx extension
8
    folder: {
9
        page1: true,
10
        page2: true,
11
        page3: true,
12
        subfolder: {
13
            page3: true,
14
            page4: true,
15
        },
16
    },
17
    // paths not present will be put at the end
18
}
19
20
export default function App(props) {
21
    const { Component, pageProps } = props
22
    return (
23
        <ChakraProvider>
24
            <DokzProvider sidebarOrdering={order}>
25
                <Component {...pageProps} />
26
            </DokzProvider>
27
        </ChakraProvider>
28
    )
29
}

How it Works#

The order is specified with an object, every key is a file or an object path

Every value can be true, which means the current key is a file path, or can be another object, meaning the current key is directory

If the value is false the corresponding file or directory will be excluded from the sidebar

Paths that are not in this ordering are put at the end.