Menüleiste

Die menubar ist eine hochwertige Navigationsebene. Sie bietet globalen Kontext auf Ihrer gesamten Site. Positionieren Sie sie als feste Leiste am oberen Rand des Viewports oder relativ über dem Seiten-Header.

Konfiguration

Konfigurieren Sie die Menüleiste im layout-Abschnitt Ihrer 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" }
      ]
    }
  }
}

Optionen

Elementtypen

Die left- und right-Arrays unterstützen verschiedene Elementtypen.

1. Standard-Link

Der häufigste Elementtyp.

• text: Anzeigetext.
• url: Pfad oder externe URL.
• icon: Optionaler Lucide-Iconname.
• external: Auf true setzen, um in einem neuen Tab zu öffnen.

2. Titel (Marke)

Setzen Sie type: 'title', um Markenstile anzuwenden (z. B. fette Schrift).

3. Dropdown-Menü

Setzen Sie type: 'dropdown' und stellen Sie ein items-Array bereit, um ein verschachteltes Menü zu erstellen.

Utility-Integration

Hosten Sie die globale Suche und den Theme-Toggle in der Menüleiste. Setzen Sie optionsMenu.position auf 'menubar'.

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

Das Optionsmenü richtet sich automatisch am rechten Bereich aus. Es erscheint nach allen in right definierten Links.

Eigene Gestaltung

Verwenden Sie CSS-Variablen in Ihren eigenen Stylesheets, um das Erscheinungsbild der Menüleiste anzupassen. Details finden Sie unter Eigene CSS & JS.

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