When Drupal 8 landed, I started learning its theming system from scratch — an empty theme folder on top of Stable (core’s base theme at the time). One of the first things I needed was a Bootstrap Navbar that actually worked with Drupal’s menu system. Turns out it’s cleaner than Drupal 7 ever was.
The four templates
You need to override four templates. Create these in your theme’s templates/ folder:
1. html.html.twig
Add the Bootstrap CSS and JS CDN links, and set <html class="no-js"> so Bootstrap’s JavaScript can toggle it to js.
2. page.html.twig
Replace the default page layout with Bootstrap’s container structure. Wrap the header region in a <div class="navbar navbar-default navbar-fixed-top">.
3. menu--main.html.twig
This is where the Bootstrap Navbar classes live. The key is the <ul class="nav navbar-nav"> wrapper around menu items.
{# menu--main.html.twig #}
<ul class="nav navbar-nav">
{% for item in items %}
<li{{ item.attributes.addClass(item.is_expanded ? 'dropdown' : '') }}>
{% if item.is_expanded %}
<a href="{{ item.url }}" class="dropdown-toggle" data-toggle="dropdown">
{{ item.title }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
{% for child in item.below %}
<li><a href="{{ child.url }}">{{ child.title }}</a></li>
{% endfor %}
</ul>
{% else %}
<a href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
4. block--system-menu-block--main.html.twig
Remove the default block wrapper so the menu renders directly inside your Navbar, without an extra <div> breaking the Bootstrap structure.
What’s easier than D7
In Drupal 7, you needed Menu Block module and often a custom module to manipulate the menu tree. In Drupal 8, Twig templates give you direct access to the menu structure — including the item.below array for submenus — without any additional modules. Four template overrides and you’re done.