# Edit the top menu

## Summary

How to edit the site-wide top menu, including grouped dropdown items and button-styled links.

## Details

The top menu is displayed on all the pages, in the header.
To edit it, go to `src/App/templates/layout/default.html.twig` and update the items under `id="navbarHeader"`.

You can use the below as an example.

```twig
<div class="collapse navbar-collapse" id="navbarHeader">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="pageDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Grouped Pages</a>
        <div class="dropdown-menu" aria-labelledby="pageDropdown">
          <a class="dropdown-item" href="{{ url('app::index') }}">Home</a>
          <a class="dropdown-item" href="https://www.example.com/docs">Docs</a>
        </div>
      </li>
      <li class="nav-item">
          <a class="nav-link" target="_blank" href="{{ url('page::about') }}">First Link</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" target="_blank" href="https://second.example.com/">Second Link</a>
      </li>
    </ul>
</div>
```

Each `li` element is listed as an item in the top menu.

Internal links are generated with the `url()` helper, which takes a route name and returns an absolute URL.
Route names follow the `{prefix}::{template}` pattern described in [Routing](routing.md), so the pages shipped with Light are reachable as `page::about` and `page::who-we-are`, and the homepage as `app::index`.

There are two different types of elements in the example:

- The `Grouped Pages` group several urls.
When you click on the item, the elements grouped under it are listed and can be accessed.
They can be internal and/or external links.
- The `First Link` and `Second Link` are regular links, one an internal link and the other an external one.

> You can also replace the `nav-item` class for the `li` elements with `button-border` for a link that looks more like a button.

## FAQ

**Q: Which file do I edit to change the top menu?**
A: `src/App/templates/layout/default.html.twig`, the items under `id="navbarHeader"`.

**Q: How do I generate an internal link in the menu?**
A: With the `url()` helper and a route name, for example `{{ url('page::about') }}`.

**Q: Can a menu item look like a button instead of a link?**
A: Yes — replace its `nav-item` class with `button-border`.