On this page

Scroll to top Get started Examples Only links Only sections Links and sections Subsections

Sidebar config

Learn how to create sidebar with links, sections, and subsections.

Get started

Go to src/i18n/sidebar.ts, and inside SidebarSchema type you will define the shape of your sidebar content.

src/i18n/sidebar.ts
type SidebarSchema = {
  [Lang in LanguageKeys]: {
    // write types here
  }
}

Each object property can be either string or section. If it’s string it’s just the link, but if it’s section, that’s collapsible section of links or sections.

Section have sectionName, and sectionItems properties.

sectionName is title of the collapsible, and sectionItems are it’s children which can be either link or a subsection.

Subsection have subsectionName, and subsectionItems properties.

subsectionName is title of the collapsible, and subsectionItems are it’s children which are links.

src/types.ts
type Section = {
  sectionName?: string
  sectionItems: { [key: string]: string | Subsection }
}


type Subsection = {
  subsectionName?: string
  subsectionItems: { [key: string]: string }
}

You should name each object property in this schema after the markdown file or folder name you will create. Object properties in SidebarSchema should be named in kebab-case.

Each property value should be translation of that item.

This all probably sounds confusing, so I will show you few examples.

Examples

src/i18n/sidebar.ts
type SidebarSchema = {
  [Lang in LanguageKeys]: {
    'first-item': string
    'second-item': string
    'third-item': string
    'fourth-item': string
    'fifth-item': string
  }
}

src/i18n/sidebar.ts
export const SIDEBAR: SidebarSchema = {
  en: {
    'first-item': 'First item',
    'second-item': 'Second item,
    'third-item': 'Third item,
    'fourth-item': 'Fourth item,
    'fifth-item': 'Fifth item,
  },
  sr: {
    'first-item': 'Prva stvar',
    'second-item': 'Druga stvar',
    'third-item': 'Treca stvar',
    'fourth-item': 'Cetvrta stvar',
    'fifth-item': 'Peta stvar',
  },
}

Now we set GET_STARTED_LINK to first link in the sidebar:

src/config.ts
export const GET_STARTED_LINK = '/first-item'

In this case you will create 5 markdown files in each lang folder and it will look like this:

├── en
│ ├── first-item.mdx
│ ├── second-item.mdx
│ ├── third-item.mdx
│ ├── foruth-item.mdx
│ └── fifth-item.mdx
├── sr
│ ├── first-item.mdx
│ ├── second-item.mdx
│ ├── third-item.mdx
│ ├── foruth-item.mdx
│ └── fifth-item.mdx

And now you have a sidebar with 5 links!

Only sections

src/i18n/sidebar.ts
type SidebarSchema = {
  [Lang in LanguageKeys]: {
    'first-section': {
      sectionName: string
      sectionItems: {
        'first-item': string
        'second-item': string
        'third-item': string
      }
    }
    'second-section': {
      sectionName: string
      sectionItems: {
        'fourth-item': string
        'fifth-item': string
        'sixth-item': string
      }
    }
  }
}

src/i18n/sidebar.ts
export const SIDEBAR: SidebarSchema = {
  en: {
    'first-section': {
      sectionName: 'First section',
      sectionItems: {
        'first-item': 'First item',
        'second-item': 'Second item',
        'third-item': 'Third item',
      },
    },
    'second-section': {
      sectionName: 'Second section',
      sectionItems: {
        'fourth-item': 'Fourth item',
        'fifth-item': 'Fifth item',
        'sixth-item': 'Sixth item',
      },
    },
  },
  sr: {
    'first-section': {
      sectionName: 'Prva sekcija',
      sectionItems: {
        'first-item': 'Prva stvar',
        'second-item': 'Druga stvar',
        'third-item': 'Treca stvar',
      },
    },
    'second-section': {
      sectionName: 'Druga sekcija',
      sectionItems: {
        'fourth-item': 'Cetvrta stvar',
        'fifth-item': 'Peta stvar',
        'sixth-item': 'Sesta stvar',
      },
    },
  },
}

Now we set GET_STARTED_LINK to first link in the sidebar:

src/config.ts
export const GET_STARTED_LINK = '/first-section/first-item'

In this case you will create 2 folders with 3 files each, in each lang folder and it will look like this:

├── en
│ ├── first-section
│ │ ├── first-item.mdx
│ │ ├── second-item.mdx
│ │ └── third-item.mdx
│ ├── second-section
│ │ ├── fourth-item.mdx
│ │ ├── fifth-item.mdx
│ │ └── sixth-item.mdx
├── sr
│ ├── first-section
│ │ ├── first-item.mdx
│ │ ├── second-item.mdx
│ │ └── third-item.mdx
│ ├── second-section
│ │ ├── fourth-item.mdx
│ │ ├── fifth-item.mdx
│ │ └── sixth-item.mdx

And now you have a sidebar with 2 sections with 3 links each!

src/i18n/sidebar.ts
type SidebarSchema = {
  [Lang in LanguageKeys]: {
    'first-item': string
    'second-item': string
    'first-section': {
      sectionName: string
      sectionItems: {
        'third-item': string
        'fourth-item': string
        'fifth-item': string
      },
    },
    'second-section': {
      sectionName: string
      sectionItems: {
        'sixth-item': string
        'seventh-item': string
        'eighth-item': string
      },
    },
    'ninth-item: string
    'tenth-item: string
  }
}

