@truecms/main-nav

@truecms/main-nav

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

Contents

• Install
• Dependency graph
• Tests
• Release History
• License

Install

pnpm add @truecms/main-nav

npm install @truecms/main-nav

⬆ back to top

Usage

• API
• React
• jQuery

⬆ back to top

API

Main navigation has 1 public function:

• AU.accordion.Toggle( element, speed, callbacks )

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
├─ animate
├─ core
└─ link-list
   ├─ body
   │  └─ core
   └─ core

⬆ back to top

Tests

The visual test: https://design-system-components.truecms.com.au/packages/main-nav/tests/site/

⬆ back to top

Release History

• v2.0.0 - 7f941cd: Document stewardship responsibilities under the TrueCMS organisation, lock the Node 22 baseline into the governance docs, and ship bundle parity plus dry-run release safeguards so Drupal 11 users and npm consumers remain supported

• 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

};