Top Bar Navigation

topBarNav controls the links or component slots rendered in the top bar. Use simple link items for most documentation sites.

const docsConfig = {
  topBarNav: [
    { label: 'Get started', href: 'getting-started', isCta: true },
    { label: 'Concepts', href: 'docs-graph' },
    { label: 'API', href: 'public-entry-points' }
  ]
  // ...
}

Component mode

Advanced consumers can provide consumer-owned components instead of static links.

const docsConfig = {
  topBarNav: {
    components: ['../components/DocsTopBarSearch', '../components/DocsMegaMenuTopBarItems']
  }
  // ...
}

Navigation should still be coherent with the docs graph. Use the graph for docs structure, not separate manual navigation files. See The Docs Graph.