wc-bootstrap/templates/myaccount/navigation.html.twig

{#
 # My Account Navigation (Bootstrap 5 Override)
 #
 # Renders the sidebar navigation for the My Account area
 # using Bootstrap list-group component with icons.
 # Responsive: offcanvas on mobile, sticky sidebar on desktop.
 #
 # WooCommerce PHP equivalent: myaccount/navigation.php
 #
 # @package WcBootstrap
 # @since 0.1.0
 #}

{% set endpoint_icons = {
    'dashboard':       'bi-speedometer2',
    'orders':          'bi-bag',
    'downloads':       'bi-download',
    'edit-address':    'bi-geo-alt',
    'payment-methods': 'bi-credit-card',
    'edit-account':    'bi-person-gear',
    'customer-logout': 'bi-box-arrow-right',
} %}

{{ do_action('woocommerce_before_account_navigation') }}

<button class="btn btn-outline-secondary w-100 mb-3 d-lg-none"
        type="button"
        data-bs-toggle="offcanvas"
        data-bs-target="#accountNav"
        aria-controls="accountNav">
    <i class="bi bi-list me-1" aria-hidden="true"></i>
    {{ __('Account menu') }}
</button>

<div class="offcanvas-lg offcanvas-start" id="accountNav" tabindex="-1"
     aria-labelledby="accountNavLabel">
    <div class="offcanvas-header d-lg-none">
        <h5 class="offcanvas-title" id="accountNavLabel">{{ __('Account menu') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                data-bs-target="#accountNav" aria-label="{{ __('Close') }}"></button>
    </div>
    <div class="offcanvas-body p-0">
        <nav class="woocommerce-MyAccount-navigation position-sticky"
             style="top: 5rem;"
             aria-label="{{ __('Account navigation') }}">
            <div class="list-group">
                {% for endpoint, label in wc_get_account_menu_items() %}
                    {% set is_active = wc_get_account_menu_item_classes(endpoint) matches '/is-active/' %}
                    <a href="{{ wc_get_account_endpoint_url(endpoint)|esc_url }}"
                       class="list-group-item list-group-item-action d-flex align-items-center{% if is_active %} active{% endif %}"
                       {% if is_active %}aria-current="page"{% endif %}>
                        {% if endpoint_icons[endpoint] is defined %}
                            <i class="bi {{ endpoint_icons[endpoint] }} me-2" aria-hidden="true"></i>
                        {% endif %}
                        {{ label|esc_html }}
                    </a>
                {% endfor %}
            </div>
        </nav>
    </div>
</div>

{{ do_action('woocommerce_after_account_navigation') }}