University of Leeds Design System v1.0.18.1

Local Navigation: Highlight Active Page

Guidance

The @uol-header-local-navigation presents a set of site specific top level links allowing visitors to navigate the local site.

The purpose of this component is to provide consistent navigation throughout the site allowing users to get to key areas within the site easily.

The local navigation must remain consistent throughout the site, ie. if two pages are on the same domain or subdomain the navigation should always be the same.

Examples:

must have the same navigation

must have the same navigation

The local navigation should always start with a “Home” link that returns the user to the site root.

The local navigation supports a single level of sub-navigation to support groups of related links. Example

  • Home
  • Study
    • Undergraduate
    • Masters courses
    • Research degrees
    • …
  • Research and innovation
  • Working with business
  • Global
  • …

We do not recommend having more than one set of sub-navigation within the local navigation, as illustrated.

The sub-navigation items may also include CTAs (Calls to action). These items are styled differently and should be located at the end of the sub-navigation group.

Section navigation

Once users have navigated to a section of the site using the local navigation, additional navigation can be provided using the @uol-section-nav.

Developer guidance

Current page

If the current page matches a link from the local navigation, the matching navigation link should be set as “current”: true.

Example:

{
  "title": "Home",
  "url": "/",
  "current": true
},

The Local navigation: Highlight Active Page variant shows how one item (other than the home page) are given this value. Specifying “current” as true adds aria-current=”page” on to the link (a tag). Setting this parameter also changes the style of this link to signify this is the current page.

When implementing this header, ensure that aria-current=”page” is added to the link representing the current page and only this page.

This also helps Assistive Technology users know that the link will not take them to a different page.

CTAs

Only navigation items within the sub-navigation may use “cta”: true. Items identified as CTAs should be grouped together at the end of a sub-navigation group. See component example context for illustration.

{% if items.length %}
<nav class="uol-header-local-navigation-wrapper uol-content-container" aria-label="Site navigation">
  <ul class="uol-header-local-navigation">
    {% for item in items %}
      <li class="uol-header-local-navigation__item {{ 'uol-header-local-navigation__item--parent' if item.items.length }}" data-label="{{ item.title }}">
        {% if item.url %}
          <a class="uol-header-local-navigation__link" href="{{ item.url }}" {% if item.current %}aria-current="page"{% endif %}>
        {% endif %}
        {{ item.title }}
        {% if item.url %}
          </a>
        {% endif %}

        {% if item.items.length %}
          <ul class="uol-header-local-navigation__sub-nav" data-title="{{ item.title }}">
            {% for item in item.items %}
              <li class="uol-header-local-navigation__item {{ 'uol-header-local-navigation__item--cta' if item.cta }}">
                {% if item.url %}
                  <a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="{{ item.url }}"  {% if item.current %}aria-current="page"{% endif %}>
                {% endif %}
                {{ item.title | safe }}
                {% if item.url %}
                  </a>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
</nav>
{% endif %}
 
<nav class="uol-header-local-navigation-wrapper uol-content-container" aria-label="Site navigation">
    <ul class="uol-header-local-navigation">

        <li class="uol-header-local-navigation__item " data-label="Home">

            <a class="uol-header-local-navigation__link" href="/">

                Home

            </a>

        </li>

        <li class="uol-header-local-navigation__item " data-label="Active page">

            <a class="uol-header-local-navigation__link" href="/" aria-current="page">

                Active page

            </a>

        </li>

        <li class="uol-header-local-navigation__item " data-label="Another page">

            <a class="uol-header-local-navigation__link" href="/">

                Another page

            </a>

        </li>

    </ul>
</nav>
  • Content: 
    // Utility
.no-wrap {
  white-space: nowrap;
}

