Navigation

Category navbar

The category navbar splits the website into three main user groups.

Open this category navbar example in a new tab
HTML
<nav class="occlss-category-nav js-occlss-category-nav" id="main-nav">
  <ul class="occlss-layout occlss-layout--align-self-end occlss-category-nav__list">
    <li class="occlss-layout__col occlss-layout__col--auto occlss-category-nav__item occlss-category-nav__item--residents is-active is-disabled">
      <a href="https://www.oxfordshire.gov.uk/" class="occlss-category-nav__link" tabindex="-1" aria-disabled="true">Residents</a>
    </li>
    <li class="occlss-layout__col occlss-layout__col--auto occlss-category-nav__item occlss-category-nav__item--business">
      <a href="https://www.oxfordshire.gov.uk/business" class="occlss-category-nav__link">Business</a>
    </li>
    <li class="occlss-layout__col occlss-layout__col--auto occlss-category-nav__item occlss-category-nav__item--council">
      <a href="https://www.oxfordshire.gov.uk/council" class="occlss-category-nav__link">Council</a>
    </li>
  </ul>
</nav>

Why we use this component

The majority of the content sits under the residents category with business and council being more specialist areas.

The residents category also forms the main homepage for the website. Business and council have their own homepages.

Changelog

1.0.0

  • Component added