A standard page contains six primary functional zones:

1. Menubar: A full-width top navigation bar for global site links.
2. Header: A persistent secondary bar. It contains the page title and utility buttons.
3. Sidebar: The primary navigation tree, usually on the left.
4. Content Area: The central Markdown rendering zone. Includes Breadcrumbs.
5. Table of Contents (TOC): Right-hand heading navigation for the current page.
6. Footer: Bottom area for copyright, branding, and site-wide links.

Global Component Configuration

The engine uses a modular layout system. Configure most UI zones in the layout section of your docmd.config.json.

Menubar

The menubar provides a high-level navigation layer. It supports brand titles, regular links, and nested dropdowns.

• Location: Fixed at the top or inline within the header.
• Documentation: See Menubar Configuration for schemas and styling.

The Page Header

The header displays the page title, breadcrumbs, and utility menus.

• Controls: Enable or disable the header globally via layout.header. Toggle breadcrumbs via layout.breadcrumbs.
• Overriding: Use hideTitle: true in your Page Frontmatter to hide the title area locally.

Copy Widgets

The breadcrumbs bar includes two copy buttons. One copies the page’s raw Markdown, the other copies a structured context block that includes the URL, title, and description. Useful for pasting into AI chat windows or support tickets.

Configure these buttons under theme.copyWidgets in your docmd.config.json:

{
  "theme": {
    "copyWidgets": {
      "enabled": true,
      "raw": true,
      "context": true
    }
  }
}

• enabled: Set to false to disable the bar completely.
• raw: Set to false to hide the “Copy Markdown” button.
• context: Set to false to hide the “Copy Context” button.

Utility Menus (Options Menu)

The optionsMenu groups core utilities like Global Search, Theme Toggle, and Sponsorship links.

{
  "layout": {
    "optionsMenu": {
      "position": "header", 
      "components": {
        "search": true,      
        "themeSwitch": true, 
        "sponsor": "https://github.com/sponsors/mgks"
      }
    }
  }
}

Sidebar & Navigation

The sidebar is the primary navigation tree. Define its structure in your config or external JSON files.

• Behaviour: Supports animations, collapsible groups, and automatic path preservation.
• Documentation: See Navigation Configuration.

Footer

The engine provides minimal and complete layouts for your site footer.

{
  "layout": {
    "footer": {
      "style": "complete", 
      "description": "Documentation built with docmd.",
      "branding": true,
      "columns": [
        {
          "title": "Community",
          "links": [
            { "text": "GitHub", "url": "https://github.com/docmd-io/docmd" }
          ]
        }
      ]
    }
  }
}