The menubar is a primary top navigation bar that provides global context across your documentation sub-sites. Position it as a fixed bar at the absolute viewport top or inline above the page header.

Configuration Schema

Configure menubar items in the layout.menubar block of docmd.config.json:

{
  "layout": {
    "menubar": {
      "enabled": true,
      "position": "top", 
      "left": [
        { "type": "title", "text": "Brand", "url": "/", "icon": "home" },
        { "text": "Documentation", "url": "/docs" },
        { 
          "type": "dropdown", 
          "text": "Ecosystem", 
          "items": [
            { "text": "GitHub", "url": "https://github.com/docmd-io/docmd" },
            { "text": "Live Editor", "url": "https://live.docmd.io" }
          ]
        }
      ],
      "right": [
        { "text": "Support", "url": "/support", "icon": "help-circle" }
      ]
    }
  }
}

Configuration Options

Supported Item Types

The left and right arrays support three primary element types:

1. Standard Link

Renders a text link with optional icon and new-tab behaviour:

• text: Link label text.
• url: Relative path or external URL.
• icon: Optional Lucide icon name.
• external: When true, opens in a new browser tab.

2. Brand Title

Set "type": "title" to render styled brand headers (e.g. bold weights with home icon triggers).

3. Nested Dropdown Menu

Set "type": "dropdown" and supply an items array to render interactive flyout dropdown submenus.

Utility Menu Integration

To position global utilities (such as full-text search, dark/light theme switch, and sponsorship links) in the menubar, set optionsMenu.position to 'menubar':

{
  "layout": {
    "optionsMenu": {
      "position": "menubar"
    }
  }
}

Utilities align to the right region automatically, rendering after any custom links defined in right.

Custom Styling

Customise menubar styling by overriding CSS custom properties in your custom stylesheets. See Custom CSS & JS:

:root {
  --menubar-h: 56px;
  --menubar-bg: var(--bg-color);
  --menubar-border: var(--border-color);
  --menubar-text: var(--text-color);
}