Skip to main content
Star us on GitHub Star

Navbar items and icons

Two related exports from @netfoundry/docusaurus-theme/ui:

  • NavbarItems -- a shared array of navbar item configurations consumed by docusaurus.config.ts (themeConfig.navbar.items). It is not a React component; it does not render on a page.
  • icons -- a set of React icon components (GitHubIcon, DiscourseIcon, RedditIcon, XIcon, YouTubeIcon) used in the navbar chrome and elsewhere.
export type NavbarItem = {
  label: string;
  href?: string;       // external URL
  to?: string;         // internal doc/page
  type?: string;       // e.g. 'docSidebar'
  position?: 'left' | 'right';
  sidebarId?: string;
};

Used like this in a consuming site's docusaurus.config.ts:

import {NavbarItems} from '@netfoundry/docusaurus-theme/ui';

themeConfig: {
  navbar: {
    items: [
      ...NavbarItems,
      // site-specific items appended here
    ],
  },
}

The navbar for the current page already renders these -- look up. To verify the shared array, compare what's on screen against the default in packages/docusaurus-theme/src/components/NetFoundryNavbarItems/NetFoundryNavbarItems.tsx.

Each icon below is rendered at 32px so you can sanity-check stroke weight, viewBox, and dark-mode behavior side by side.

GitHubIcon
DiscourseIcon
RedditIcon
XIcon
YouTubeIcon

Icons at multiple sizes​

Icons with hover color (CSS-driven)​

The .nf-icon-link--discourse:hover rule in layout.css is one example. Hover the icon below to see whether it picks up color: inherit correctly: