Ashlar Components

On December 15, 2025 we will be updating the CDN to utilize Ashlar 6. These are the changes you need to make to your codebase to transition to Ashlar 6. These changes can happen before, during, or after the update.

1. Remove Pre-header

Remove both the pre-header.js script tag and the <wwu-pre-header></wwu-pre-header> component from your HTML

<wwu-pre-header></wwu-pre-header>

<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/pre-header.js"></script>

You will also need to add a skip-to-content link to your HTML. A good place to add this is inside the <header> tag, before the <wwu-header> component.

<header>
  <a href="#main-content" class="skip-link"><span class="skip-link-text">Skip to Content </span></a>
  <wwu-header></wwu-header>
</header>

Be sure that your <main> element has an id="main-content" attribute:

<main id="main-content">...</main>

2. Add Display Settings

Add the following script near the other scripts you load on the page

<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/display-settings.js"></script>

3. Optional: Enable Desktop Menu Toggle

There are two menu options in Ashlar 6. Option A is similar to Ashlar 5, where the menu is hidden behind a toggle for small screens/mobile devices, but is shown on desktop devices. Option B allows you to have the menu hidden behind a toggle regardless of screen size. Option B is good for large, complex menus. You must use the <wwu-main-nav> component for your menu markup to utilize Option B.

• If you would like Option A, you don't need to take any additional steps.
• If you would like Option B, add desktop-hamburger-on as an attribute to your <wwu-menu> tag

<wwu-main-nav desktop-hamburger-on>...</wwu-main-nav>