The menubar is a top-level navigation component that can be placed either at the very top of the page (fixed) or within the main content area (above the page header).

Configuration

The menubar is configured within the layout section of your docmd.config.js.

module.exports = {
  layout: {
    menubar: {
      enabled: true,
      position: 'top', // 'top' or 'header'
      left: [
        { type: 'title', text: 'Brand', url: '/', icon: 'home' },
        { text: 'Docs', url: '/docs' },
        { 
          type: 'dropdown', 
          text: 'Resources', 
          items: [
            { text: 'GitHub', url: 'https://github.com/docmd-io/docmd', external: true },
            { text: 'Changelog', url: '/changelog' }
          ]
        }
      ],
      right: [
        { text: 'Twitter', url: 'https://twitter.com/docmd', icon: 'twitter' }
      ]
    }
  }
};

Options

Item Types

Each item in left or right can have the following properties:

Standard Link

• text: The display text.
• url: The destination URL.
• icon: (Optional) Lucide icon name.
• external: (Optional) Whether to open in a new tab.

Title

Set type: 'title' to style the item as a brand/logo link.

Dropdown

Set type: 'dropdown' and provide an items array of links.

Options Menu Integration

You can integrate the search bar and theme toggle into the menubar by setting optionsMenu.position to 'menubar'.

module.exports = {
  layout: {
    optionsMenu: {
      position: 'menubar'
    }
  }
};

When positioned in the menubar, the options menu will appear on the right region of the menubar.

Customization

You can customize the menubar’s appearance using CSS variables in your customCss:

:root {
  --menubar-height: 52px;
  --menubar-bg: #1a1b1e;
  --menubar-border: #2c2e33;
  --menubar-text: #c1c2c5;
}