Skip to main content

Icon links

Links that belong at the edge of the navbar rather than in its reading order (the repository, an issue tracker, a support page) are configured as iconLinks and rendered as a mark:

export default createConfig({
title: 'voraus.example',
projectName: 'voraus-example',
iconLinks: [
{
icon: 'github',
href: 'https://github.com/vorausrobotik/voraus-example',
label: 'GitHub repository',
},
],
})

They are appended after your navbarItems, so the bar reads text first and marks last without you ordering the two lists yourself. position defaults to right; set it to 'left' if you need one on the other side.

label is not optional

An icon carries no text, so label is the only name the link has. It becomes the aria-label a screen reader announces and the tooltip a mouse user sees, and in the mobile menu, where the navbar collapses into a list of labeled entries, it is shown next to the icon as ordinary text.

The available icons

NameMark
githubGitHub

The set is closed on purpose: the same kind of destination should carry the same mark on every voraus site, and a name with no icon behind it fails the build instead of publishing an empty navbar item. Need one that is not here? Add it to the theme. That is a small change, and every site gets it.

For a genuinely one-off mark, the ordinary Docusaurus route is still open: a navbarItems entry with a className, and your own CSS in customCss.

No icon CDN

The marks are React components compiled into your bundle, from react-icons. Nothing is fetched at runtime.

That is deliberate rather than incidental. Icon services such as Iconify load their artwork from their own API on demand, which would put a third-party request into every page. And vdoc keeps published versions online for years, so a snapshot built today would depend on that service still answering in 2030. It would also leave the icons blank on an air-gapped network, which is exactly where these docs have to work.