Skip to content

Sidebar & Top Navigation

The sidebar and top navigation are the main ways to navigate through the documentation.

The sidebar contains the main items to navigate between pages. It is always visible on larger desktop viewports, but for smaller viewports, the sidebar collapses into a hamburger menu.

The top navigation contains higher-level navigation for the documentation, as well as miscellaneous items (social, theme toggle, etc). Such higher-level navigation could include links to the main website, blog, examples, etc.

Configuration

You can configure the sidebar and top navigation via your vocs.config.ts file.

Sidebar

The sidebar property is an array of sidebar items. Each sidebar item can have the following properties:

  • text: The text to display for the sidebar item.
  • collapsed (optional): Whether the sidebar item should be collapsed by default.
  • link (optional): The link to navigate to.
  • items (optional): The child sidebar items to display.
vocs.config.ts
import { defineConfig } from 'vocs'
 
export default defineConfig({
  sidebar: [ 
    { 
      text: 'Getting Started', 
      link: '/docs', 
    }, 
    { 
      text: 'API', 
      collapsed: true, 
      items: [ 
        { 
          text: 'Config', 
          link: '/docs/api/config', 
        }, 
      ], 
    } 
  ], 
  title: 'Viem'
})

Contextual Sidebars

You can also show a different sidebar for each page. This is useful if you want to show a sidebar for a specific section of the documentation.

vocs.config.ts
import { defineConfig } from 'vocs'
 
export default defineConfig({
  sidebar: {
    '/docs/': [ 
      { 
        text: 'Getting Started', 
        link: '/docs', 
      }, 
      { 
        text: 'API', 
        collapsed: true, 
        items: [ 
          { 
            text: 'Config', 
            link: '/docs/api/config', 
          }, 
        ], 
      } 
    ], 
    '/examples/': [ 
      { text: 'React', link: '/examples/react' } 
      { text: 'Vue', link: '/examples/vue' }
    ] 
  }
  title: 'Viem'
})

Top Navigation

The topNav property is an array of top navigation items. Each top navigation item can have the following properties:

  • text: The text to display for the top nav item.
  • link (optional): The link to navigate to.
  • items (optional): The child top nav items to display.
  • match (optional): The path to match against. If the current path matches the match property, the top nav item will be highlighted.
vocs.config.ts
import { defineConfig } from 'vocs'
 
export default defineConfig({
  title: 'Viem',
  topNav: [ 
    { text: 'Guide & API', link: '/docs/getting-started', match: '/docs' }, 
    { text: 'Blog', link: '/blog' }, 
    { 
      text: version, 
      items: [ 
        { 
          text: 'Changelog', 
          link: 'https://github.com/wevm/vocs/blob/main/src/CHANGELOG.md', 
        }, 
        { 
          text: 'Contributing', 
          link: 'https://github.com/wevm/vocs/blob/main/.github/CONTRIBUTING.md', 
        }, 
      ], 
    }, 
  ], 
})