src/i18n/sidebar.ts
export const SIDEBAR: SidebarSchema = {
  en: {
    'first-item': 'First item',
    'second-item': 'Second item',
    'first-section': {
      sectionName: 'First section',
      sectionItems: {
        'third-item': 'Third item',
        'fourth-item': 'Fourth item',
        'fifth-item': 'Fifth item',
      },
    },
    'second-section': {
      sectionName: 'Second section',
      sectionItems: {
        'sixth-item': 'Sixth item',
        'seventh-item': 'Seventh item',
        'eighth-item': 'Eighth item',
      },
    },
    'ninth-item: 'Ninth item',
    'tenth-item: 'Tenth item',
  },
  sr: {
    'first-item': 'Prva stvar',
    'second-item': 'Druga stvar',
    'first-section': {
      sectionName: 'Prva sekcija',
      sectionItems: {
        'third-item': 'Treca stvar',
        'fourth-item': 'Cetvrta stvar',
        'fifth-item': 'Peta stvar',
      },
    },
    'second-section': {
      sectionName: 'Druga sekcija',
      sectionItems: {
        'sixth-item': 'Sesta stvar',
        'seventh-item': 'Sedma stvar',
        'eighth-item': 'Osma stvar',
      },
    },
    'ninth-item: 'Deveta stvar',
    'tenth-item: 'Deseta stvar',
  },
}

Now we set GET_STARTED_LINK to first link in the sidebar:

src/config.ts
export const GET_STARTED_LINK = '/first-item'

In this case you will create 4 files and 2 folders with 3 files each, in each lang folder and it will look like this:

├── en
│ ├── first-item.mdx
│ ├── second-item.mdx
│ ├── first-section
│ │ ├── third-item.mdx
│ │ ├── fourth-item.mdx
│ │ └── fifth-item.mdx
│ ├── second-section
│ │ ├── sixth-item.mdx
│ │ ├── seventh-item.mdx
│ │ └── eighth-item.mdx
│ ├── ninth-item.mdx
│ ├── tenth-item.mdx
├── sr
│ ├── first-item.mdx
│ ├── second-item.mdx
│ ├── first-section
│ │ ├── third-item.mdx
│ │ ├── fourth-item.mdx
│ │ └── fifth-item.mdx
│ ├── second-section
│ │ ├── sixth-item.mdx
│ │ ├── seventh-item.mdx
│ │ └── eighth-item.mdx
│ ├── ninth-item.mdx
│ ├── tenth-item.mdx

And now you have a sidebar with 4 links and 2 sections with 3 links each!

Subsections

src/i18n/sidebar.ts
type SidebarSchema = {
  [Lang in LanguageKeys]: {
    'first-section': {
      sectionName: string
      sectionItems: {
        'first-item': string
        'second-item': string
        'first-subsection': {
          subsectionName: string
          subsectionItems: {
            'third-item': string
            'fourth-item': string
          }
        }
        'second-subsection': {
          subsectionName: string
          subsectionItems: {
            'fifth-item': string
            'sixth-item': string
          }
        }
      }
    }
  }
}

src/i18n/sidebar.ts
export const SIDEBAR: SidebarSchema = {
  en: {
    'first-section': {
      sectionName: 'First section',
      sectionItems: {
        'first-item': 'First item',
        'second-item': 'Second item',
        'first-subsection': {
          subsectionName: 'First section',
          subsectionItems: {
            'third-item': 'Third item',
            'fourth-item': 'Fourth item',
          },
        },
        'second-subsection': {
          subsectionName: 'Second subsection',
          subsectionItems: {
            'fifth-item': 'Fifth item',
            'sixth-item': 'Sixth item',
          },
        },
      },
    },
  },
  sr: {
    'first-section': {
      sectionName: 'Prva sekcija',
      sectionItems: {
        'first-item': 'Prva stvar',
        'second-item': 'Druga stvar',
        'first-subsection': {
          subsectionName: 'Prva podsekcija',
          subsectionItems: {
            'third-item': 'Treca stvar',
            'fourth-item': 'Cetvrta stvar',
          },
        },
        'second-subsection': {
          subsectionName: 'Druga podsekcija',
          subsectionItems: {
            'fifth-item': 'Peta stvar',
            'sixth-item': 'Sesta stvar',
          },
        },
      },
    },
  },
}

Now we set GET_STARTED_LINK to first link in the sidebar:

src/config.ts
export const GET_STARTED_LINK = '/first-section/first-item'

In this case you will create 1 folder containing 2 files, and 2 subfolders with 2 files each, in each lang folder and it will look like this:

├── en
│ ├── first-section
│ │ ├── first-item.mdx
│ │ ├── second-item.mdx
│ │ ├── first-subsection
│ │ │ ├── third-item.mdx
│ │ │ └── fourth-item.mdx
│ │ ├── second-subsection
│ │ │ ├── fifth-item.mdx
│ │ │ └── sixth-item.mdx
├── sr
│ ├── first-section
│ │ ├── first-item.mdx
│ │ ├── second-item.mdx
│ │ ├── first-subsection
│ │ │ ├── third-item.mdx
│ │ │ └── fourth-item.mdx
│ │ ├── second-subsection
│ │ │ ├── fifth-item.mdx
│ │ │ └── sixth-item.mdx

And now you have a sidebar with 1 section with 2 links, and 2 subsections with 2 links each!

Edit this page

Previous

Getting started

Next

Writing docs