@gold.au/main-nav

Horizontal list of links to key areas on the website. Usually located in the header.

Usage no npm install needed!

<script type="module">
  import goldAuMainNav from 'https://cdn.skypack.dev/@gold.au/main-nav';
</script>

README

@gold.au/main-nav

Horizontal list of links to key areas on the website. Usually located in the header.

Contents


Install

yarn add @gold.au/main-nav
npm install @gold.au/main-nav

⬆ back to top


Usage

⬆ back to top


API

Main navigation has 1 public function:

Toggle

AU.mainNav.Toggle( element, speed, callbacks )

The parameters are:

element The DOM element that triggers the main navigation to open, like a button or a link. They need to have the aria-controls attribute that points to the main navigation content element.

speed Animation speed in milliseconds (optional, defaults to 250ms)

callbacks - An object of four optional callbacks: { onOpen, afterOpen, onClose, afterClose }

Example:

AU.mainNav.Toggle( document.getElementById( 'main-nav-content' ), 500,
  {
    onOpen: function() {
      console.log('This function will run when an main nav opens');
    },
    afterOpen: function() {
      console.log('This function will run after an main nav has opened');
    },
    onClose: function() {
      console.log('This function will run when an main nav closes');
    },
    afterClose: function() {
      console.log('This function will run after an main nav has closed');
    },
  }
);

⬆ back to top


React

Usage:

import AUmainNav, { AUmainNavContent } from './main-nav.js';

<AUmainNav>
    <div className="container">
        <div className="row">
            <div className="col-md-12">
                <AUmainNavContent items={[
                    {
                        link: '#',
                        text: 'About',
                    },
                    {
                        link: '#',
                        text: 'Get started',
                    },
                    {
                        link: '#',
                        text: 'Components',
                        active: true
                    },
                    {
                        link: '#',
                        text: 'Templates',
                    },
                ]} />
            </div>
        </div>
    </div>
</AUmainNav>

All props:

<AUmainNav
    dark={ false }                  {/* A dark variation of the component */}
    alt={ false }                   {/* An alternate variation of the component */}
    ariaLabel={ 'main' }            {/* Aria-label attribute on the <nav> element */}
>
</AUmainNav>

<AUmainNavContent 
  items={ [] }
  speed={ 250 }            {/* Speed of the animation in ms, optional */}
  onOpen={ () => {} }      {/* A function executed when the accordion opens, optional */}
  afterOpen={ () => {} }   {/* A function executed after the accordion opened, optional */}
  onClose={ () => {} }     {/* A function executed when the accordion closes, optional */}
  afterClose={ () => {} }  {/* A function executed after the accordion opened, optional */}
  linkComponent="a"        {/* The component used for the link, optional */}
>
</AUmainNavContent>

(💡 additional props are spread onto the component)

For more details have a look at the usage example.

⬆ back to top


jQuery

To initialize the jQuery plugin make sure you have jQuery on the page and run the below code after the DOM was loaded:

$(function() {
  $('.js-au-main-nav').AUmainNav();
});

You can optionally add functions to each event like so:

$('.js-au-main-nav').AUmainNav({
  onOpen: function() {
    console.log('This function will run when an main nav opens');
  },
  afterOpen: function() {
    console.log('This function will run after an main nav has opened');
  },
  onClose: function() {
    console.log('This function will run when an main nav closes');
  },
  afterClose: function() {
    console.log('This function will run after an main nav has closed');
  },
});

⬆ back to top


Dependency graph

/main-nav
├─ /core
├─ /animate
└─ /link-list
   ├─ /core
   └─ /body
      └─ /core

⬆ back to top


Tests

The visual test: https://auds.service.gov.au/packages/main-nav/tests/site/

⬆ back to top


Release History

  • v1.0.9 - main nav to be collapsible upto MD breakpoint (Fix based on the new grid breakpoints)
  • v1.0.8 - Add aria-expanded to main nav menu button
  • v1.0.7 - Remove --save-dev flag from readme instructions
  • v1.0.6 - Removed word navigation from aria-label in <nav> element
  • v1.0.5 - Removed unused Fragment React import
  • v1.0.4 - Resolve autoprefixer warning
  • v1.0.3 - Fix pancake build path
  • v1.0.2 - Updated deprecated text-decoration-skip property to text-decoration-skip-ink
  • v1.0.1 - Removed uikit references
  • v1.0.0 - Wrap active item in main-nav in an <a> and add aria-current="page"
  • v0.2.0 - Active items are no longer wrapped in <a> for accessibility
  • v0.1.4 - Fix passing props to main nav react component
  • v0.1.3 - Added an aria-label attribute to the nav element
  • v0.1.2 - Add missing aria-controls for overlay react
  • v0.1.1 - Fix hover color for dark theme, adding propTypes
  • v0.1.0 - 💥 Initial version

⬆ back to top


License

Copyright (c) Commonwealth of Australia. Licensed under MIT.

⬆ back to top

};