Permalink
Fetching contributors…
Cannot retrieve contributors at this time
260 lines (167 sloc) 6.14 KB

@gov.au/main-nav

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

Contents


Install

yarn add @gov.au/main-nav
npm install @gov.au/main-nav --save-dev

⬆ 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 navigation' } {/* 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://uikit.service.gov.au/packages/main-nav/tests/site/

⬆ back to top


Release History

  • 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

};