Top navbar, ConNext Website

Light surface-card · #FFFFFF

Dark surface-card · #102246

Drawer below 996px · light and dark

React / MDX usage

Mount as Docusaurus theme swizzle

The Conduction preset replaces Docusaurus's default Infima navbar with this pattern through theme/Navbar/index.jsx. Sites configure the items via themeConfig.navbar; the chrome stays locked.

docusaurus.config.js

const {createConfig} = require('@conduction/docusaurus-preset');

module.exports = createConfig({
  title: 'ConNext',
  url: 'https://connext.conduction.nl',
  navbar: {
    title: 'ConNext',
    items: [
      {to: '/apps',      label: 'Apps',      position: 'left', items: [
        {to: '/apps/opencatalogi', label: 'OpenCatalogi'},
        {to: '/apps/openregister', label: 'OpenRegister'},
        {to: '/apps/integriq',     label: 'Integriq'},
      ]},
      {to: '/solutions', label: 'Solutions', position: 'left'},
      {to: '/docs/intro',label: 'Docs',      position: 'left'},
      {to: '/support',   label: 'Support',   position: 'left'},
      {to: '/about',     label: 'About',     position: 'left'},
      {type: 'localeDropdown',                position: 'right'},
      {to: '/partners',  label: 'Partners',  position: 'right'},
      {to: '/install',   label: 'Install',   position: 'right', cta: true},
    ],
  },
});

Item shape

to internal route (Link)
href external link (a tag)
label display text
position left | right
items subitems, renders the section dropdown
cta true renders cobalt-fill primary CTA
type localeDropdown for the language switcher

Section dropdown

A section with its own pages hangs them under the parent link. The panel is the locale switcher's panel, opened on hover and left-aligned under its trigger. Keep it to one level: a subitem never opens a third.

Do not read the locale switcher as the model for these states. It picks a setting and marks the chosen one in cobalt. A section dropdown navigates, so it follows the nav's own states.

default cobalt-700, 14px, weight 500
hover orange text on a cobalt-50 ground
current orange text, weight 700, cobalt-50 ground

A current subitem takes the same orange as a current top-level item. One colour carries one meaning: orange is "you are here". A second colour for the same state would add a rule without adding information. Both links go orange together, the parent naming the section and the subitem naming the page.

Weight is 700, not 600. The navbar sits at 500, so a single step reads as a rendering artefact rather than a state.

This is the one place where two oranges appear in a single component. The one-accent rule governs decorative fills, not state: only one section is ever current, and its parent and child are the same state seen twice.

Dark mode

The two stages above are the same bar under the two themes. Every colour it paints now comes from the semantic layer — surface-card for the bar and both panels, text-body for the links, text-default for the wordmark, surface-subtle for hover and current grounds. Orange and the cobalt CTA stay literal: they are brand values, not theme values, and they read on either ground.

still raw the bar's border-bottom is cobalt-100, a pale hairline on a cobalt-900 page
still raw the site swizzle in conduction-website carries 43 raw values and no tokens — it stays white in dark
collides surface-subtle equals surface-card in dark, so hover and current grounds in both dropdown panels have no edge against the panel they sit on

The last one is the same collision the employee card's contact chips had, and it wants the same answer: the raised ground goes to surface-sunken in dark rather than staying on surface-subtle.