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:

Javascript files

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

Pre-Header

<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/pre-header.js"></script>

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>

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

<wwu-pre-header></wwu-pre-header>
<wwu-header sitename="Your Site Name" regioncontent=""></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 Western pre-header and header components

 

<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>

Deprecated: CSS Links

In previous iterations of these components, the stylesheets were required. These have now been added directly to the javascript files above, so there is no need to load them separately. If you have components on an existing application, feel free to remove the following lines of code:

<!-- fonts & icons -->

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans+Extra+Condensed:wght@300;400&family=Fira+Sans:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400&family=Montserrat:wght@700;900&family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 

<!-- css files for header and footer components -->

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/normalize.css" />

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/ashlar-base.css" />

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/components/search.css" />

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/components/pre-header.css" />

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/components/wwu-header.css" />

<link rel="stylesheet" href="https://ashlar.blob.core.windows.net/ashlar-theme-files/css/components/wwu-footer.css" />