The menubar is a premium navigation layer. It provides global context across your site. Position it as a fixed bar at the viewport top or relatively above the page header.

Configuration

Configure the menubar in the layout section of your 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" }
      ]
    }
  }
}

Options

Item Types

The left and right arrays support various item types.

1. Standard Link

The most common item type.

• text: Display label.
• url: Path or external URL.
• icon: Optional Lucide icon name.
• external: Set to true to open in a new tab.

2. Title (Brand)

Set type: 'title' to apply branding styles (e.g. bold fonts).

3. Dropdown Menu

Set type: 'dropdown' and provide an items array to create a nested menu.

Utility Integration

Host the global search and theme toggle in the menubar. Set optionsMenu.position to 'menubar'.

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

The options menu automatically aligns to the right region. It appears after any links defined in the right array.

Custom Styling

Use CSS variables in your custom stylesheets to override the menubar appearance. See Custom CSS & JS for details.

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