Ashlar Components

Western Header & Footer Components

In order to add the Western header, pre-header (with search and display options), and footer, add the following lines of code to your application where indicated. By including the Western Header, you also gain access to many plain HTML components within Ashlar. For other components, you may need to include a <script> or <link> to a stylesheet. These can be found in the Ashlar docs.

JavaScript files

These are the files needed to make each component work. Place near bottom of the page.

Western Header

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

Search & Display Settings

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

Footer

<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/social-media-icons.js"></script>
<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/wwu-footer.js"></script>

Header components

These are how you place the components on your page, within the HTML.

Place inside <header> tag

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

<wwu-header sitename="Your Site Name"></wwu-header>

Place inside the <footer> tag

<wwu-footer></wwu-footer>     

Western Main Navigation

A component for easy, clean coding of the main navigation.

JavaScript files

Place near the bottom of the page

<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/main-navigation.js"></script>
<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/accessible-mega-menu.js"></script>
<script src="https://ashlar.blob.core.windows.net/ashlar-theme-files/js/menu-extras.js"></script>

Sample menu markup

This should be placed inside the header, after the <wwu-header> component. 

<wwu-main-nav>
  <a href="#place1a">Menu item 1</a>

  <wwu-has-children label="Parent Item 1">
    <wwu-sub-menu>
      <a href="#place1b">Parent 1 Item 1</a>
      <a href="#place1b">Parent 1 Item two</a>
      <a href="#place1b">Parent One Item 3</a>
      <a href="#place1b">Parent 1 Item 4</a>
    </wwu-sub-menu>
  </wwu-has-children>

  <a href="#place2">Menu item 3</a>

  <wwu-has-children label="Parent Item 2">

    <wwu-sub-menu label="Sub Menu 1">
      <a href="#place1b">Parent 2 Sub Menu 1 Item 1</a>
      <a href="#place1b">Parent 2 Sub Menu 1 Item 2</a>
      <a href="#place1b">Parent 2 Sub Menu 1 Item 3</a>
      <a href="#place1b">Parent 2 Sub Menu 1 Item 4</a>
    </wwu-sub-menu>

    <wwu-sub-menu label="Sub Menu 2">
      <a href="#place1b">Parent 2 Sub Menu 2 Item 1</a>
      <a href="#place1b">Parent 2 Sub Menu 2 Item 2</a>
      <a href="#place1b">Parent 2 Sub Menu 2 Item 3</a>
      <a href="#place1b">Parent 2 Sub Menu 2 Item 4</a>
    </wwu-sub-menu>

  </wwu-has-children>
</wwu-main-nav>

If you would like a menu that is always hidden behind a toggle, regardless of screen size, add the desktop-hamburger-on attribute to your <wwu-main-nav> tag.

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