Adding classes to Magento 2 top bar

Question

Magento 2 topbar has the following code, by default:

<nav class="navigation" data-action="navigation">
  <ul>
    <li class="level0 nav-1 first level-top ui-menu-item" role="presentation"><a href="#" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem">Link 1</a></li>
    <li class="level0 nav-1 first level-top ui-menu-item" role="presentation"><a href="#" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem">Link 2</a></li>
  </ul>
</nav>

I have included bootstrap.css in my child-theme and I would like to take advantage of that by turning it into:

<nav class="navigation navbar navbar-default" data-action="navigation">
  <ul class="nav navbar-nav">
    <li class="level0 nav-1 first level-top ui-menu-item" role="presentation"><a href="#" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem">Link 1</a></li>
    <li class="level0 nav-1 first level-top ui-menu-item" role="presentation"><a href="#" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem">Link 2</a></li>
  </ul>
</nav>

What template file must I edit in order to achieve this?

Answer 1

You need to override your core Magento_Theme module file into your custom theme,

Core File Location,

vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml

New File Location, app/design/frontend/{Vendorname}/{themename}/Magento_Theme/templates/html/topmenu.phtml file.

Answer 2

To modify this, you'll need to take the following file into your theme:

magento/module-theme/view/frontend/templates/html/topmenu.phtml

Inside of this file you'll find the topmenu html. Make sure you're running developer mode so you don't need to re-deploy the static content.

This will mean the file will end up in the following:

Vendor/default/Magento_Theme/templates/html/topmenu.phtml

Hope this helps.