Add a Dropdown Menu to a Page Header

There are two ways to insert a dropdown menu into a page header.

Automatically Generate a Dropdown Menu of Child Pages

Note that some pages don’t have this option, because they don’t use the standard Page Header component. Pages that don’t have this component (for example profiles or an articles index) typically don’t need dropdown menus. The following assumes your page has a Standard Page Header component.

1. Navigate to your page’s settings.
2. Click on the Custom Data tab.
3. Check the “Activate Header Subnav” checkbox.
4. Click “Save.”

Manually Insert a Dropdown Menu

Sometimes you want to manually insert a dropdown menu into a page header. For example, you may want the user to be able to jump to sections on the current page, rather than link to child pages. To do this, copy and paste the following code into the editable region on the right-hand side of your page header and substitute your section IDs and section titles:

<div class="wvu-bg-tint p-3 w-100">
  <div class="wvu-z-index-content">
    <div class="dropdown">
      <a href="#" class="btn btn-white btn-lg bs-dropdown-toggle w-100 text-start d-flex align-items-center justify-content-between"
      role="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Jump to Section
        <span class="fa-solid fa-angle-down"></span>
      </a>
      <ul class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton1">
        <li>
          <a class="dropdown-item" href="#anchor-1">Secion 1</a>
        </li>
        <li>
          <a class="dropdown-item" href="#anchor-2">Section 2</a>
        </li>
        <li>
          <a class="dropdown-item" href="#anchor-3">Section 3</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Using Z-Index Utilities

If your dropdown menu is long, it may drop behind the conent of the following component. You can fix this by adding some utility classes to that component. Use position-relative and wvu-z-index-0.