Site Navigation Menu Optimization Review: Category Selection, Reordering, and Bilingual Menu Sync

I recently carried out a detailed revamp of the site’s technical categories and the top main navigation menu to resolve four major issues: chaotic navigation logic, missing categories, mismatched Chinese and English menus, and fragmented section layouts. The entire process was optimized based on visitor browsing habits, technical category hierarchies, and bilingual adaptation specifications. This article fully documents the revamp strategy, category selection criteria, and the final bilingual navigation draft for future reference during site iterations.

I. Prerequisite Information for the Revamp

1. Existing Top-Level Categories Site-Wide (19 in Total)

1. IT Community
2. Web Frontend
3. Web App Development
4. Cloud Computing
5. Enterprise Applications
6. Others
7. Blockchain
8. Blog Operations
9. Application Tools
10. Site Building Systems
11. Development Tools
12. Plugins/Extensions
13. Operating Systems
14. Databases
15. Servers
16. Independence and Freedom
17. Mobile Development
18. Programming Development
19. Management and Monitoring

2. Summary of Existing Issues Before the Revamp

• Missing navigation categories: The core technical category “Programming Development” and the site maintenance category “Blog Operations” were not included in the main navigation, making it inconvenient for visitors to find them.
• Chaotic section order: The underlying operations categories and cloud service categories were arranged in reverse order, which did not conform to the top-down cognitive logic of technical learning.
• Mismatched bilingual menus: The number of menu items, category positions, and copy between the Chinese and English menus could not be matched one-to-one, resulting in a fragmented experience for overseas visitors.
• Risk of invalid categories occupying space: Niche fallback categories almost slipped into the main navigation, which would have caused redundancy and bloat.
• Inconsistent copy: English abbreviations and full names were mixed, Chinese adapted copy was missing, and bilingual adaptation was non-standard.

II. Core Rules for Navigation Category Selection (Core Standards for This Revamp)

This time, I followed three main principles: “streamlining the main navigation to focus on core categories, placing niche categories in the sidebar/dropdowns, and hiding fallback categories.” These principles determine whether a category is added to the top main navigation:

✅ New Categories Added to the Main Navigation (2)

1. Programming Development: Linked with the programming languages section, it is a major core category for general backend and engineering development across the site, and a highly frequently searched category for technical visitors. It must be pinned to the top of the navigation.
2. Blog Operations: Fits the positioning of this self-built blog and connects with the site building systems section to form a complete “building to operations” chain. It is an essential category for site-building bloggers.

❌ Categories Not Added to the Top Main Navigation (Unified into Sidebar Categories/Secondary Dropdowns)

• IT Community: A news aggregation section, not part of the main technical learning track; placed in the sidebar categories.
• Enterprise Applications: A vertical niche industry category with limited content volume; not included in the main navigation.
• Plugins/Extensions: Belongs to the Development Tools sub-section; setting it as a secondary dropdown menu under Development Tools is sufficient.
• Independence and Freedom: Personal essay and reflection content; merged into the [About Me & Cooperation] secondary dropdown.
• Others: The fallback archive category for all site articles; never displayed in any navigation position.

Supplementary Notes

The existing Cloud Computing category was already in the original navigation. This time, only its sorting was adjusted, so there was no need to add it again, avoiding the mistake of duplicate additions.

III. Underlying Logic of Navigation Sorting

The layout is strictly aligned with the browsing and learning paths of technical visitors, layered as follows: fixed homepage/personal section → programming basics section → full-stack development section → site building and operations section → tools and resources section → cloud services and underlying operations section. It goes from shallow to deep, and from application to underlying infrastructure, reducing search costs.

1. Homepage + About Me (fixed at the front, site entrance)
2. Programming Basics: Programming Languages → Programming Development (syntax basics → project practice)
3. Full-Stack Development: Frontend → App Development → Blockchain Development → Mobile (full business development chain)
4. Site Self-Building: Site Building Systems → Blog Operations (setup → operations closed loop)
5. Tools Collection: Development Tools → Application Tools (professional tools → general tools)
6. Underlying Operations: Cloud Computing → Servers → Databases → Operating Systems → Operations Monitoring (cloud layer → hardware → system → management and control)

IV. Final Draft: Complete Bilingual One-to-One Corresponding Navigation

The copy is strictly aligned, positions are fully synchronized, and the style is unified. English retains the site’s original abbreviation habits, and newly added terms use designated official translations: 程序开发 = Programming Development, 博客运营 = Blog Operations.

Chinese Navigation (Final Version)

1. 首页
2. 关于我 & 合作
3. 编程语言
4. 程序开发【本次新增】
5. Web 前端
6. Web 应用开发
7. 区块链
8. 移动开发
9. 建站系统
10. 博客运营【本次新增】
11. 开发工具
12. 应用工具
13. 云计算
14. 服务器
15. 数据库
16. 操作系统
17. 管理和监控

English Navigation (Final Version, One-to-One Match)

1. Home
2. About Me & Cooperation
3. Programming Languages
4. Programming Dev
5. Web Frontend
6. Web App Dev
7. Blockchain
8. Mobile Dev
9. Site Builder
10. Blog Operations
11. Dev Tools
12. App Tools
13. Cloud
14. Server
15. Database
16. OS
17. Monitor & Manage

V. Fine-Tuning Details of This Revamp

• Swapped the order of the original Web Frontend and Web App Development: Web Frontend, which has a broader audience, is now placed first, aligning with the general layout of industry sites.
• Restructured the order of the operations section: Cloud Computing was moved forward and Operating Systems was moved backward, fixing the reversed logic of underlying categories in the original version.
• Added “& Cooperation” to the English “About Me” to 100% match the semantics of the Chinese “关于我 & 合作”.
• Retained the site’s original English abbreviations: Dev, App, and OS, maintaining the site’s original visual style without altering historical terminology.

VI. Subsequent Iteration Plan

1. Add a secondary dropdown to Development Tools: To house the [Plugins/Extensions] category and streamline the length of the main navigation.
2. Add a secondary dropdown to About Me & Cooperation: To house the [Independence and Freedom] essay section.
3. Unified sidebar display: For the three niche categories: IT Community, Enterprise Applications, and Others.

系列导航