@mixin local-navigation-link-accent {
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(#{$spacing-4} - 2px);
    right: calc(100% - #{$spacing-4} + 2px);
    height: $spacing-2;
    background-color: $color-white;
    transition: right 0.4s ease 0.1s;
  }

  &:focus {
    outline: 2px dotted transparent;
  }

  &:hover,
  &:focus {
    &::after {
      right: calc(#{$spacing-4} - 2px);
      background-color: $color-brand;

      @media (-ms-high-contrast: active),
      (forced-colors: active) {
        background-color: WindowText;
        background-color: CanvasText;
      }
    }
  }
}

.uol-header-local-navigation-wrapper {
  max-width: 101.75rem;

  .no-js & {
    margin: $spacing-4 0;
    padding-bottom: $spacing-4;
  }

  .js & {
    position: relative;
    padding-top: $spacing-2;
    padding-bottom: $spacing-2;
    margin-top: 0;

    @include media(">=uol-media-l") {
      margin-top: $spacing-6;
      padding-left: $spacing-2;
    }

    @include media(">=uol-media-xl") {
      padding-left: $spacing-4;
    }

    @include media(">=uol-media-xxl") {
      padding-left: 0;
    }
  }
}

  .uol-header-local-navigation-wrapper--scrollable {
    border-top: 1px solid $color-border--light;
  }

  .uol-header-local-navigation-wrapper--sub-expanded {
    @include media("<uol-media-m") {
      padding-bottom: 0;
    }
  }

.uol-header-local-navigation {

  .js & {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }
  }
}

  .uol-header-local-navigation--scrollable {
    .js & {
      margin-left: $spacing-6;
      margin-right: $spacing-6;
    }

    .uol-header-local-navigation-wrapper--sub-expanded & {
      @include media("<uol-media-m") {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  .uol-header-local-navigation__button-scroll {
    position: absolute;
    top: 0;
    z-index: 1;
    width: $spacing-7;
    height: 100%;
    background: rgba($color-white, 0.96);
    border: none;
    transition: opacity 0.3s ease;

    &::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border: 7px solid transparent;

      @media (-ms-high-contrast: active), (forced-colors: active) {
        -ms-high-contrast-adjust: none;
        forced-color-adjust: CanvasText;
      }
    }

    &[disabled] {
      // background: none;
      opacity: 0;
      cursor: default;
      z-index: -1;
    }

    .uol-header-local-navigation-wrapper--sub-expanded & {
      @include media("<uol-media-m") {
        display: none;
      }
    }
  }

    .uol-header-local-navigation__button-scroll--left {
      left: 0;
      border-right: 1px solid $color-border--light;

      &::after {
        left: $spacing-3;
        border-right-color: $color-brand--bright;
      }
    }

    .uol-header-local-navigation__button-scroll--right {
      right: 0;
      border-left: 1px solid $color-border--light;

      &::after {
        right: $spacing-3;
        border-left-color: $color-brand--bright;
      }
    }

  .uol-header-local-navigation__item {
    font-weight: $font-weight-bold--sans-serif;

    @include media("<uol-media-m") {
      font-weight: 500; // TODO: May need to update font weights
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    .js .uol-header-local-navigation__sub-nav & {
      padding: $spacing-2 $spacing-4;
    }
  }

    .uol-header-local-navigation__item--sibling-open {
      @include media("<uol-media-m") {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        overflow: hidden;
        left: -9999px;
      }
    }

    .uol-header-local-navigation__item--cta {
      .js & {
        background: $color-black;
        margin-left: -1px;
        margin-right: -1px;
        margin-bottom: -1px;
        border: 1px solid $color-black;

        @include media(">=uol-media-m") {
          &:last-of-type {
            border-radius: 0 0 $spacing-3 $spacing-3;
          }
        }
      }

      .js .uol-header-local-navigation__sub-nav & {

        // Add extra spacing to first and last cta (assuming cta is last item)
        margin-top: $spacing-4;
        padding-top: $spacing-5;
        padding-bottom: $spacing-2;

        ~ .uol-header-local-navigation__item--cta {
          margin-top: 0;
          padding-top: 0;
        }

        &:last-of-type {
          padding-bottom: $spacing-6;
        }
      }
    }

  .uol-header-local-navigation__link {

    .no-js & {
      // padding: $spacing-1 $spacing-2 $spacing-2;
      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    .js & {
      @extend %text-size-paragraph;
      @include local-navigation-link-accent();

      position: relative;
      display: block;
      color: $color-font--light;
      text-decoration: none;
      white-space: nowrap;
      padding: $spacing-2 $spacing-4 $spacing-3;
      transition: color 0.4s ease 0.1s;

      &:hover,
      &:focus {
        color: $color-font--dark;
      }

      &[aria-current] {
        color: $color-brand;
      }
    }

    .js .uol-header-local-navigation__sub-nav & {
      background: $color-white;
      color: $color-font--light;
      white-space: normal;
      transition: background 0.5s ease;
      border-radius: 6px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      &:hover,
      &:focus {
        background-color: $colour-warmgrey—faded;
        color: $color-font;
        text-decoration: underline;
      }

      &[aria-current] {
        color: $color-brand;
      }

      &::after {
        content: none;
      }

      svg {
        position: relative;
        top: 0.35em;
        left: 0;
        margin-left: 0.5em;
        fill: rgba($color-brand, 0);
        transition: all 0.3s ease 0.2s;
      }

      &:hover,
      &:focus {
        svg {
          left: 0.4em;
          fill: $color-brand;

          @media (-ms-high-contrast: active) {
            fill: windowText;
          }
        }
      }
    }

    .js .uol-header-local-navigation__item--cta & {
      background: inherit;
      color: $color-white;
      padding-top: $spacing-1;
      padding-bottom: $spacing-1;

      @include media(">=uol-media-m") {
        font-size: 18px;
      }

      &:hover,
      &:focus {
        background-color: $color-black--dark;
        color: $color-white;
      }

      &[aria-current] {
        color: $color-brand--bright;
      }

      svg {
        fill: $color-brand--bright;

        @media (-ms-high-contrast: active) {
          fill: windowText;
        }
      }

      &:hover,
      &:focus {
        svg {
          left: 0.4em;
          fill: $color-brand--bright;

          @media (-ms-high-contrast: active) {
            fill: windowText;
          }
        }
      }
    }
  }

  .uol-header-local-navigation__subnav-button {
    @extend %text-size-paragraph;
    @include local-navigation-link-accent();

    position: relative;
    font-weight: inherit;
    white-space: nowrap;
    background: transparent;
    border: none;
    margin: 0;
    padding: $spacing-2 $spacing-4 $spacing-3;
    appearance: none;
    color: $color-font--light;
    transition: color 0.4s ease 0.1s;

    &[aria-expanded="true"] {
      @include media("<=uol-media-m") {

        &:focus {
          text-decoration: underline;
        }

        &:focus:not(:focus-visible) {
          text-decoration: none;

        }

        &:focus-visible {
          outline-color: transparent;
          text-decoration: underline;
          text-underline-offset: 4px;
          text-decoration-thickness: $spacing-2;
          text-decoration-color: $color-brand--bright;
        }
      }
    }

    &:focus {
      outline-offset: -4px;
    }

    &:hover,
    &:focus {
      color: $color-font--dark;
    }

    &[aria-expanded="true"] {
      color: $color-font--dark;

      @include media(">=uol-media-m") {
        &::before {
          content: "";
          position: absolute;
          right: 0;
          transform: translateX(-70%);
          bottom: ($spacing-2 - $spacing-1 / 2);
          width: 0;
          height: 0;
          border: ($spacing-3 - $spacing-1 / 2) solid transparent;
          border-top: none;
          border-bottom-color: $color-white;
          filter: drop-shadow(0 -0.05rem 0.05rem rgba($color-black, 0.1));
          z-index: 4;
        }
      }
    }

    // TODO: Un-nest icon
    .uol-header-local-navigation__button__icon {
      position: relative;
      display: inline-block;
      width: $spacing-5;
      height: $spacing-4;
      margin-left: 0.2em;
      margin-right: -0.2em;

      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: 0.5em;
        height: 0.13em;
        background: $color-black;
        bottom: 20%;

        @media (-ms-high-contrast: active) {
          background: ButtonText;
        }
      }

      &::before {
        left: 50%;
        transform: translateX(-76%) rotate(45deg);
      }

      &::after {
        right: 50%;
        transform: translateX(76%) rotate(-45deg);
      }
    }

    // TODO: Duplicate selector - refactor
    &[aria-expanded="true"] {
      @include media("<uol-media-m") {
        @include font-size-responsive(1.75rem, 2.25rem, 3rem);
        @include line-height-responsive(2.25rem, 3rem, 3.5rem);

        display: block;
        text-align: left;
        width: 100vw;
        border-bottom: 2px solid $color-border--light;

        @include media("<uol-media-m") {
          margin-top: -#{$spacing-2};
          padding: 1.312rem $spacing-7 1.312rem $spacing-4;
        }

        &::after {
          content: none;
        }

        @include media(">=uol-media-m") {
          &::before {
            content: "";
            width: 30px;
            height: 30px;
            background: red;
            position: absolute;
          }
        }
      }

      // TODO: Un-nest icon
      .uol-header-local-navigation__button__icon {

        &::before {
          transform: translateX(-76%) rotate(315deg);
        }

        &::after {
          transform: translateX(76%) rotate(45deg);
        }

        @include media("<uol-media-m") {
          position: absolute;
          padding: $spacing-4;
          right: $spacing-3;
          top: 50%;
          transform: translateY(-50%);

          &::before {
            bottom: 50%;
          }

          &::after {
            bottom: 50%;
          }
        }
      }
    }
  }

  .uol-header-local-navigation__sub-nav {
    .js & {
      padding: 0;
      list-style: none;
      display: none;
      box-shadow:
        0 15px 24px 0 rgba(10, 2, 2, 0.15),
        0 5px 10px 0 rgba(33, 33, 33, 0.5),
        0 5px 15px 2px rgba(255, 255, 255, 0.25);

      @include media("<uol-media-m") {
        padding-top: $spacing-4;
        background: $color-white;
        width: 100vw;
        overflow-y: auto;
        overflow: hidden;

        @media (-ms-high-contrast: active) {
          border-bottom: 1px solid windowText;
        }
      }

      @include media(">=uol-media-m") {
        position: absolute;
        top: calc(100% - #{$spacing-4});
        box-sizing: border-box;
        width: 375px;
        background: $color-white;
        border: 1px solid rgba($color-border--light, 0.2);
        border-radius: $spacing-3;
        padding-top: $spacing-1;
        z-index: 1001;
        transform: translateX(-#{$spacing-4});
      }
    }
  }
  • URL: /components/raw/uol-header-local-navigation/_local-navigation.scss
  • Filesystem Path: src/library/02-components/header-partials/local-navigation/_local-navigation.scss
  • Size: 11.9 KB
  • Content: 
    const localNavigations = document.querySelectorAll('.uol-header-local-navigation')

const svgRightArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
</svg>`

// TODO: Move to utilities
const getSiblings = (elem) => {
  return Array.prototype.filter.call(elem.parentNode.children, (sibling) => {
    return sibling !== elem
  })
}

const closestByClass = (elem, classSelector) => {
  // Traverse the DOM up with a while loop
  while (elem.className != classSelector) {
    // Increment the loop to the parent node
    elem = elem.parentNode
    if (!elem) {
      return null
    }
  }
  return elem
}

export const localNavigationDropdown = () => {

  const subNavOpen = (navigation, navBtn, subNav, siblings) => {
    navBtn.setAttribute('aria-expanded', 'true')
    subNav.style.display = 'block'

    // Toggle the siblings
    siblings.forEach((sibling) => {
      sibling.classList.add('uol-header-local-navigation__item--sibling-open')
    })

    navigation.classList.add('uol-header-local-navigation--sub-expanded')
    navigation.parentNode.classList.add('uol-header-local-navigation-wrapper--sub-expanded')
  }

  const subNavClose = (navigation, navBtn, subNav, siblings) => {
    subNav.style.display = 'none'
    navBtn.setAttribute('aria-expanded', 'false')

    // Toggle the siblings
    siblings.forEach((sibling) => {
      sibling.classList.remove('uol-header-local-navigation__item--sibling-open')
    })

    navigation.classList.remove('uol-header-local-navigation--sub-expanded')
    navigation.parentNode.classList.remove('uol-header-local-navigation-wrapper--sub-expanded')

    navigation.dispatchEvent(new CustomEvent('scroll'))
  }

  localNavigations.forEach( (navigation) => {

    const navItems = navigation.querySelectorAll('.uol-header-local-navigation__item')

    navItems.forEach( (navItem) => {

      // Scroll items fully into view (exclude sub nav)
      if (!navItem.parentNode.classList.contains('uol-header-local-navigation__sub-nav')) {
        const navLink = navItem.querySelector('.uol-header-local-navigation__link')
        navLink.addEventListener('focus', () => {
          navItem.scrollIntoView({
            behavior: 'smooth',
            block: 'nearest',
            inline: 'start'
          })
        })
      }

      const subNav = navItem.querySelector('.uol-header-local-navigation__sub-nav')
      if (subNav) {

        const siblings = getSiblings(navItem)

        const navLabel = navItem.dataset.label

        const subNavItems = subNav.querySelectorAll('.uol-header-local-navigation__item')
        // Hide subNav
        subNav.style.display = 'none'

        // Remove text nodes
        navItem.childNodes.forEach( childNode => {
          if (childNode.nodeName === '#text') {
            childNode.remove()
          }
        })

        // TODO Add support for top level links

        // Add button
        let navBtn = document.createElement('button')
        navBtn.type = 'button'
        navBtn.classList.add('uol-header-local-navigation__subnav-button')
        navBtn.innerHTML = navLabel + '<span class="uol-header-local-navigation__button__icon"></span>'
        navBtn.setAttribute('aria-expanded', false)

        navItem.prepend(navBtn)

        navBtn.onclick = () => {
          let expanded = navBtn.getAttribute('aria-expanded') === 'true' || false

          if (!expanded) {
            subNavOpen(navigation, navBtn, subNav, siblings)
          } else {
            subNavClose(navigation, navBtn, subNav, siblings)
          }

        }

        // Listen for focusout and close subnav when focus leaves the item's descendants
        navItem.addEventListener('focusout', (event) => {

          if (event.relatedTarget) {
            // If the new focused element is not a child of a sub nav
            if (!closestByClass(event.relatedTarget, 'uol-header-local-navigation__sub-nav')) {

              // if not this navigation item's toggle button
              if(event.relatedTarget.parentNode != navItem) {
                subNavClose(navigation, navBtn, subNav, siblings)
              }

            }
          }

        })

        // Close on click outside

        document.addEventListener("click", (evt) => {

          let targetElement = evt.target; // clicked element

          do {
              if (targetElement == navItem) {
                  // This is a click inside. Do nothing, just return.
                  return;
              }
              // Go up the DOM
              targetElement = targetElement.parentNode;
          } while (targetElement)

          // This is a click outside.
          subNavClose(navigation, navBtn, subNav, siblings)
        })

        // Close on escape

        window.addEventListener("keydown", function(event) {

          if (event.key === 'Escape' || event.keyCode === 27) {
            subNavClose(navigation, navBtn, subNav, siblings)

            // If focus is on a subnav return focus to parent toggle button
            if (event.target.classList.contains('uol-header-local-navigation__link--sub-nav')) {
              const parentButton = event.target.closest('.uol-header-local-navigation__item--parent').querySelector('.uol-header-local-navigation__subnav-button')
              if (parentButton) {
                parentButton.focus()
              }
            }
          }

        }, true);

        // Add arrows to subnav links
        subNavItems.forEach( (item) => {

          const itemLink = item.querySelector('.uol-header-local-navigation__link')

          // Split text to array
          const innerTextArray = itemLink.innerText.trim().split(' ')

          // Wrap last word and svg in no-wrap span to avoid wrapping
          itemLink.innerHTML = innerTextArray.slice(0, -1).join(' ') + ' <span class="no-wrap">' + innerTextArray[innerTextArray.length - 1] + '' + svgRightArrow + '</span>'
        })

      }
    })

  })
}

export const localNavigationScrollButtons = () => {

  const createScrollableNav = (navigation) => {
    const viewportWidthScroll = window.innerWidth * 0.5

    if (!navigation.classList.contains('uol-header-local-navigation--scrollable')) {
      const navParent = navigation.parentNode

      // Add class to navigation for JS dependant spacing
      navigation.classList.add('uol-header-local-navigation--scrollable')
      navigation.parentNode.classList.add('uol-header-local-navigation-wrapper--scrollable')

      // Create left scroll button
      const btnLeft = document.createElement('button')
      btnLeft.classList.add('uol-header-local-navigation__button-scroll')
      btnLeft.classList.add('uol-header-local-navigation__button-scroll--left')
      btnLeft.disabled = true
      btnLeft.innerHTML = '<span class="hide-accessible">Scroll navigation left</span>'

      btnLeft.onclick = () => {
        navigation.scrollBy({
          left: -viewportWidthScroll,
          behavior: 'smooth'
        })
      }

      // Create Right scroll button
      const btnRight = document.createElement('button')
      btnRight.classList.add('uol-header-local-navigation__button-scroll')
      btnRight.classList.add('uol-header-local-navigation__button-scroll--right')
      btnRight.innerHTML = '<span class="hide-accessible">Scroll navigation right</span>'

      btnRight.onclick = () => {
        navigation.scrollBy({
          left: viewportWidthScroll,
          behavior: 'smooth'
        })
      }

      // Prepend/Append scroll buttons
      navParent.prepend(btnLeft)
      navParent.append(btnRight)

      // listen for scrolling end and update scroll buttons disabled state
      let navIsScrolling

      navigation.addEventListener('scroll', () => {

        window.clearTimeout( navIsScrolling )

        navIsScrolling = setTimeout(() => {

          // The following have a 5px tolerance to support browsers that do not support scroll snapping

          // If very near the beginning of scroll
          if (navigation.scrollLeft <= 5) {
            btnLeft.disabled = true
          } else {
            btnLeft.disabled = false
          }

          // If very near the end of scroll
          if ((navigation.scrollLeft + navigation.clientWidth) - navigation.scrollWidth >= -5 ) {
            btnRight.disabled = true
          } else {
            btnRight.disabled = false
          }

        }, 66)

      }, false)
    }


  }

  const destroyScrollableNav = (navigation) => {

    // Remove class to navigation for JS dependant spacing
    navigation.classList.remove('uol-header-local-navigation--scrollable')
    navigation.parentNode.classList.remove('uol-header-local-navigation-wrapper--scrollable')

    document.querySelectorAll('.uol-header-local-navigation__button-scroll').forEach( (button) => {
      button.remove()
    })
  }

  const initiateScrollableNav = () => {
    localNavigations.forEach((navigation) => {

      if (navigation.scrollWidth - 10 > navigation.clientWidth) { // TODO fix ipad landscape showing scroller
        createScrollableNav(navigation)
      } else {
        destroyScrollableNav(navigation)
      }

    })
  }

  // Initialise

  document.addEventListener('DOMContentLoaded', function() {
    initiateScrollableNav()
  });

  // Fire again on resize
  window.addEventListener('resize', initiateScrollableNav)

  // TODO: Hack fix of nav that is just too wide while webfonts load. Need a better solution
  setTimeout(() => {
    if (typeof(Event) === 'function') {
      // modern browsers
      window.dispatchEvent(new Event('resize'));
    } else {
        // for IE and other old browsers
        // causes deprecation warning on modern browsers
        var evt = window.document.createEvent('UIEvents');
        evt.initUIEvent('resize', true, false, window, 0);
        window.dispatchEvent(evt);
    }
  }, 300)

}
  • URL: /components/raw/uol-header-local-navigation/local-navigation.module.js
  • Filesystem Path: src/library/02-components/header-partials/local-navigation/local-navigation.module.js
  • Size: 10 KB 
{
  "items": [
    {
      "title": "Home",
      "url": "/"
    },
    {
      "title": "Active page",
      "url": "/",
      "current": true
    },
    {
      "title": "Another page",
      "url": "/"
    }
  ]
}