how change Spartacus Navigation menu with custom html

Question

want to use this HTML

instead of spartacus OOTB cms html i want to change to following html structure

        <li><a href="">HOME</a></li>
        <li><a href="">THE ASSOCIATION</a></li>
            <ul class="sub-menu">
                <li>
                   <a>WHO WE ARE</a>
                </li>
            </ul>
        <li><a href="">CONTACTS</a></li> 
        <li><a href="">PRODUCTS</a></li>
            <ul class="sub-menu">
                <li>
                   <a>SHOES</a>
                </li>
                <li>
                   <a>UMBRELLAS</a>
                </li>
            </ul>          
   </ul>```

Answer 1

1. You need to override the OTB component and you can access Navigation menu through:

   node$: Observable = this.service.getNavigationNode( this.componentData.data$ );

data$: Observable = this.componentData.data$;

constructor(protected componentData:CmsComponentData, protected service: NavigationService, ) { }

You can iterate node$ in template