<ul class="sg-sideNav c-card c-card--rounded c-card--noPad u-unstyled">
{{#is navsub 'design-els'}}
<!-- subnav for Styleguide > Design Elements -->
    <li><a href="{{ baseUrl }}/styleguide/design-elements/colours" class="{{#is navactive 'colours'}} is-active{{/is}}">Colours</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/typography" class="{{#is navactive 'typography'}} is-active{{/is}}">Typography</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/icons" class="is-incomplete {{#is navactive 'icons'}} is-active{{/is}}">Icons</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/grid" class="is-incomplete {{#is navactive 'grid'}} is-active{{/is}}">Grid</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/touchtargets" class="is-incomplete {{#is navactive 'touchtargets'}} is-active{{/is}}">Touch Target Size</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/padding" class="is-incomplete {{#is navactive 'padding'}} is-active{{/is}}">Padding</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/colour-rays" class="is-incomplete {{#is navactive 'colour-rays'}} is-active{{/is}}">Colour Rays</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/photography" class="is-incomplete {{#is navactive 'photography'}} is-active{{/is}}">Photography</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/illustrations" class="is-incomplete {{#is navactive 'illustrations'}} is-active{{/is}}">Illustrations</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/restaurant-logos" class="is-incomplete {{#is navactive 'restaurant-logos'}} is-active{{/is}}">Restaurant Logos</a></li>
    <li><a href="{{ baseUrl }}/styleguide/design-elements/animations" class="is-incomplete {{#is navactive 'animations'}} is-active{{/is}}">Animations &amp; Transitions</a></li>
{{/is}}

{{#is navsub 'ui-components'}}
<!-- subnav for Styleguide > UI Components -->
    <li><a href="{{ baseUrl }}/styleguide/ui-components/headers/" class="{{#is navactive 'headers'}} is-active{{/is}}">Headers</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/footers/" class="{{#is navactive 'footers'}} is-active{{/is}}">Footers</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/breadcrumbs" class="{{#is navactive 'breadcrumbs'}} is-active{{/is}}">Breadcrumbs</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/grid" class="is-incomplete {{#is navactive 'ui-grid'}} is-active{{/is}}">Grid</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/buttons" class="{{#is navactive 'buttons'}} is-active{{/is}}">Buttons</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/pagination" class="is-incomplete {{#is navactive 'pagination'}} is-active{{/is}}">Pagination</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/icons" class="is-incomplete {{#is navactive 'ui-icons'}} is-active{{/is}}">Icons</a></li>

        <!-- title here - custom JE components -->
    <li><a href="{{ baseUrl }}/styleguide/ui-components/custom/star-ratings" class="{{#is navactive 'star-ratings'}} is-active{{/is}}">Star Ratings</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/custom/tooltip" class="is-incomplete {{#is navactive 'tooltip'}} is-active{{/is}}">Tooltip</a></li>

    <li><a href="{{ baseUrl }}/styleguide/ui-components/listings" class="{{#is navactive 'listings'}} is-active{{/is}}">Listings</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/mediaElement" class="{{#is navactive 'media-element'}} is-active{{/is}}">Media Element</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/custom/cookie-banner" class="is-incomplete {{#is navactive 'cookie-banner'}} is-active{{/is}}">Cookie Banner</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/custom/loaders" class="is-incomplete {{#is navactive 'loaders'}} is-active{{/is}}">Loaders</a></li>

    <li><a href="{{ baseUrl }}/styleguide/ui-components/hero-images" class="is-incomplete {{#is navactive 'hero-images'}} is-active{{/is}}">Hero Images</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/search-modules" class="is-incomplete {{#is navactive 'search-modules'}} is-active{{/is}}">Search Modules</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/menu-styles" class="is-incomplete {{#is navactive 'menu-styles'}} is-active{{/is}}">Menu Styles</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/linktext" class="is-incomplete {{#is navactive 'linktext'}} is-active{{/is}}">Links / Active Text</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/basket" class="is-incomplete {{#is navactive 'basket'}} is-active{{/is}}">Basket UI</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/error-pages" class="is-incomplete {{#is navactive 'error-pages'}} is-active{{/is}}">Error Pages</a></li>

    <li><a href="{{ baseUrl }}/styleguide/ui-components/restaurant-badges" class="is-incomplete {{#is navactive 'restaurant-badges'}} is-active{{/is}}">Restaurant Badges</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/line-breaks" class="is-incomplete {{#is navactive 'line-breaks'}} is-active{{/is}}">Line Breaks</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/app-icons" class="is-incomplete {{#is navactive 'app-icons'}} is-active{{/is}}">App Tiles &amp; Favicon</a></li>

        <!-- title here - Navigation Elements -->

        <!-- title here - Form Elements -->
    <li><a href="{{ baseUrl }}/styleguide/ui-components/forms/" class="is-incomplete {{#is navactive 'forms'}} is-active{{/is}}">Forms</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/forms/checkboxes" class="{{#is navactive 'checkboxes'}} is-active{{/is}}">Checkboxes</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/forms/radio-buttons" class="{{#is navactive 'radio-buttons'}} is-active{{/is}}">Radio Buttons</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/forms/messaging" class="is-incomplete {{#is navactive 'messaging'}} is-active{{/is}}">Error &amp; Success Messages</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-components/forms/drop-downs" class="is-incomplete {{#is navactive 'drop-downs'}} is-active{{/is}}">Drop down menus</a></li>

    <!-- title here - Experiments -->
{{/is}}


{{#is navsub 'ui-templates'}}
<!-- subnav for Styleguide > UI Components -->
        <!-- title here - Order Flow -->
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/homepage/" class="is-incomplete {{#is navactive 'template-homepage'}} is-active{{/is}}">HomePage</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/searchResults/" class="is-incomplete {{#is navactive 'template-searchresults'}} is-active{{/is}}">Search Results</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/menu/" class="is-incomplete {{#is navactive 'template-menu'}} is-active{{/is}}">Menu</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/menu/basket" class="is-incomplete {{#is navactive 'template-basket'}} is-active{{/is}}">Basket</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/orderFlow/delivery-details" class="is-incomplete {{#is navactive 'template-deliverydetails'}} is-active{{/is}}">Delivery Details</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/orderFlow/delivery-time" class="is-incomplete {{#is navactive 'template-deliverytime'}} is-active{{/is}}">Delivery Time</a></li>

        <!-- title here - Account -->
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/login/" class="is-incomplete {{#is navactive 'template-login'}} is-active{{/is}}">Login</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/" class="is-incomplete {{#is navactive 'template-accountindex'}} is-active{{/is}}">Account Index</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/change-pw" class="is-incomplete {{#is navactive 'template-changepw'}} is-active{{/is}}">Change Password</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/remove-account" class="is-incomplete {{#is navactive 'template-removeaccount'}} is-active{{/is}}">Remove Account</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/remove-account-thanks" class="is-incomplete {{#is navactive 'template-removeaccountthanks'}} is-active{{/is}}">Remove Account Thanks</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/order-history" class="is-incomplete {{#is navactive 'template-orderhistory'}} is-active{{/is}}">Order History</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/account-credit" class="is-incomplete {{#is navactive 'template-accountcredit'}} is-active{{/is}}">Account Credit</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/address-book" class="is-incomplete {{#is navactive 'template-addressbook'}} is-active{{/is}}">Address Book</a></li>

        <!-- title here - Order Details Page -->
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/order-summary-mvp" class="is-incomplete {{#is navactive 'template-ordersummary'}} is-active{{/is}}">Order Summary – MVP</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/order-summary--duringOrder" class="is-incomplete {{#is navactive 'template-ordersummaryduring'}} is-active{{/is}}">Order Summary – During Order</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/account/order-summary--postOrder" class="is-incomplete {{#is navactive 'template-ordersummarypost'}} is-active{{/is}}">Order Summary – Post Order</a></li>

        <!-- title here - Misc -->
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/content-pages/" class="is-incomplete {{#is navactive 'template-contentpage'}} is-active{{/is}}">Example Content Page</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/thematic/" class="is-incomplete {{#is navactive 'template-thematiclanding'}} is-active{{/is}}">Thematic Landing Page</a></li>
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/thematic/listing" class="is-incomplete {{#is navactive 'template-thematiclisting'}} is-active{{/is}}">Thematic Listing Page</a></li>

        <!-- title here - Experiments -->
    <li><a href="{{ baseUrl }}/styleguide/ui-templates/searchResults/" class="is-incomplete {{#is navactive 'template-expserp'}} is-active{{/is}}">SERP Layout</a></li>

{{/is}}


{{#is navsub 'js-components'}}
<!-- subnav for Styleguide > JS Components -->
    <li><a href="{{ baseUrl }}/styleguide/js-components/validation" class="{{#is navactive 'validation'}} is-active{{/is}}">Form Validation</a>
        {{#is navactive 'validation'}}
        <ul class="sg-sideNav-subnav u-unstyled">
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#usage">Usage</a></li>
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#rules">Rules</a></li>
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#messages">Custom Error Messages</a></li>
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#options">Options</a></li>
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#messages-grouped">Grouped Error Messages</a></li>
            <li><a href="{{ baseUrl }}/styleguide/js-components/validation/#multiple-rules">Applying Multiple Rules</a></li>
        </ul>
        {{/is}}
    </li>
    <li><a href="{{ baseUrl }}/styleguide/js-components/trak" class="{{#is navactive 'trak'}} is-active{{/is}}">f-trak – Analytics</a></li>
    <li><a href="{{ baseUrl }}/styleguide/js-components/toggle" class="is-incomplete {{#is navactive 'toggle'}} is-active{{/is}}">Toggle</a></li>
{{/is}}


{{#is navsub 'css-utilities'}}
<!-- subnav for Styleguide > CSS Utilities -->
    <!-- title – Grids -->
    <!-- <li><a href="{{ baseUrl }}/styleguide/css-utilities/grid" class="{{#is navactive 'grid'}} is-active{{/is}}">Responsive Grid</a></li> -->
    <!-- title – Classes -->
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/" class="{{#is navactive 'css-utilities'}} is-active{{/is}}">General Utilities</a></li>
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/legacy-support" class="is-incomplete {{#is navactive 'Legacy Support'}} is-active{{/is}}">Legacy Support</a></li>
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/no-js" class="is-incomplete {{#is navactive 'css-no-js'}} is-active{{/is}}">No JavaScript</a></li>

    <!-- title – Mixins -->
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/mixins-rwd" class="is-incomplete {{#is navactive 'mixins-rwd'}} is-active{{/is}}">Responsive</a></li>
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/mixins-utility" class="is-incomplete {{#is navactive 'mixins-utility'}} is-active{{/is}}">Utility</a></li>

    <!-- title – Helpers -->
    <li><a href="{{ baseUrl }}/styleguide/css-utilities/media" class="is-incomplete {{#is navactive 'media'}} is-active{{/is}}">Media</a></li>
{{/is}}


{{#is navsub 'docs-general'}}
<!-- subnav for Documentation > General -->
    <li><a href="{{ baseUrl }}/documentation/general/" class="{{#is navactive 'principles'}} is-active{{/is}}">Development Principles</a></li>
    <li><a href="{{ baseUrl }}/documentation/general/getting-started" class="{{#is navactive 'getting-started'}} is-active{{/is}}">Getting Started</a></li>
    <li><a href="{{ baseUrl }}/documentation/general/gulp" class="{{#is navactive 'gulp'}} is-active{{/is}}">Gulp</a></li>
    <li><a href="{{ baseUrl }}/documentation/general/browser-support" class="{{#is navactive 'browser-support'}} is-active{{/is}}">Browser support</a></li>
    <li><a href="{{ baseUrl }}/documentation/general/accessibility" class="{{#is navactive 'a11y'}} is-active{{/is}}">Accessibility</a>
    <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist" class="{{#is navactive 'a11y-checklist'}} is-active{{/is}}">A11y Checklist</a>
        {{#is navactive 'a11y-checklist'}}
        <ul class="sg-sideNav-subnav u-unstyled">
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#htmlvalid">HTML is Valid</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#htmlstructure">HTML Structure</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#htmlorder">HTML Order</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#htmlsemantic">HTML Semantic</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#htmllabelled">HTML Labelled</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#audit">Running an Audit</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#keyboard">Keyboard Support</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#tabstops">Tab Support</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#focus">Focus Management</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#state">Page State</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#wellspoken">Screen Readers</a></li>
            <li><a href="{{ baseUrl }}/documentation/general/accessibility/checklist#examples">Examples</a></li>
        </ul>
        {{/is}}
    </li>
{{/is}}


{{#is navsub 'docs-css'}}
<!-- subnav for Documentation > CSS -->
    <li><a href="{{ baseUrl }}/documentation/css/" class="{{#is navactive 'css-principles'}} is-active{{/is}}">Principles</a></li>
    <li><a href="{{ baseUrl }}/documentation/css/css-naming" class="{{#is navactive 'css-naming'}} is-active{{/is}}">Naming</a></li>
    <li><a href="{{ baseUrl }}/documentation/css/structure" class="{{#is navactive 'css-structure'}} is-active{{/is}}">Structure</a></li>
{{/is}}


{{#is navsub 'docs-js'}}
<!-- subnav for Documentation > JS -->
    <li><a href="{{ baseUrl }}/documentation/js/js-architecture" class="{{#is navactive 'js-architecture'}} is-active{{/is}}">Architecture</a></li>
    <li><a href="{{ baseUrl }}/documentation/js/js-frameworks" class="{{#is navactive 'js-frameworks'}} is-active{{/is}}">Frameworks</a></li>
    <li><a href="{{ baseUrl }}/documentation/js/js-modules" class="{{#is navactive 'js-modules'}} is-active{{/is}}">Modules</a></li>
    <li><a href="{{ baseUrl }}/documentation/js/js-jquery" class="{{#is navactive 'js-jquery'}} is-active{{/is}}">jQuery</a></li>
    <li><a href="{{ baseUrl }}/documentation/js/js-codestyle" class="{{#is navactive 'js-codestyle'}} is-active{{/is}}">Code Style</a></li>
{{/is}}


{{#is navsub 'docs-images'}}
<!-- subnav for Documentation > Images and icons -->
    <li><a href="{{ baseUrl }}/documentation/images/img-icons" class="{{#is navactive 'img-icons'}} is-active{{/is}}">Icons</a></li>
    <li><a href="{{ baseUrl }}/documentation/images/img-optimisation" class="{{#is navactive 'img-optimisation'}} is-active{{/is}}">Image Optimisation</a></li>
{{/is}}


{{#is navsub 'open-source'}}
<!-- subnav for Documentation > Images and icons -->
    <li><a href="{{ baseUrl }}/documentation/open-source" class="{{#is navactive 'os-creating'}} is-active{{/is}}">Creating a module</a></li>
    <li><a href="{{ baseUrl }}/documentation/open-source/module-maintenance" class="{{#is navactive 'os-maintenance'}} is-active{{/is}}">Module maintenance</a></li>
    <li><a href="{{ baseUrl }}/documentation/open-source/utility-tools" class="{{#is navactive 'os-tools'}} is-active{{/is}}">Utility Tools</a></li>
    <li><a href="{{ baseUrl }}/documentation/open-source/developing-shared-html-templates" class="{{#is navactive 'developing-shared-html-templates'}} is-active{{/is}}">Developing Shared HTML Templates</a></li>
    <li><a href="{{ baseUrl }}/documentation/open-source/module-issues" class="{{#is navactive 'os-issues'}} is-active{{/is}}">Issues</a></li>
{{/is}}
</ul>

    <!-- <li><a href="{{ baseUrl }}/process/gulp.html"{{#is navactive 'docsgulp'}} class="is-active"{{/is}} data-trak='{"category":"Docs nav","action":"Grunt"}'>Gulp</a>
        {{#is navactive 'docsgulp'}}
        <ul class="sg-sideNav-subnav unstyled">
            <li><a href="#gulp-setup">Setup</a></li>
            <li><a href="#gulp-vs">Using Gulp in VS</a></li>
            <li><a href="#gulp-cmd">Using Gulp on Command Line</a></li>
            <li><a href="#gulp-tasks">Gulp Tasks</a></li>
            <li><a href="#gulp-config">Config</a></li>
            <li><a href="#gulp-taskindex">Task index</a></li>
        </ul>
        {{/is}}
    </li>
    <li><a href="{{ baseUrl }}/css/"{{#is navactive 'docscss'}} class="is-active"{{/is}} data-trak='{"category":"Docs nav","action":"CSS"}'>CSS</a>
        {{#is navactive 'docscss'}}
        <ul class="sg-sideNav-subnav unstyled">
            <li><a href="#philosophy">Philosophy</a></li>
            <li><a href="#bestpractices">Best Practices</a></li>
            <li><a href="#sass">Sass</a></li>
            <li><a href="#structure">Structure</a></li>
            <li><a href="#namingscheme">CSS Naming scheme</a></li>
            <li><a href="#variables">Sass Variables</a></li>
            <li><a href="#responsive">Responsive</a></li>
            <li><a href="#modernizr">Modernizr</a></li>
        </ul>
        {{/is}}
    </li>
    <li><a href="{{ baseUrl }}/js/"{{#is navactive 'docsjs'}} class="is-active"{{/is}} data-trak='{"category":"Docs nav","action":"Javascript"}'>Javascript</a>
        {{#is navactive 'docsjs'}}
        <ul class="sg-sideNav-subnav unstyled">
            <li><a href="#philosophy">Philosophy</a></li>
            <li><a href="#structure">Structure</a></li>
            <li><a href="#polyfills">Polyfills</a></li>
            <li><a href="#libs">Libraries</a></li>
        </ul>
        {{/is}}
    </li>
    <li><a href="{{ baseUrl }}/accessibility.html"{{#is navactive 'a11y'}} class="is-active"{{/is}}>Accessibility</a></li>
    <li><a href="{{ baseUrl }}/fe/html.html"{{#is navactive 'docshtml'}} class="is-active"{{/is}} data-trak='{"category":"Docs nav","action":"HTML"}'>HTML</a>
        {{#is navactive 'docshtml'}}
        <ul class="sg-sideNav-subnav unstyled">
            <li><a href="#svg">SVG icons</a></li>
            <li><a href="#iconmeta">Icon meta tags</a></li>
            <li><a href="#jquery">jQuery</a></li>
        </ul>
        {{/is}}
    </li>
</ul>
 -->
