diff --git a/docs/navigation-blocks.md b/docs/navigation-blocks.md index d8eb3fac..4361f14b 100644 --- a/docs/navigation-blocks.md +++ b/docs/navigation-blocks.md @@ -8,13 +8,30 @@ The site navigation system is built using a collection of custom WordPress block ### Block Hierarchy -The navigation system consists of four main blocks that work together: +The navigation system consists of four main blocks that work together with a centralized styling approach: -1. **Navigation Wrapper** (`tribe/navigation-wrapper`) - Structural container +1. **Navigation Wrapper** (`tribe/navigation-wrapper`) - Central styling coordinator and structural container 2. **Mega Menu Item** (`tribe/mega-menu-item`) - Complex dropdown menus 3. **Standard Menu Item** (`tribe/standard-menu-item`) - Simple menu items with optional dropdowns 4. **Navigation Link** (`tribe/navigation-link`) - Individual link items +### CSS Architecture + +The styling architecture follows a centralized coordinator pattern: + +**Navigation Wrapper** acts as the central styling coordinator that handles: +- Consolidated toggle button styles (shared between mega and standard menu items) +- First-level navigation styling with animated underlines +- Context-specific behavior for Primary vs Utility menus +- Responsive adaptations and mobile behavior + +**Individual Blocks** handle only their specific content: +- **Navigation Link**: Base link styling only +- **Mega Menu Item**: Dropdown container and content styling +- **Standard Menu Item**: Basic positioning and submenu wrapper styling + +This architecture eliminates code duplication and creates a single source of truth for navigation styling. + ## HTML Structure & Implementation @@ -102,16 +119,24 @@ The navigation system consists of four main blocks that work together: ### 1. Navigation Wrapper (`tribe/navigation-wrapper`) -**Purpose**: A structural block that wraps menu items in a semantic `