Skip to main content

Creating Menu Structures

Learn how to create organized menu structures like the Code and WordPress menus.

Overview​

This guide shows you how to create a clean, organized menu structure where each menu item has its own isolated sidebar - similar to how the Code menu works with HTML, CSS, PHP, etc.

The Pattern​

Each top-level menu (like "Code" or "WP") contains multiple sub-items, and clicking any sub-item shows only its relevant documentation in the sidebar.

Example Structure:

Code (dropdown)
├── HTML (own sidebar)
├── CSS (own sidebar)
├── PHP (own sidebar)
└── MySQL (own sidebar)

Step-by-Step Implementation​

Step 1: Create Directory Structure​

Create a directory for each menu item:

# For Code menu
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/code/html
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/code/css
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/code/php

# For WordPress menu
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/wordpress/generatepress
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/wordpress/kadence
sudo mkdir -p /opt/docker-data/apps/docusaurus/site/docs/wordpress/acf

Step 2: Create Index Files​

Each directory needs an index.md file:

# Example for HTML
sudo tee /opt/docker-data/apps/docusaurus/site/docs/code/html/index.md <<EOF
# HTML

Welcome to the HTML documentation section.