[{"data":1,"prerenderedAt":75},["Reactive",2],{"blog-post-markdown-navigation-menus-site-structure-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":49,"related":50},"markdown-navigation-menus-site-structure-complete-guide","Markdown Navigation Menus and Site Structure: Complete Guide for Professional Documentation Architecture and User Experience","Master navigation menus and site structure in Markdown documentation systems. Learn hierarchical organization, breadcrumb navigation, sidebar generation, and accessibility best practices for comprehensive user experience.","Navigation menus and site structure in Markdown documentation systems provide essential organizational frameworks that guide users through complex information hierarchies while maintaining…","2025-09-19","Tutorial","Matthew Rathbone","markdown navigation, markdown menus, markdown site structure, documentation navigation, markdown sidebar, breadcrumb navigation, markdown table of contents, site architecture markdown",24,"\u003Cp>Navigation menus and site structure in Markdown documentation systems provide essential organizational frameworks that guide users through complex information hierarchies while maintaining intuitive browsing experiences and efficient content discovery. While Markdown excels at content creation, sophisticated navigation requires strategic planning, automated generation techniques, and platform-specific implementations that transform flat file structures into comprehensive documentation ecosystems.\u003C/p>\n\u003Ch2 id=\"why-master-navigation-and-site-structure\">Why Master Navigation and Site Structure?\u003C/h2>\n\u003Cp>Professional navigation implementation provides essential benefits for documentation systems:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>User Experience Enhancement\u003C/strong>: Clear navigation reduces cognitive load and improves content discoverability\u003C/li>\n\u003Cli>\u003Cstrong>Content Scalability\u003C/strong>: Well-structured navigation accommodates growing documentation without user confusion  \u003C/li>\n\u003Cli>\u003Cstrong>SEO Optimization\u003C/strong>: Logical site structure improves search engine crawling and content indexing\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Compliance\u003C/strong>: Proper navigation markup ensures screen reader compatibility and keyboard navigation\u003C/li>\n\u003Cli>\u003Cstrong>Maintenance Efficiency\u003C/strong>: Automated navigation generation reduces manual updates and inconsistencies\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-navigation-concepts\">Foundation Navigation Concepts\u003C/h2>\n\u003Ch3 id=\"hierarchical-content-organization\">Hierarchical Content Organization\u003C/h3>\n\u003Cp>Effective documentation structure follows logical information architecture principles:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Documentation Structure Example\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Primary Navigation Structure\u003C/span>\n\u003Cspan class=\"hljs-code\">```\n/docs/\n├── README.md                 # Landing page / introduction\n├── getting-started/\n│   ├── README.md            # Getting Started overview\n│   ├── installation.md      # Installation guide\n│   ├── quick-start.md       # Quick start tutorial\n│   └── configuration.md     # Basic configuration\n├── user-guide/\n│   ├── README.md            # User Guide overview  \n│   ├── basic-usage.md       # Basic usage patterns\n│   ├── advanced-features.md # Advanced functionality\n│   └── troubleshooting.md   # Common issues\n├── api-reference/\n│   ├── README.md            # API overview\n│   ├── authentication.md    # Auth documentation\n│   ├── endpoints/\n│   │   ├── users.md         # User endpoints\n│   │   ├── projects.md      # Project endpoints\n│   │   └── billing.md       # Billing endpoints\n│   └── examples.md          # Code examples\n└── deployment/\n    ├── README.md            # Deployment overview\n    ├── development.md       # Dev environment\n    ├── staging.md           # Staging setup\n    └── production.md        # Production deployment\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"directory-based-navigation-structure\">Directory-Based Navigation Structure\u003C/h2>\n\u003Cpre>\u003Ccode>project-docs/\n├── index.md                 # Main entry point\n├── _navigation.yml          # Navigation configuration\n├── _config.yml             # Site configuration\n├── concepts/\n│   ├── index.md            # Section overview\n│   ├── architecture.md     # System architecture\n│   └── data-flow.md        # Data flow concepts\n├── tutorials/\n│   ├── index.md            # Tutorial index\n│   ├── beginner/\n│   │   ├── index.md        # Beginner overview\n│   │   ├── lesson-01.md    # First lesson\n│   │   └── lesson-02.md    # Second lesson\n│   └── advanced/\n│       ├── index.md        # Advanced overview\n│       └── optimization.md # Performance optimization\n└── reference/\n    ├── index.md            # Reference overview\n    ├── cli-commands.md     # Command reference\n    └── configuration.md    # Config reference\n\u003C/code>\u003C/pre>\u003Ch3 id=\"frontmatter-navigation-metadata\">Frontmatter Navigation Metadata\u003C/h3>\n\u003Cp>Strategic frontmatter enables automated navigation generation:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">---\ntitle: "User Authentication Guide"\ndescription: "Complete guide to implementing user authentication with secure token management"\nnav\u003Cspan class=\"hljs-emphasis\">_title: "Authentication"        # Shorter navigation display name\nnav_\u003C/span>order: 2                      # Position in navigation\nnav\u003Cspan class=\"hljs-emphasis\">_section: "User Guide"         # Section grouping\nparent: "user-guide"              # Parent directory reference\nbreadcrumb: "Home > User Guide > Authentication"\nsidebar: true                     # Include in sidebar navigation\ntoc: true                         # Generate table of contents\nnav_\u003C/span>exclude: false               # Include in navigation\nweight: 200                      # Alternative ordering system\ncategory: "Security"             # Content categorization\ntags: ["authentication", "security", "api"]\n\u003Cspan class=\"hljs-section\">last\u003Cspan class=\"hljs-emphasis\">_modified_\u003C/span>at: 2025-09-19    # Update tracking\n---\u003C/span>\n\n\u003Cspan class=\"hljs-section\"># User Authentication Guide\u003C/span>\n\nThis guide covers comprehensive authentication implementation including token management, session handling, and security best practices for production applications.\n\n\u003Cspan class=\"hljs-section\">## Quick Navigation\u003C/span>\n\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Getting Started\u003C/span>](\u003Cspan class=\"hljs-link\">#getting-started\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Token Management\u003C/span>](\u003Cspan class=\"hljs-link\">#token-management\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Session Handling\u003C/span>](\u003Cspan class=\"hljs-link\">#session-handling\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Security Considerations\u003C/span>](\u003Cspan class=\"hljs-link\">#security-considerations\u003C/span>)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [\u003Cspan class=\"hljs-string\">Implementation Examples\u003C/span>](\u003Cspan class=\"hljs-link\">#implementation-examples\u003C/span>)\n\n\u003Cspan class=\"hljs-section\">## Getting Started\u003C/span>\n\nAuthentication forms the foundation of secure application access...\n\u003C/code>\u003C/pre>\u003Ch2 id=\"automated-navigation-generation\">Automated Navigation Generation\u003C/h2>\n\u003Ch3 id=\"jekyll-navigation-systems\">Jekyll Navigation Systems\u003C/h3>\n\u003Cp>Jekyll provides sophisticated navigation generation through collections and data files:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># _data/navigation.yml - Primary navigation structure\u003C/span>\n\u003Cspan class=\"hljs-attr\">primary:\u003C/span>\n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Getting Started"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/getting-started/"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">description:\u003C/span> \u003Cspan class=\"hljs-string\">"Installation, setup, and basic configuration"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Installation"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/getting-started/installation/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Quick Start"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/getting-started/quick-start/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Configuration"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/getting-started/configuration/"\u003C/span>\n        \n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"User Guide"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">description:\u003C/span> \u003Cspan class=\"hljs-string\">"Comprehensive usage documentation"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Basic Usage"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/basic-usage/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Advanced Features"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/advanced-features/"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n          \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Custom Workflows"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/advanced-features/workflows/"\u003C/span>\n          \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Automation"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/advanced-features/automation/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Troubleshooting"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/user-guide/troubleshooting/"\u003C/span>\n\n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"API Reference"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/api-reference/"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">description:\u003C/span> \u003Cspan class=\"hljs-string\">"Complete API documentation and examples"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Authentication"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/api-reference/authentication/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Endpoints"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/api-reference/endpoints/"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n          \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Users"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/api-reference/endpoints/users/"\u003C/span>\n          \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Projects"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/api-reference/endpoints/projects/"\u003C/span>\n\n\u003Cspan class=\"hljs-attr\">sidebar:\u003C/span>\n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Documentation"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Overview"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Architecture"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/architecture/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Contributing"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/contributing/"\u003C/span>\n\n\u003Cspan class=\"hljs-attr\">footer:\u003C/span>\n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Resources"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Blog"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/blog/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Examples"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/examples/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Community"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/community/"\u003C/span>\n        \n  \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Support"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">children:\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Help Center"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/help/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Contact"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/contact/"\u003C/span>\n      \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Status"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/status/"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">external:\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/navigation.html - Main navigation component -->\n<nav class="main-navigation" role="navigation" aria-label="Main navigation">\n  <div class="nav-container">\n    <div class="nav-brand">\n      <a href="{{ site.baseurl }}/" class="nav-logo">\n        <img src="{{ '/assets/images/logo.svg' | relative_url }}" alt="{{ site.title }}" width="120" height="40">\n      </a>\n      \n      <button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">\n        <span class="hamburger-line"></span>\n        <span class="hamburger-line"></span>\n        <span class="hamburger-line"></span>\n      </button>\n    </div>\n    \n    <div class="nav-menu" id="nav-menu">\n      <ul class="nav-list">\n        {% for item in site.data.navigation.primary %}\n          <li class="nav-item{% if item.children %} has-dropdown{% endif %}">\n            <a href="{{ item.url | relative_url }}" \n               class="nav-link{% if page.url contains item.url %} active{% endif %}"\n               {% if item.children %}aria-haspopup="true" aria-expanded="false"{% endif %}>\n              {{ item.title }}\n              {% if item.children %}\n                <svg class="nav-arrow" width="12" height="8" viewBox="0 0 12 8" aria-hidden="true">\n                  <path d="M1 1l5 5 5-5" stroke="currentColor" fill="none" stroke-width="2"/>\n                </svg>\n              {% endif %}\n            </a>\n            \n            {% if item.children %}\n              <div class="nav-dropdown">\n                <div class="nav-dropdown-content">\n                  {% if item.description %}\n                    <div class="nav-dropdown-header">\n                      <h3>{{ item.title }}</h3>\n                      <p>{{ item.description }}</p>\n                    </div>\n                  {% endif %}\n                  \n                  <ul class="nav-dropdown-list">\n                    {% for child in item.children %}\n                      <li class="nav-dropdown-item">\n                        <a href="{{ child.url | relative_url }}" \n                           class="nav-dropdown-link{% if page.url == child.url %} active{% endif %}">\n                          <div class="nav-dropdown-link-content">\n                            <span class="nav-dropdown-link-title">{{ child.title }}</span>\n                            {% if child.description %}\n                              <span class="nav-dropdown-link-desc">{{ child.description }}</span>\n                            {% endif %}\n                          </div>\n                        </a>\n                        \n                        {% if child.children %}\n                          <ul class="nav-dropdown-sublist">\n                            {% for subchild in child.children %}\n                              <li class="nav-dropdown-subitem">\n                                <a href="{{ subchild.url | relative_url }}" \n                                   class="nav-dropdown-sublink{% if page.url == subchild.url %} active{% endif %}">\n                                  {{ subchild.title }}\n                                </a>\n                              </li>\n                            {% endfor %}\n                          </ul>\n                        {% endif %}\n                      </li>\n                    {% endfor %}\n                  </ul>\n                </div>\n              </div>\n            {% endif %}\n          </li>\n        {% endfor %}\n      </ul>\n      \n      <div class="nav-actions">\n        <div class="nav-search">\n          <input type="search" class="nav-search-input" placeholder="Search docs..." aria-label="Search documentation">\n          <button class="nav-search-button" aria-label="Submit search">\n            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">\n              <path d="M11.5 7a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0zM13.25 11.69L16 14.44l-1.44 1.44-2.81-2.75a6.5 6.5 0 1 1 1.5-1.44z" fill="currentColor"/>\n            </svg>\n          </button>\n        </div>\n        \n        <a href="{{ site.data.navigation.cta.url | relative_url }}" class="nav-cta-button">\n          {{ site.data.navigation.cta.text | default: "Get Started" }}\n        </a>\n      </div>\n    </div>\n  </div>\n</nav>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/sidebar.html - Documentation sidebar -->\n<aside class="sidebar" role="complementary" aria-label="Documentation navigation">\n  <div class="sidebar-content">\n    <!-- Section-based navigation -->\n    {% assign current_section = page.nav_section | default: page.collection %}\n    {% assign sorted_pages = site.pages | where: "nav_section", current_section | sort: "nav_order" %}\n    \n    {% if sorted_pages.size > 0 %}\n      <nav class="sidebar-nav">\n        <h2 class="sidebar-title">{{ current_section | capitalize }}</h2>\n        \n        <ul class="sidebar-list">\n          {% for nav_page in sorted_pages %}\n            {% unless nav_page.nav_exclude %}\n              <li class="sidebar-item{% if page.url == nav_page.url %} active{% endif %}">\n                <a href="{{ nav_page.url | relative_url }}" class="sidebar-link">\n                  <span class="sidebar-link-text">\n                    {{ nav_page.nav_title | default: nav_page.title }}\n                  </span>\n                  \n                  {% if nav_page.description %}\n                    <span class="sidebar-link-desc">{{ nav_page.description | truncate: 80 }}</span>\n                  {% endif %}\n                </a>\n                \n                <!-- Sub-pages based on directory structure -->\n                {% assign sub_pages = site.pages | where_exp: "item", "item.url contains nav_page.url" %}\n                {% assign sub_pages = sub_pages | where_exp: "item", "item.url != nav_page.url" %}\n                {% assign sub_pages = sub_pages | sort: "nav_order" %}\n                \n                {% if sub_pages.size > 0 %}\n                  <ul class="sidebar-sublist">\n                    {% for sub_page in sub_pages %}\n                      <li class="sidebar-subitem{% if page.url == sub_page.url %} active{% endif %}">\n                        <a href="{{ sub_page.url | relative_url }}" class="sidebar-sublink">\n                          {{ sub_page.nav_title | default: sub_page.title }}\n                        </a>\n                      </li>\n                    {% endfor %}\n                  </ul>\n                {% endif %}\n              </li>\n            {% endunless %}\n          {% endfor %}\n        </ul>\n      </nav>\n    {% endif %}\n    \n    <!-- Table of Contents for current page -->\n    {% if page.toc %}\n      {% include table-of-contents.html %}\n    {% endif %}\n    \n    <!-- Additional sidebar content -->\n    {% if site.data.navigation.sidebar %}\n      {% for sidebar_section in site.data.navigation.sidebar %}\n        <div class="sidebar-section">\n          <h3 class="sidebar-section-title">{{ sidebar_section.title }}</h3>\n          <ul class="sidebar-section-list">\n            {% for item in sidebar_section.children %}\n              <li class="sidebar-section-item">\n                <a href="{{ item.url | relative_url }}" class="sidebar-section-link">\n                  {{ item.title }}\n                </a>\n              </li>\n            {% endfor %}\n          </ul>\n        </div>\n      {% endfor %}\n    {% endif %}\n  </div>\n</aside>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-navigation-implementation\">Hugo Navigation Implementation\u003C/h3>\n\u003Cp>Hugo provides powerful menu systems and content organization:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-comment\"># config.yml - Hugo navigation configuration\u003C/span>\n\u003Cspan class=\"hljs-attr\">params:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">mainSections:\u003C/span> [\u003Cspan class=\"hljs-string\">"docs"\u003C/span>, \u003Cspan class=\"hljs-string\">"tutorials"\u003C/span>, \u003Cspan class=\"hljs-string\">"reference"\u003C/span>]\n  \n  \u003Cspan class=\"hljs-comment\"># Navigation settings\u003C/span>\n  \u003Cspan class=\"hljs-attr\">navigation:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">primary_menu:\u003C/span> \u003Cspan class=\"hljs-string\">"main"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">sidebar_menu:\u003C/span> \u003Cspan class=\"hljs-string\">"docs"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">footer_menu:\u003C/span> \u003Cspan class=\"hljs-string\">"footer"\u003C/span>\n    \n\u003Cspan class=\"hljs-attr\">menu:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">main:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"docs"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Documentation"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">10\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"getting-started"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Getting Started"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/getting-started/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">parent:\u003C/span> \u003Cspan class=\"hljs-string\">"docs"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">10\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"user-guide"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"User Guide"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/user-guide/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">parent:\u003C/span> \u003Cspan class=\"hljs-string\">"docs"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">20\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"api"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"API Reference"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/api/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">parent:\u003C/span> \u003Cspan class=\"hljs-string\">"docs"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">30\u003C/span>\n      \n  \u003Cspan class=\"hljs-attr\">docs:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"overview"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Overview"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"installation"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Installation"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/installation/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">10\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"configuration"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Configuration"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/docs/configuration/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">20\u003C/span>\n      \n  \u003Cspan class=\"hljs-attr\">footer:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"community"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Community"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/community/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">10\u003C/span>\n      \n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">identifier:\u003C/span> \u003Cspan class=\"hljs-string\">"support"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Support"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">url:\u003C/span> \u003Cspan class=\"hljs-string\">"/support/"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">weight:\u003C/span> \u003Cspan class=\"hljs-number\">20\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/partials/navigation.html - Hugo main navigation -->\n<nav class="main-navigation" role="navigation" aria-label="Main navigation">\n  <div class="nav-container">\n    <div class="nav-brand">\n      <a href="{{ .Site.BaseURL }}" class="nav-logo">\n        <img src="{{ "images/logo.svg" | relURL }}" alt="{{ .Site.Title }}" width="120" height="40">\n      </a>\n      \n      <button class="nav-toggle" aria-label="Toggle navigation">\n        <span class="hamburger"></span>\n      </button>\n    </div>\n    \n    <div class="nav-menu">\n      <ul class="nav-list">\n        {{ range .Site.Menus.main }}\n          {{ if .HasChildren }}\n            <li class="nav-item has-dropdown">\n              <a href="{{ .URL | relURL }}" class="nav-link" aria-haspopup="true">\n                {{ .Name }}\n                <svg class="nav-arrow" width="12" height="8" viewBox="0 0 12 8">\n                  <path d="M1 1l5 5 5-5" stroke="currentColor" fill="none" stroke-width="2"/>\n                </svg>\n              </a>\n              \n              <div class="nav-dropdown">\n                <ul class="nav-dropdown-list">\n                  {{ range .Children }}\n                    <li class="nav-dropdown-item">\n                      <a href="{{ .URL | relURL }}" class="nav-dropdown-link">\n                        <span class="nav-dropdown-title">{{ .Name }}</span>\n                        {{ with .Params.description }}\n                          <span class="nav-dropdown-desc">{{ . }}</span>\n                        {{ end }}\n                      </a>\n                    </li>\n                  {{ end }}\n                </ul>\n              </div>\n            </li>\n          {{ else }}\n            <li class="nav-item">\n              <a href="{{ .URL | relURL }}" class="nav-link{{ if $.IsMenuCurrent "main" . }} active{{ end }}">\n                {{ .Name }}\n              </a>\n            </li>\n          {{ end }}\n        {{ end }}\n      </ul>\n      \n      <div class="nav-actions">\n        {{ partial "search.html" . }}\n        <a href="/get-started/" class="nav-cta-button">Get Started</a>\n      </div>\n    </div>\n  </div>\n</nav>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/partials/sidebar.html - Documentation sidebar -->\n<aside class="sidebar" role="complementary" aria-label="Documentation navigation">\n  <div class="sidebar-content">\n    {{ if .Site.Menus.docs }}\n      <nav class="sidebar-nav">\n        <h2 class="sidebar-title">Documentation</h2>\n        \n        {{ partial "sidebar-menu.html" (dict "menu" .Site.Menus.docs "page" . "level" 0) }}\n      </nav>\n    {{ end }}\n    \n    <!-- Auto-generated section navigation -->\n    {{ $section := .Section }}\n    {{ if $section }}\n      {{ $pages := where .Site.RegularPages "Section" $section }}\n      {{ $pages := $pages | where ".Params.sidebar" "!=" false }}\n      {{ $pages := sort $pages ".Params.weight" }}\n      \n      {{ if gt (len $pages) 1 }}\n        <nav class="sidebar-section-nav">\n          <h3 class="sidebar-section-title">{{ $section | humanize }}</h3>\n          \n          <ul class="sidebar-section-list">\n            {{ range $pages }}\n              <li class="sidebar-section-item{{ if eq .RelPermalink $.RelPermalink }} active{{ end }}">\n                <a href="{{ .RelPermalink }}" class="sidebar-section-link">\n                  {{ .Params.nav_title | default .Title }}\n                </a>\n              </li>\n            {{ end }}\n          </ul>\n        </nav>\n      {{ end }}\n    {{ end }}\n    \n    <!-- Table of contents -->\n    {{ if .Params.toc }}\n      {{ .TableOfContents }}\n    {{ end }}\n  </div>\n</aside>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\"><!-- layouts/partials/sidebar-menu.html - Recursive menu rendering -->\n<ul class="sidebar-list sidebar-level-{{ .level }}">\n  {{ range .menu }}\n    <li class="sidebar-item{{ if .Page.IsMenuCurrent "docs" . }} current{{ end }}{{ if .Page.HasMenuCurrent "docs" . }} ancestor{{ end }}">\n      <a href="{{ .URL | relURL }}" class="sidebar-link">\n        <span class="sidebar-link-text">{{ .Name }}</span>\n        \n        {{ with .Params.description }}\n          <span class="sidebar-link-desc">{{ . | truncate 60 }}</span>\n        {{ end }}\n        \n        {{ if .HasChildren }}\n          <svg class="sidebar-toggle" width="12" height="8" viewBox="0 0 12 8">\n            <path d="M1 1l5 5 5-5" stroke="currentColor" fill="none" stroke-width="2"/>\n          </svg>\n        {{ end }}\n      </a>\n      \n      {{ if .HasChildren }}\n        {{ partial "sidebar-menu.html" (dict "menu" .Children "page" .Page "level" (add .level 1)) }}\n      {{ end }}\n    </li>\n  {{ end }}\n</ul>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"breadcrumb-navigation-implementation\">Breadcrumb Navigation Implementation\u003C/h2>\n\u003Ch3 id=\"automated-breadcrumb-generation\">Automated Breadcrumb Generation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* breadcrumb-navigation.css - Professional breadcrumb styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8fafc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n  \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#64748b\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-item\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-item\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span>)\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'/'\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1d4ed8\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: underline;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-current\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Breadcrumb with icons */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-icon\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.375rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile breadcrumb */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">640px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.breadcrumb-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.breadcrumb\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8125rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.breadcrumb-item\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span>)\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:first\u003C/span>-child) {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.breadcrumb-item\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:nth-last-child\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>)\u003Cspan class=\"hljs-selector-pseudo\">::before\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">'... / '\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#cbd5e1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Structured data breadcrumb */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.breadcrumb-structured\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/breadcrumb.html - Jekyll breadcrumb component -->\n<nav class="breadcrumb-container" aria-label="Breadcrumb navigation">\n  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">\n    <!-- Home link -->\n    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n      <a href="{{ site.baseurl }}/" class="breadcrumb-link" itemprop="item">\n        <svg class="breadcrumb-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">\n          <path d="M10 2L3 9v9a1 1 0 001 1h12a1 1 0 001-1V9l-7-7z"/>\n        </svg>\n        <span itemprop="name">Home</span>\n      </a>\n      <meta itemprop="position" content="1" />\n    </li>\n    \n    <!-- Generate breadcrumb from page path -->\n    {% assign url_parts = page.url | split: '/' %}\n    {% assign breadcrumb_url = '' %}\n    {% assign position = 2 %}\n    \n    {% for part in url_parts %}\n      {% if part != '' and part != 'index.html' %}\n        {% assign breadcrumb_url = breadcrumb_url | append: '/' | append: part %}\n        {% assign breadcrumb_page = site.pages | where: "url", breadcrumb_url | first %}\n        \n        {% if breadcrumb_page or forloop.last %}\n          <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n            {% if forloop.last %}\n              <span class="breadcrumb-current" itemprop="name">\n                {{ page.nav_title | default: page.title | default: part | humanize }}\n              </span>\n              <meta itemprop="position" content="{{ position }}" />\n            {% else %}\n              <a href="{{ breadcrumb_url | relative_url }}" class="breadcrumb-link" itemprop="item">\n                <span itemprop="name">\n                  {{ breadcrumb_page.nav_title | default: breadcrumb_page.title | default: part | humanize }}\n                </span>\n              </a>\n              <meta itemprop="position" content="{{ position }}" />\n            {% endif %}\n          </li>\n          {% assign position = position | plus: 1 %}\n        {% endif %}\n      {% endif %}\n    {% endfor %}\n  </ol>\n</nav>\n\n<!-- Structured data for search engines -->\n<script type="application/ld+json">\n{\n  "@context": "https://schema.org",\n  "@type": "BreadcrumbList",\n  "itemListElement": [\n    {\n      "@type": "ListItem",\n      "position": 1,\n      "name": "Home",\n      "item": "{{ site.url }}{{ site.baseurl }}/"\n    }{% assign position = 2 %}{% assign breadcrumb_url = '' %}{% for part in url_parts %}{% if part != '' and part != 'index.html' %}{% assign breadcrumb_url = breadcrumb_url | append: '/' | append: part %}{% assign breadcrumb_page = site.pages | where: "url", breadcrumb_url | first %}{% if breadcrumb_page or forloop.last %},\n    {\n      "@type": "ListItem",\n      "position": {{ position }},\n      "name": "{% if forloop.last %}{{ page.nav_title | default: page.title | default: part | humanize }}{% else %}{{ breadcrumb_page.nav_title | default: breadcrumb_page.title | default: part | humanize }}{% endif %}"{% unless forloop.last %},\n      "item": "{{ site.url }}{{ breadcrumb_url }}"{% endunless %}\n    }{% assign position = position | plus: 1 %}{% endif %}{% endif %}{% endfor %}\n  ]\n}\n</script>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-go-html-template\">\n<!-- layouts/partials/breadcrumb.html - Hugo breadcrumb implementation -->\n<nav class="breadcrumb-container" aria-label="Breadcrumb navigation">\n  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">\n    <!-- Home -->\n    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n      <a href="{{ .Site.BaseURL }}" class="breadcrumb-link" itemprop="item">\n        <svg class="breadcrumb-icon" viewBox="0 0 20 20" fill="currentColor">\n          <path d="M10 2L3 9v9a1 1 0 001 1h12a1 1 0 001-1V9l-7-7z"/>\n        </svg>\n        <span itemprop="name">Home</span>\n      </a>\n      <meta itemprop="position" content="1" />\n    </li>\n    \n    <!-- Section breadcrumb -->\n    {{ if .Section }}\n      {{ $section := .Site.GetPage "section" .Section }}\n      <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n        <a href="{{ $section.RelPermalink }}" class="breadcrumb-link" itemprop="item">\n          <span itemprop="name">{{ $section.Params.nav_title | default $section.Title | humanize }}</span>\n        </a>\n        <meta itemprop="position" content="2" />\n      </li>\n    {{ end }}\n    \n    <!-- Parent pages (if hierarchical) -->\n    {{ $parents := .Parent }}\n    {{ $position := 3 }}\n    \n    {{ range .Ancestors.Reverse }}\n      {{ if ne . .Site.Home }}\n        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n          <a href="{{ .RelPermalink }}" class="breadcrumb-link" itemprop="item">\n            <span itemprop="name">{{ .Params.nav_title | default .Title }}</span>\n          </a>\n          <meta itemprop="position" content="{{ $position }}" />\n        </li>\n        {{ $position = add $position 1 }}\n      {{ end }}\n    {{ end }}\n    \n    <!-- Current page -->\n    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">\n      <span class="breadcrumb-current" itemprop="name">\n        {{ .Params.nav_title | default .Title }}\n      </span>\n      <meta itemprop="position" content="{{ $position }}" />\n    </li>\n  </ol>\n</nav>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"table-of-contents-generation\">Table of Contents Generation\u003C/h2>\n\u003Ch3 id=\"automated-toc-systems\">Automated TOC Systems\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* table-of-contents.css - Professional TOC styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8fafc\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-title\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">1.125rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1f2937\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e2e8f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-list\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">list-style\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-item\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0.375rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#4b5563\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-link\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">59\u003C/span>, \u003Cspan class=\"hljs-number\">130\u003C/span>, \u003Cspan class=\"hljs-number\">246\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">padding-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-left\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Nested TOC levels */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-level-1\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.toc-level-2\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>; \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.toc-level-3\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>; \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8125rem\u003C/span>; }\n\u003Cspan class=\"hljs-selector-class\">.toc-level-4\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\u003C/span>; \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8125rem\u003C/span>; \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.8\u003C/span>; }\n\n\u003Cspan class=\"hljs-comment\">/* Sticky TOC */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-sticky\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">max-height\u003C/span>: \u003Cspan class=\"hljs-built_in\">calc\u003C/span>(\u003Cspan class=\"hljs-number\">100vh\u003C/span> - \u003Cspan class=\"hljs-number\">4rem\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Collapsible TOC */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.toc-collapsible\u003C/span> \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6b7280\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.875rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: transform \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-collapsible\u003C/span> \u003Cspan class=\"hljs-selector-class\">.toc-toggle\u003C/span>\u003Cspan class=\"hljs-selector-class\">.expanded\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-collapsible\u003C/span> \u003Cspan class=\"hljs-selector-class\">.toc-nested\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.toc-collapsible\u003C/span> \u003Cspan class=\"hljs-selector-class\">.toc-nested\u003C/span>\u003Cspan class=\"hljs-selector-class\">.collapsed\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile TOC */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.toc-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.toc-level-2\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>; }\n  \u003Cspan class=\"hljs-selector-class\">.toc-level-3\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>; }\n  \u003Cspan class=\"hljs-selector-class\">.toc-level-4\u003C/span> { \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>; }\n}\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/table-of-contents.html - Jekyll TOC generator -->\n<div class="toc-container" id="table-of-contents">\n  <h3 class="toc-title">Table of Contents</h3>\n  \n  <!-- Extract headings from content -->\n  {% assign toc_headings = content | markdownify | split: '<h' %}\n  {% assign toc_items = '' | split: '' %}\n  \n  {% for heading in toc_headings %}\n    {% if forloop.first == false %}\n      {% assign heading_level = heading | slice: 0, 1 | plus: 0 %}\n      {% if heading_level >= 2 and heading_level <= 4 %}\n        {% assign heading_content = heading | split: '>' | first %}\n        {% assign heading_id = heading_content | split: 'id="' | last | split: '"' | first %}\n        {% assign heading_text = heading | split: '>' | slice: 1, -1 | join: '>' | split: '</h' | first %}\n        \n        {% assign toc_item = heading_level | append: '|' | append: heading_id | append: '|' | append: heading_text %}\n        {% assign toc_items = toc_items | push: toc_item %}\n      {% endif %}\n    {% endif %}\n  {% endfor %}\n  \n  <!-- Render TOC with proper nesting -->\n  {% if toc_items.size > 0 %}\n    <nav class="toc-nav" aria-label="Table of contents">\n      <ul class="toc-list">\n        {% assign current_level = 2 %}\n        {% for item in toc_items %}\n          {% assign item_parts = item | split: '|' %}\n          {% assign level = item_parts[0] | plus: 0 %}\n          {% assign id = item_parts[1] %}\n          {% assign text = item_parts[2] %}\n          \n          {% if level == current_level %}\n            <li class="toc-item toc-level-{{ level }}">\n              <a href="#{{ id }}" class="toc-link" data-toc-target="{{ id }}">\n                {{ text | strip_html }}\n              </a>\n            </li>\n          {% elsif level > current_level %}\n            {% for i in (current_level..level) %}\n              {% if forloop.last %}\n                <li class="toc-item toc-level-{{ level }}">\n                  <a href="#{{ id }}" class="toc-link" data-toc-target="{{ id }}">\n                    {{ text | strip_html }}\n                  </a>\n                </li>\n              {% else %}\n                <ul class="toc-nested">\n              {% endif %}\n            {% endfor %}\n            {% assign current_level = level %}\n          {% else %}\n            {% for i in (level..current_level) %}\n              {% unless forloop.first %}\n                </ul>\n              {% endunless %}\n            {% endfor %}\n            <li class="toc-item toc-level-{{ level }}">\n              <a href="#{{ id }}" class="toc-link" data-toc-target="{{ id }}">\n                {{ text | strip_html }}\n              </a>\n            </li>\n            {% assign current_level = level %}\n          {% endif %}\n        {% endfor %}\n        \n        <!-- Close any remaining nested lists -->\n        {% for i in (2..current_level) %}\n          {% unless forloop.first %}\n            </ul>\n          {% endunless %}\n        {% endfor %}\n      </ul>\n    </nav>\n  {% endif %}\n</div>\n\n<!-- TOC JavaScript functionality -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const tocLinks = document.querySelectorAll('[data-toc-target]');\n  const headings = document.querySelectorAll('h2[id], h3[id], h4[id]');\n  \n  // Smooth scrolling for TOC links\n  tocLinks.forEach(link => {\n    link.addEventListener('click', function(e) {\n      e.preventDefault();\n      const targetId = this.getAttribute('data-toc-target');\n      const targetElement = document.getElementById(targetId);\n      \n      if (targetElement) {\n        const offsetTop = targetElement.offsetTop - 80; // Account for fixed header\n        window.scrollTo({\n          top: offsetTop,\n          behavior: 'smooth'\n        });\n        \n        // Update URL hash\n        history.pushState(null, null, '#' + targetId);\n      }\n    });\n  });\n  \n  // Highlight current section in TOC\n  function updateActiveTocLink() {\n    const scrollPosition = window.scrollY + 100;\n    let activeHeading = null;\n    \n    headings.forEach(heading => {\n      if (heading.offsetTop <= scrollPosition) {\n        activeHeading = heading;\n      }\n    });\n    \n    // Remove active class from all links\n    tocLinks.forEach(link => link.classList.remove('active'));\n    \n    // Add active class to current section\n    if (activeHeading) {\n      const activeLink = document.querySelector(`[data-toc-target="${activeHeading.id}"]`);\n      if (activeLink) {\n        activeLink.classList.add('active');\n      }\n    }\n  }\n  \n  // Update on scroll\n  window.addEventListener('scroll', updateActiveTocLink);\n  updateActiveTocLink(); // Initial call\n});\n</script>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-navigation-features\">Advanced Navigation Features\u003C/h2>\n\u003Ch3 id=\"search-integration\">Search Integration\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Advanced search integration -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-container"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input-wrapper"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"search"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input"\u003C/span> \n           \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search documentation..."\u003C/span> \n           \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Search documentation"\u003C/span>\n           \u003Cspan class=\"hljs-attr\">autocomplete\u003C/span>=\u003Cspan class=\"hljs-string\">"off"\u003C/span>\n           \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input"\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-button"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Submit search"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-icon"\u003C/span> \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"20"\u003C/span> \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"20"\u003C/span> \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 20 20"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"\u003C/span> \u003Cspan class=\"hljs-attr\">fill\u003C/span>=\u003Cspan class=\"hljs-string\">"currentColor"\u003C/span>/>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-clear"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Clear search"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: none;"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"clear-icon"\u003C/span> \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"16"\u003C/span> \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"16"\u003C/span> \u003Cspan class=\"hljs-attr\">viewBox\u003C/span>=\u003Cspan class=\"hljs-string\">"0 0 16 16"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M12 4l-8 8m0-8l8 8"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke\u003C/span>=\u003Cspan class=\"hljs-string\">"currentColor"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke-width\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke-linecap\u003C/span>=\u003Cspan class=\"hljs-string\">"round"\u003C/span>/>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: none;"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-header"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-count"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-query"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-list"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-list"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-comment\"><!-- Results populated by JavaScript -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-results-footer"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">p\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-powered-by"\u003C/span>>\u003C/span>\n        Powered by \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#"\u003C/span> \u003Cspan class=\"hljs-attr\">target\u003C/span>=\u003Cspan class=\"hljs-string\">"_blank"\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"noopener"\u003C/span>>\u003C/span>Search Engine\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">p\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// search-functionality.js - Advanced search implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DocumentationSearch\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'search-input'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResults\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'search-results'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'search-results-list'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchButton\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-button'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchClear\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-clear'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">minQueryLength\u003C/span> = options.\u003Cspan class=\"hljs-property\">minQueryLength\u003C/span> || \u003Cspan class=\"hljs-number\">2\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">maxResults\u003C/span> = options.\u003Cspan class=\"hljs-property\">maxResults\u003C/span> || \u003Cspan class=\"hljs-number\">10\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchDelay\u003C/span> = options.\u003Cspan class=\"hljs-property\">searchDelay\u003C/span> || \u003Cspan class=\"hljs-number\">300\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Load search index\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadSearchIndex\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Bind events\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Handle URL search parameters\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleUrlSearch\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadSearchIndex\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">'/search-index.json'\u003C/span>);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n    } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n      \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load search index:'\u003C/span>, error);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\u003C/span> = [];\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Search input events\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSearchInput\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>();\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>) {\n        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusFirstResult\u003C/span>();\n      }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Search button\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchButton\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Clear button\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchClear\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>();\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Click outside to close results\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-container'\u003C/span>)) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideResults\u003C/span>();\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleSearchInput\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Clear previous timer\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimer\u003C/span>) {\n      \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimer\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Update clear button visibility\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchClear\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = query.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">'block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Perform search with delay\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (query.\u003Cspan class=\"hljs-property\">length\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">minQueryLength\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimer\u003C/span> = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(query);\n      }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchDelay\u003C/span>);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (query.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideResults\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query || !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Simple search implementation - can be enhanced with fuzzy search\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchText = (item.\u003Cspan class=\"hljs-property\">title\u003C/span> + \u003Cspan class=\"hljs-string\">' '\u003C/span> + item.\u003Cspan class=\"hljs-property\">content\u003C/span> + \u003Cspan class=\"hljs-string\">' '\u003C/span> + (item.\u003Cspan class=\"hljs-property\">tags\u003C/span> || []).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>)).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> searchText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n    }).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">maxResults\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayResults\u003C/span>(results, query);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">displayResults\u003C/span>(\u003Cspan class=\"hljs-params\">results, query\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (results.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showNoResults\u003C/span>(query);\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Update results count\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> countElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-results-count'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> queryElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-results-query'\u003C/span>);\n    \n    countElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${results.length}\u003C/span> result\u003Cspan class=\"hljs-subst\">${results.length !== \u003Cspan class=\"hljs-number\">1\u003C/span> ? \u003Cspan class=\"hljs-string\">'s'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>`\u003C/span>;\n    queryElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`for "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Clear previous results\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Add results\u003C/span>\n    results.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">result, index\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> resultElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createResultElement\u003C/span>(result, query, index);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resultElement);\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showResults\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createResultElement\u003C/span>(\u003Cspan class=\"hljs-params\">result, query, index\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> li = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>);\n    li.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-result-item'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightedTitle = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightText\u003C/span>(result.\u003Cspan class=\"hljs-property\">title\u003C/span>, query);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightedExcerpt = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightText\u003C/span>(result.\u003Cspan class=\"hljs-property\">excerpt\u003C/span> || result.\u003Cspan class=\"hljs-property\">content\u003C/span>.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">150\u003C/span>) + \u003Cspan class=\"hljs-string\">'...'\u003C/span>, query);\n    \n    li.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n      <a href="\u003Cspan class=\"hljs-subst\">${result.url}\u003C/span>" class="search-result-link" data-search-index="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\n        <div class="search-result-header">\n          <h3 class="search-result-title">\u003Cspan class=\"hljs-subst\">${highlightedTitle}\u003C/span></h3>\n          <div class="search-result-meta">\n            <span class="search-result-section">\u003Cspan class=\"hljs-subst\">${result.section || \u003Cspan class=\"hljs-string\">'Documentation'\u003C/span>}\u003C/span></span>\n            \u003Cspan class=\"hljs-subst\">${result.date ? \u003Cspan class=\"hljs-string\">`<span class="search-result-date">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-built_in\">Date\u003C/span>(result.date).toLocaleDateString()}\u003C/span></span>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n          </div>\n        </div>\n        \n        <p class="search-result-excerpt">\u003Cspan class=\"hljs-subst\">${highlightedExcerpt}\u003C/span></p>\n        \n        \u003Cspan class=\"hljs-subst\">${result.tags && result.tags.length > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n          <div class="search-result-tags">\n            \u003Cspan class=\"hljs-subst\">${result.tags.map(tag => \u003Cspan class=\"hljs-string\">`<span class="search-result-tag">\u003Cspan class=\"hljs-subst\">${tag}\u003C/span></span>`\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n          </div>\n        `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n      </a>\n    `\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Add keyboard navigation\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> link = li.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-result-link'\u003C/span>);\n    link.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>) {\n        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusNextResult\u003C/span>(index);\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>) {\n        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusPreviousResult\u003C/span>(index);\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideResults\u003C/span>();\n      }\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> li;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">highlightText\u003C/span>(\u003Cspan class=\"hljs-params\">text, query\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> regex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`(\u003Cspan class=\"hljs-subst\">${query.replace(/[.*+?^${}()|[\\]\\\\]/g, \u003Cspan class=\"hljs-string\">'\\\\$&'\u003C/span>)}\u003C/span>)`\u003C/span>, \u003Cspan class=\"hljs-string\">'gi'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(regex, \u003Cspan class=\"hljs-string\">'<mark class="search-highlight">$1</mark>'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">showNoResults\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n      <li class="search-no-results">\n        <div class="search-no-results-content">\n          <h3>No results found for "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"</h3>\n          <p>Try adjusting your search terms or browse the documentation sections:</p>\n          \n          <ul class="search-suggestions">\n            <li><a href="/docs/getting-started/">Getting Started</a></li>\n            <li><a href="/docs/user-guide/">User Guide</a></li>\n            <li><a href="/docs/api/">API Reference</a></li>\n            <li><a href="/docs/troubleshooting/">Troubleshooting</a></li>\n          </ul>\n        </div>\n      </li>\n    `\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showResults\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">showResults\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResults\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">hideResults\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResults\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResults\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchClear\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideResults\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusFirstResult\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstResult = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-result-link'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstResult) {\n      firstResult.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusNextResult\u003C/span>(\u003Cspan class=\"hljs-params\">currentIndex\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-result-link'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, results.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n    results[nextIndex].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusPreviousResult\u003C/span>(\u003Cspan class=\"hljs-params\">currentIndex\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchResultsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-result-link'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      results[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleUrlSearch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> urlParams = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">URLSearchParams\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">location\u003C/span>.\u003Cspan class=\"hljs-property\">search\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> query = urlParams.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-string\">'q'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (query) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = query;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(query);\n    }\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize search when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">DocumentationSearch\u003C/span>({\n    \u003Cspan class=\"hljs-attr\">minQueryLength\u003C/span>: \u003Cspan class=\"hljs-number\">2\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">maxResults\u003C/span>: \u003Cspan class=\"hljs-number\">12\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">searchDelay\u003C/span>: \u003Cspan class=\"hljs-number\">250\u003C/span>\n  });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-workflows\">Integration with Modern Workflows\u003C/h2>\n\u003Cp>Navigation menus and site structure work seamlessly with comprehensive Markdown documentation systems. When combined with \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">table formatting and data presentation\u003C/a>, structured navigation helps users discover complex information through intuitive browsing while maintaining clear organizational principles throughout the documentation ecosystem.\u003C/p>\n\u003Cp>For large-scale documentation projects, navigation systems complement \u003Ca href=\"/blog/markdown-custom-css-classes-styling-complete-guide\">custom CSS classes and styling frameworks\u003C/a> to create consistent user experiences that scale across different content types while preserving brand identity and usability standards through systematic design implementation.\u003C/p>\n\u003Cp>When developing technical documentation with multiple content formats, navigation enhancement works effectively with \u003Ca href=\"/blog/markdown-blockquotes-advanced-styling-complete-guide\">blockquote styling and content presentation\u003C/a> to create comprehensive information architectures that guide users through complex topics while maintaining engagement through thoughtful content organization and visual hierarchy.\u003C/p>\n\u003Ch2 id=\"accessibility-and-navigation\">Accessibility and Navigation\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible navigation implementation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"main-navigation"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"navigation"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Main site navigation"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Skip links for keyboard navigation -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#main-content"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"skip-link"\u003C/span>>\u003C/span>Skip to main content\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"#sidebar-navigation"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"skip-link"\u003C/span>>\u003C/span>Skip to sidebar navigation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-brand"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Return to homepage"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"/logo.svg"\u003C/span> \u003Cspan class=\"hljs-attr\">alt\u003C/span>=\u003Cspan class=\"hljs-string\">"Documentation Site"\u003C/span> \u003Cspan class=\"hljs-attr\">width\u003C/span>=\u003Cspan class=\"hljs-string\">"120"\u003C/span> \u003Cspan class=\"hljs-attr\">height\u003C/span>=\u003Cspan class=\"hljs-string\">"40"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- Mobile navigation toggle -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-toggle"\u003C/span> \n            \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Toggle navigation menu"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">aria-expanded\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">aria-controls\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-menu"\u003C/span>\n            \u003Cspan class=\"hljs-attr\">data-nav-toggle\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"hamburger-line"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"hamburger-line"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"hamburger-line"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-menu"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-menu"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-list"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menubar"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-item"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-link"\u003C/span> \n             \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menuitem"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-haspopup\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n             \u003Cspan class=\"hljs-attr\">aria-expanded\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>>\u003C/span>\n            Documentation\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n          \n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menu"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Documentation submenu"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown-list"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/getting-started/"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown-link"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menuitem"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"-1"\u003C/span>>\u003C/span>\n                  Getting Started\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/user-guide/"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown-link"\u003C/span> \n                   \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menuitem"\u003C/span>\n                   \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"-1"\u003C/span>>\u003C/span>\n                  User Guide\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Main content area -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">main\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"main-content"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"main-content"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"main"\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"-1"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"content-container"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Page content -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">main\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- Sidebar navigation -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">aside\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"sidebar-navigation"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sidebar"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"complementary"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Page navigation"\u003C/span>\n       \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"-1"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sidebar-content"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-comment\"><!-- Sidebar content -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">aside\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* accessibility-navigation.css - Accessible navigation styles */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Skip links for keyboard users */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: -\u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-decoration\u003C/span>: none;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.skip-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.nav-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.nav-dropdown-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.sidebar-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#3b82f6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n  \u003Cspan class=\"hljs-selector-class\">.nav-link\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.nav-dropdown-link\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.sidebar-link\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.nav-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.nav-dropdown-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.sidebar-link\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: black;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n  \u003Cspan class=\"hljs-selector-class\">.nav-dropdown\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.nav-menu\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.nav-toggle\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Screen reader only content */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessible-navigation.js - Keyboard and screen reader support\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleNavigation\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-nav-toggle]'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navMenu\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'nav-menu'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dropdownToggles\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[aria-haspopup="true"]'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dropdowns\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.nav-dropdown'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindMobileNavigation\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindDropdownNavigation\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindKeyboardNavigation\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">manageFocus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindMobileNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExpanded = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, !isExpanded);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navMenu\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, isExpanded);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isExpanded) {\n          \u003Cspan class=\"hljs-comment\">// Focus first menu item when opening\u003C/span>\n          \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstMenuItem = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navMenu\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="menuitem"]'\u003C/span>);\n          \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstMenuItem) {\n            firstMenuItem.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n          }\n        }\n      });\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindDropdownNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dropdownToggles\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">toggle\u003C/span> =>\u003C/span> {\n      toggle.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleDropdown\u003C/span>(toggle);\n      });\n      \n      toggle.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>) {\n          e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">openDropdown\u003C/span>(toggle);\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusFirstDropdownItem\u003C/span>(toggle);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeAllDropdowns\u003C/span>();\n          toggle.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Handle keyboard navigation in dropdowns\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeAllDropdowns\u003C/span>();\n      }\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Dropdown menu keyboard navigation\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dropdowns\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">dropdown\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> menuItems = dropdown.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="menuitem"]'\u003C/span>);\n      \n      menuItems.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">item, index\u003C/span>) =>\u003C/span> {\n        item.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n          \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n              e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n              \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusNextItem\u003C/span>(menuItems, index);\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n              \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n              e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n              \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusPreviousItem\u003C/span>(menuItems, index);\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n              \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\u003C/span>:\n              e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n              menuItems[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n              \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\u003C/span>:\n              e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n              menuItems[menuItems.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n              \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n              e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n              \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeDropdown\u003C/span>(dropdown);\n              \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusDropdownToggle\u003C/span>(dropdown);\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n              \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Tab'\u003C/span>:\n              \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeDropdown\u003C/span>(dropdown);\n              \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n          }\n        });\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">toggleDropdown\u003C/span>(\u003Cspan class=\"hljs-params\">toggle\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> isExpanded = toggle.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isExpanded) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeDropdown\u003C/span>(toggle.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeAllDropdowns\u003C/span>();\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">openDropdown\u003C/span>(toggle);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">openDropdown\u003C/span>(\u003Cspan class=\"hljs-params\">toggle\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> dropdown = toggle.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>;\n    \n    toggle.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n    dropdown.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Set tabindex for dropdown items\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> menuItems = dropdown.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="menuitem"]'\u003C/span>);\n    menuItems.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n      item.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">closeDropdown\u003C/span>(\u003Cspan class=\"hljs-params\">dropdown\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = dropdown.\u003Cspan class=\"hljs-property\">previousElementSibling\u003C/span>;\n    \n    toggle.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n    dropdown.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Remove tabindex from dropdown items\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> menuItems = dropdown.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="menuitem"]'\u003C/span>);\n    menuItems.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n      item.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">closeAllDropdowns\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dropdowns\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">dropdown\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">closeDropdown\u003C/span>(dropdown);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusFirstDropdownItem\u003C/span>(\u003Cspan class=\"hljs-params\">toggle\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> dropdown = toggle.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstItem = dropdown.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[role="menuitem"]'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstItem) {\n      firstItem.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusDropdownToggle\u003C/span>(\u003Cspan class=\"hljs-params\">dropdown\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggle = dropdown.\u003Cspan class=\"hljs-property\">previousElementSibling\u003C/span>;\n    toggle.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusNextItem\u003C/span>(\u003Cspan class=\"hljs-params\">items, currentIndex\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextIndex = currentIndex < items.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> ? currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    items[nextIndex].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">focusPreviousItem\u003C/span>(\u003Cspan class=\"hljs-params\">items, currentIndex\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevIndex = currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span> ? currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span> : items.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    items[prevIndex].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">manageFocus\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Trap focus in mobile menu when open\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Tab'\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navToggle\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-expanded'\u003C/span>) === \u003Cspan class=\"hljs-string\">'true'\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusableElements = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navMenu\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\n          \u003Cspan class=\"hljs-string\">'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstFocusable = focusableElements[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lastFocusable = focusableElements[focusableElements.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span> && \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span> === firstFocusable) {\n          e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n          lastFocusable.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span> && \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span> === lastFocusable) {\n          e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n          firstFocusable.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n      }\n    });\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize accessible navigation\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleNavigation\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-navigation-issues\">Troubleshooting Common Navigation Issues\u003C/h2>\n\u003Ch3 id=\"mobile-navigation-problems\">Mobile Navigation Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Navigation menu not working properly on mobile devices or small screens\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Mobile navigation fixes */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.nav-menu\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: -\u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100vh\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: left \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow-y\u003C/span>: auto;\n    \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">4rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.nav-menu\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.nav-toggle\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1001\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  }\n  \n  \u003Cspan class=\"hljs-comment\">/* Ensure touch targets are large enough */\u003C/span>\n  \u003Cspan class=\"hljs-selector-class\">.nav-link\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.nav-dropdown-link\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">min-height\u003C/span>: \u003Cspan class=\"hljs-number\">44px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Fix for iOS viewport height issues */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@supports\u003C/span> (\u003Cspan class=\"hljs-attribute\">-webkit-touch-callout\u003C/span>: none) {\n  \u003Cspan class=\"hljs-selector-class\">.nav-menu\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: -webkit-fill-available;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"dropdown-menu-accessibility-issues\">Dropdown Menu Accessibility Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Dropdown menus not accessible via keyboard or screen readers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Properly structured dropdown menu -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-item"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown-toggle"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-haspopup\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-expanded\u003C/span>=\u003Cspan class=\"hljs-string\">"false"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-controls\u003C/span>=\u003Cspan class=\"hljs-string\">"dropdown-menu-1"\u003C/span>>\u003C/span>\n    Documentation\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">svg\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-arrow"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">path\u003C/span> \u003Cspan class=\"hljs-attr\">d\u003C/span>=\u003Cspan class=\"hljs-string\">"M1 1l4 4 4-4"\u003C/span> \u003Cspan class=\"hljs-attr\">stroke\u003C/span>=\u003Cspan class=\"hljs-string\">"currentColor"\u003C/span>/>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">svg\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"dropdown-menu-1"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menu"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">aria-labelledby\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-dropdown-toggle"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/getting-started/"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menuitem"\u003C/span>>\u003C/span>Getting Started\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/user-guide/"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"menuitem"\u003C/span>>\u003C/span>User Guide\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"seo-and-search-engine-issues\">SEO and Search Engine Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Poor search engine indexing or navigation not being crawled properly\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- SEO-friendly navigation structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nav\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Main navigation"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-comment\"><!-- Structured data for navigation -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"application/ld+json"\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n  {\n    \u003Cspan class=\"hljs-string\">"@context"\u003C/span>: \u003Cspan class=\"hljs-string\">"https://schema.org"\u003C/span>,\n    \u003Cspan class=\"hljs-string\">"@type"\u003C/span>: \u003Cspan class=\"hljs-string\">"SiteNavigationElement"\u003C/span>,\n    \u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Main Navigation"\u003C/span>,\n    \u003Cspan class=\"hljs-string\">"url"\u003C/span>: [\n      {\n        \u003Cspan class=\"hljs-string\">"@type"\u003C/span>: \u003Cspan class=\"hljs-string\">"WebPage"\u003C/span>,\n        \u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Documentation"\u003C/span>,\n        \u003Cspan class=\"hljs-string\">"url"\u003C/span>: \u003Cspan class=\"hljs-string\">"https://example.com/docs/"\u003C/span>\n      },\n      {\n        \u003Cspan class=\"hljs-string\">"@type"\u003C/span>: \u003Cspan class=\"hljs-string\">"WebPage"\u003C/span>, \n        \u003Cspan class=\"hljs-string\">"name"\u003C/span>: \u003Cspan class=\"hljs-string\">"Getting Started"\u003C/span>,\n        \u003Cspan class=\"hljs-string\">"url"\u003C/span>: \u003Cspan class=\"hljs-string\">"https://example.com/docs/getting-started/"\u003C/span>\n      }\n    ]\n  }\n  \u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-comment\"><!-- XML sitemap link -->\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"sitemap"\u003C/span> \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"application/xml"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/sitemap.xml"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">nav\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-comment\"><!-- HTML sitemap for crawlers -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"html-sitemap"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>Site Map\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">h2\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/"\u003C/span>>\u003C/span>Documentation\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/getting-started/"\u003C/span>>\u003C/span>Getting Started\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/user-guide/"\u003C/span>>\u003C/span>User Guide\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">a\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"/docs/api/"\u003C/span>>\u003C/span>API Reference\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">a\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">li\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">ul\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Navigation menus and site structure form the backbone of effective Markdown documentation systems, transforming flat file collections into intuitive, scalable information architectures that serve both users and search engines. By implementing automated navigation generation, accessible design patterns, and responsive mobile experiences, content creators can build documentation ecosystems that grow with their projects while maintaining excellent usability.\u003C/p>\n\u003Cp>The key to successful navigation implementation lies in understanding user mental models, implementing semantic HTML structure, and leveraging platform-specific features to automate maintenance tasks. Whether you're building technical documentation, knowledge bases, or content-heavy websites, the techniques covered in this guide provide the foundation for navigation systems that enhance user experience while reducing long-term maintenance overhead.\u003C/p>\n\u003Cp>Remember to test your navigation implementations across different devices and assistive technologies, validate SEO optimization with search console tools, and monitor user behavior to identify areas for improvement. With proper navigation architecture, your Markdown content becomes not just readable and accessible, but truly discoverable and engaging for all users who interact with your documentation systems.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43,46],{"id":16,"text":17,"level":18},"why-master-navigation-and-site-structure","Why Master Navigation and Site Structure?",2,{"id":20,"text":21,"level":18},"foundation-navigation-concepts","Foundation Navigation Concepts",{"id":23,"text":24,"level":18},"directory-based-navigation-structure","Directory-Based Navigation Structure",{"id":26,"text":27,"level":18},"automated-navigation-generation","Automated Navigation Generation",{"id":29,"text":30,"level":18},"breadcrumb-navigation-implementation","Breadcrumb Navigation Implementation",{"id":32,"text":33,"level":18},"table-of-contents-generation","Table of Contents Generation",{"id":35,"text":36,"level":18},"advanced-navigation-features","Advanced Navigation Features",{"id":38,"text":39,"level":18},"integration-with-modern-workflows","Integration with Modern Workflows",{"id":41,"text":42,"level":18},"accessibility-and-navigation","Accessibility and Navigation",{"id":44,"text":45,"level":18},"troubleshooting-common-navigation-issues","Troubleshooting Common Navigation Issues",{"id":47,"text":48,"level":18},"conclusion","Conclusion",[],[51,59,67],{"slug":52,"title":53,"description":54,"excerpt":55,"date":56,"category":9,"author":10,"keywords":57,"readingMinutes":58},"markdown-heading-hierarchy-navigation-complete-guide","Markdown Heading Hierarchy and Navigation: Complete Guide for Documentation Structure and Content Organization","Master advanced Markdown heading management techniques for creating structured documentation hierarchies, automated navigation systems, and consistent content organization. Learn heading best practices, anchor link generation, and navigation automation.","Advanced Markdown heading hierarchy and navigation systems enable sophisticated documentation architectures that provide clear content structure, intuitive navigation experiences, and scalable…","2025-10-18","markdown headings, markdown navigation, heading hierarchy, markdown table of contents, heading structure, markdown document organization, heading anchor links, markdown navigation systems",28,{"slug":60,"title":61,"description":62,"excerpt":63,"date":64,"category":9,"author":10,"keywords":65,"readingMinutes":66},"markdown-badges-shields-complete-guide","Markdown Badges and Shields: Complete Guide for Professional Documentation","Master badges and shields in Markdown for GitHub, GitLab, and documentation platforms. Learn to create custom status badges, build badges, test coverage shields, and dynamic informational elements.","Badges and shields are essential visual elements in modern technical documentation that communicate project status, build health, test coverage, and other key metrics at a glance. These compact,…","2025-08-28","markdown badges, markdown shields, github badges, build status badges, test coverage badges, shields.io badges, readme badges, documentation badges",7,{"slug":68,"title":69,"description":70,"excerpt":71,"date":72,"category":9,"author":10,"keywords":73,"readingMinutes":74},"markdown-image-captions-complete-guide","Markdown Image Captions: Complete Guide for Professional Visual Documentation","Master image captions in Markdown for professional documentation. Learn platform-specific implementations, HTML alternatives, and responsive design techniques for enhanced visual content accessibility.","Image captions in Markdown elevate visual content from simple illustrations to professional, accessible documentation that enhances reader comprehension and meets modern web accessibility…","2025-09-07","markdown image captions, image descriptions markdown, figure captions markdown, markdown image alt text, responsive image captions, markdown visual documentation, accessible image captions",17,1792184941987]