{"_id":"@financial-times/o-hierarchical-nav","_rev":"28-9cfe118c128ade929506f513389db098","name":"@financial-times/o-hierarchical-nav","dist-tags":{"latest":"5.1.1"},"versions":{"5.1.0":{"name":"@financial-times/o-hierarchical-nav","version":"5.1.0","_id":"@financial-times/o-hierarchical-nav@5.1.0","maintainers":[{"name":"chee","email":"chee@snoot.club"},{"name":"briggsc","email":"charlie.briggs@bbc.co.uk"},{"name":"the-ft","email":"strategic.products+npm@ft.com"},{"name":"quarterto","email":"matt@153.io"},{"name":"rowanmanning","email":"accounts@rowanmanning.co.uk"},{"name":"mattandrews","email":"matt@mattandre.ws"},{"name":"jakedchampion","email":"me@jakechampion.name"},{"name":"i-like-robots","email":"matt+npm@maketea.co.uk"},{"name":"aendrew","email":"aendrew@aendrew.com"},{"name":"sdbernard","email":"steve.bernard@ft.com"},{"name":"bobhaslett","email":"bob.haslett@ft.com"},{"name":"joannaskao","email":"joannaskao@gmail.com"},{"name":"robinmarr-ft","email":"robin.marr@ft.com"},{"name":"ft-internal-products","email":"ip.engineering@ft.com"}],"dist":{"shasum":"9fc3146c09f797aa0df943a13ebb901303cbb661","tarball":"https://registry.npmjs.org/@financial-times/o-hierarchical-nav/-/o-hierarchical-nav-5.1.0.tgz","fileCount":24,"integrity":"sha512-6gAKYsmQL7xn6Lzx86V4kgK+zrpnijzOGQrtq1leWBtICdx1XKWnvpHvU/n8YnhKjXmZtf6PnAm8xxY8qh1J+w==","signatures":[{"sig":"MEQCIDrs4TJ/Grlm3FEE9niEPP+SerTTIssEDsxfhoMe4AskAiA2jI46nSQ4e0JRMxUGNhfEkwgEDdWm42kOLHzaW2Kt9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYwgpCRA9TVsSAnZWagAAe7sP/0Krd3/bTtb9yMqk5g9F\nXb5/iW1pN++EnjbKmRYkjbKba9++iLcI0xup3sLXoTEyp01nSFl7/r19C6KE\n0b3tFzuNQ9xkprbc51RmWh08pPnZCeVII3VW2UgTL2foqTJzGpiGyEIS/nUl\nrqXsJ9fiX/6xMrHrEYBuT4RQ2WjpLJM0iqvs6huFhN4OX4/Drtj8K4+rd51X\nt534cmjAKZIeFDfIOHW5jWQxVbiTkYBslfoSeXGbOZpefzvbDuaRo7U60hg8\nget649G0g6+h86Y0S09rUYZPTD0+Bfw0fqIPT2+aHh6Jto8iBhKdxt+HAyGp\nWuolpdsw3Zao20wbi8DribPo9omBRiKDAnwK1mnu7/8AN9bVLX9WQClP2u+b\nbFoBWrpGiZSx8oYG+W8lTYE9ZjZj76JxwZMR0xyd2evjXNBc2tiRB9eDHU4Q\n8DwRnhGYym44ZsvqgmsXqP6BrQNi//JFszlw4CMA+MgoAP8rOiaCFJjRFXmr\nrqg7tgOtPwYLiiuH61pkWN3JNn7lLzNw/suFDodfMHfzxc9I4g4eKTZCQWEG\nMjOYh93HMA/duBhIxDC31RFeOOJ5dS10c1VTYcX4ahMxD0NUnNkfsyMjSQhg\n9EGLj0IlJBSC/S919d+HD8ti8vewxMoDGRr1emG/yfnx59L0DhxRUowWDbVG\nZpZh\r\n=7xq3\r\n-----END PGP SIGNATURE-----\r\n"},"browser":"browser.js","gitHead":"c77bf9c91be330774b3d9cc63e0658496540443e","_npmUser":{"name":"the-ft","email":"strategic.products+npm@ft.com"},"component":"o-hierarchical-nav","deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.4.1","description":"Responsive hierarchical navigation pattern.","directories":{},"_nodeVersion":"10.15.1","dependencies":{"dom-delegate":">=1.0.0 <3","@financial-times/o-icons":">=4.4.2 <6","@financial-times/o-colors":"^4.0.1","@financial-times/o-layers":">=0.2.0 <3","@financial-times/o-viewport":">=1.0.0 <4","@financial-times/o-hoverable":">=0.1.1 <4","@financial-times/o-squishy-list":">=1.0.0 <3"},"eslintIgnore":["browser.js","dist/"],"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/o-hierarchical-nav_5.1.0_1549994024943_0.6881558788714555","host":"s3://npm-registry-packages"}},"5.1.1":{"name":"@financial-times/o-hierarchical-nav","version":"5.1.1","keywords":["origami","component","ft"],"_id":"@financial-times/o-hierarchical-nav@5.1.1","maintainers":[{"name":"aendrew","email":"aendrew@aendrew.com"},{"name":"bobhaslett","email":"bob.haslett@ft.com"},{"name":"briggsc","email":"charlie.briggs@bbc.co.uk"},{"name":"chee","email":"chee@snoot.club"},{"name":"ft-internal-products","email":"ip.engineering@ft.com"},{"name":"i-like-robots","email":"matt+npm@maketea.co.uk"},{"name":"jakedchampion","email":"me@jakechampion.name"},{"name":"joannaskao","email":"joannaskao@gmail.com"},{"name":"mattandrews","email":"matt@mattandre.ws"},{"name":"quarterto","email":"matt@153.io"},{"name":"robinmarr-ft","email":"robin.marr@ft.com"},{"name":"rowanmanning","email":"accounts@rowanmanning.co.uk"},{"name":"sdbernard","email":"steve.bernard@ft.com"},{"name":"the-ft","email":"strategic.products+npm@ft.com"}],"dist":{"shasum":"a9ad083c84cc78d23b2be221a996accc0eb95a07","tarball":"https://registry.npmjs.org/@financial-times/o-hierarchical-nav/-/o-hierarchical-nav-5.1.1.tgz","fileCount":21,"integrity":"sha512-FmuYA90CcFxLZ0/Lc1xO5KpyVpqI6FXZ0nJPT1MsDn3gVkmkcKt53YqV1QEutM0cROwxLV9iBhBhekB4EFIZpQ==","signatures":[{"sig":"MEUCIC9AhIbzJNG9IS1tTF+dvZcR7/v/6AJzE2fGNTngxst8AiEAxhXV5fAVF0mkNy5vQ2jSs7U07GFQrFpBRXHlbZtSYZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":56837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2HHoCRA9TVsSAnZWagAA7uQQAItNI086UN7Nk6YsB+1d\naoCuUIB2J7IKNDHJCdy2fPDs//cJx97m8MwS7sr6Wbl7AYFQNMBkOe4loqwk\nvlRJqQqWAAlfkMa85v7+VQ2r5jLGdBTufGoQZTdsrapPP6M3sGJiTTe9U9WT\n8xq2L5VsHHOOs6cokUeFLBk8NO6vOIqulG0J9k+Bv6NDHbcvG0NSRWogJ1YK\nApOdiSDh/WX8KqipguO3HgUHFi+oQEhiZUwTeIgWq47odD6FCICQAg5ujos8\n5i51tnczCunY/1Vix7Yx5Xrv57/vVlfZYj56CfVo1A8V89gD/kxUguk5lFJu\n+V3P+DhIWptot4RT4/kWJtykiQVqgV2Nw8ZqlGdGKyvfhf2P2EXxYkXykNa2\nG1/Ihs+lzycOqrFdCxNUucF28v9QuqFlCuX7akeFjJSw40+pncS6p8KRCvQ7\n2rPmFkF+2vV5K/ss4OJr4VkR0rNBRA2gVyCZNM0UvY8/1hIDP0UwLl8AQn+f\nVxQLNa0ndnE5633X4kcaWGQcjnNh5CnmxXVlCE0+Xofnb/yXcNto5uG3xaZ1\nr3XNd7RS7WoH6hnxfM3ScYF5Sa4y6ouNcZJ7zamv1q/t3rhVIgakNx0E8U38\naM+geZJ043HgRZStgKfio2QlO6eowO6Zd118XqRTrPYEQPawqmi6ezLEfxYv\nYuuJ\r\n=2uA1\r\n-----END PGP SIGNATURE-----\r\n"},"browser":"browser.js","gitHead":"8dfaaba40ec54db2627e70dce5ed8ef2416cac2b","scripts":{},"_npmUser":{"name":"the-ft","email":"strategic.products+npm@ft.com"},"component":"o-hierarchical-nav","deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.4.1","description":"","directories":{},"_nodeVersion":"10.15.1","dependencies":{"dom-delegate":">=1.0.0 <3","@financial-times/o-icons":">=4.4.2 <6","@financial-times/o-colors":"^4.0.1","@financial-times/o-layers":">=0.2.0 <3","@financial-times/o-viewport":">=1.0.0 <4","@financial-times/o-hoverable":">=0.1.1 <4","@financial-times/o-squishy-list":">=1.0.0 <3"},"eslintIgnore":["browser.js","dist/"],"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/o-hierarchical-nav_5.1.1_1551197445918_0.2727439372378595","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-02-12T17:53:44.800Z","modified":"2026-06-23T16:03:25.275Z","5.1.0":"2019-02-12T17:53:45.087Z","5.1.1":"2019-02-26T16:10:46.037Z"},"keywords":["origami","component","ft"],"maintainers":[{"email":"code.management@ft.com","name":"the-ft"},{"email":"info+npm@rowanmanning.com","name":"rowanmanning"},{"email":"yay@chee.party","name":"chee"},{"email":"a@ax.gy","name":"alexwilson"},{"email":"howdy@aendra.com","name":"aendra"},{"email":"emma.lewis@ft.com","name":"emmalewis"},{"email":"lee@leemoody.co.uk","name":"notlee"},{"email":"hamza.samih@ft.com","name":"hamza.samih"},{"email":"robert.boulton@ft.com","name":"robertboulton"},{"email":"leila.micollier@ft.com","name":"leila.micollier"},{"email":"rob.godfrey@ft.com","name":"robgodfrey"}],"readme":"# Hierarchical Nav [![Build Status](https://circleci.com/gh/Financial-Times/o-hierarchical-nav.png?style=shield&circle-token=e13dbb693f411e99914c9979cf1471e5c05b1397)](https://circleci.com/gh/Financial-Times/o-hierarchical-nav) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)\n\n\n_Deprecated, please use [o-header-services](https://registry.origami.ft.com/components/o-header-services) instead._\n\nResponsive hierarchical navigation pattern.\n\n## Navigation\n\nAll navigation options have the same general markup structure that you can see in [main.mustache](https://github.com/Financial-Times/o-hierarchical-nav/blob/master/main.mustache).\n\nEach _navigation item_ can be either:\n\n* __Plain text__: must still be wrapped in `<a>` tag, e.g. `<a>World</a>`\n* __Linked text__: e.g. `<a href=\"/world\">World</a>`\n* __Sub Component__: must be wrapped in `<li>` with a `data-o-hierarchical-nav-is-cloneable` attribute, e.g `<li data-o-hierarchical-nav-is-cloneable>...</li>`\n\n…and can have one of the following behaviours:\n\n* __Standalone item__\n* __Parent of sub-level__: opens further navigation list with child options\n* __Controller for DOM element__: shows and hides an element elsewhere on the page, e.g. a 'mega-dropdown'\n\nWhere a _navigation item_ is both a link and a parent or controller for mega-dropdown, the default behaviour on click will be cancelled.\n\n### Parent of sub-level\n\nThe `<li>` should be given a class of `o-hierarchical-nav__parent`, and should contain another `<ul>` list that declares its level via a data attribute:\n\n```html\n<li class=\"o-hierarchical-nav__parent\"><a>Level 2 item with sub-level</a>\n\t<ul data-o-hierarchical-nav-level=\"3\">\n\t\t<li><a>Level 3 item</a></li>\n\t\t<li><a>Level 3 item</a></li>\n\t</ul>\n</li>\n```\n\nWhen the nav item is clicked, the `<li>` will have an `aria-expanded` attribute toggled, which will control the visibility of the child list.\n\n### Controller for DOM element\n\nThe `<li>` should be given an `aria-controls` attribute with the value being the ID of the DOM element to control, for example:\n\n```html\n<li aria-controls=\"megadropdown\"><a>Mega dropdown</a></li>\n\n...\n\n<div id=\"megadropdown\" aria-hidden=\"true\">\n\tMega-dropdown content\n</div>\n```\n\nWhen the nav item is clicked, the element targeted by the `aria-control` attribute will have its `aria-hidden` attribute toggled.\n\n#### Megadropdowns\n\nThe horizontal base style comes with default styling for a __megadropdown__ element. This element has to add the class `.o-hierarchical-nav__mega-dropdown`.\n\n## Responsive collapsing of horizontal navigation\n\n__Horizontal navigation__ styles use [o-squishy-list](https://github.com/Financial-Times/o-squishy-list) to allow priorities to be set on the top level nav items:\n\n```html\n<nav>\n\t<ul data-o-hierarchical-nav-level=\"1\">\n\t\t<li data-priority=\"2\"><a>Important page</a></li>\n\t\t<li data-priority=\"3\"><a>Less important page</a></li>\n\t\t<li data-priority=\"1\"><a>Home</a></li>\n\t</ul>\n</nav>\n```\n\n__o-squishy-list__ will show as many items has will fit in the available width. If not everything will fit, then the necessary number of items will be hidden, starting with the lowest priority items.\n\nIf you don't want to use a responsive horizontal navigation, you can require [Nav.js](https://github.com/Financial-Times/o-hierarchical-nav/blob/master/src/js/Nav.js) directly.\n\n### Hidden navigation items\n\nA 'More' item may be added to the top level which will be populated with a list of elements that have been hidden by __o-squishy-list__:\n\n```html\n<li data-more class=\"o-hierarchical-nav__parent\" aria-hidden=\"true\"><a>More</a></li>\n```\n\nThis item is be hidden until it's needed. It's recommended that `aria-hidden=\"true\"` should be added to a 'More' item so that it won't appear when running on core experience.\n\nIf there's a chance that all nav items will be hidden and added to the More list, then it's possible to change the text title of the More item depending on whether it contains _some_ or _all_ the navigation items:\n\n```html\n<li data-more class=\"o-hierarchical-nav__parent\"><a><span class=\"nav__more--if-some\">More</span><span class=\"nav__more--if-all\">Menu</span></a></li>\n```\n#### Sub-Components\n\nIf there is a structure required for the styling of nav components (i.e. other elements are required for icon display) or elements that are not links but should reduce to a sub-level when screen space does not allow then you can add a 'data-o-hierarchical-nav-is-cloneable' attribute and the element will be deeply cloned rather than a new anchor tag with the text content copied.\n\n```html\n<li data-o-hierarchical-nav-is-cloneable><a><span>An item to clone</span><img src=\"\" alt=\"icon\"></a></li>\n```\n\n## Vertical hierarchical nav\n\nTo make a nav work in a vertical layout, add `data-o-hierarchical-nav-orientiation=\"vertical\"` to the `<nav>`.\n\n## Arrows\n\nAdd a `<i></i>` to display an arrow icon at the end of an `<a>` element:\n\n```html\n<li class=\"o-hierarchical-nav__parent\"><a>Item 3.2 (parent) <i></i></a>\n```\n\n## Styling\n\nThere are two base mixins for modules and products to include:\n\n* __Horizontal__: `@include oHierarchicalNavHorizontalTheme`\n* __Vertical__: `@include oHierarchicalNavVerticalTheme`\n\nThings that are important to add to your theme are:\n\n* Styles for the `[aria-selected=\"true\"]` attribute\n* Setting a width for `<nav>` when extending the __vertical__ theme\n* Down and right arrow icons for parent elements. Make sure the size and color are correct.\n\nIf you want to style __megadropdowns__, you need to add `@at-root` before the `.o-hierarchical-nav__mega-dropdown` class.\n\n## JavaScript instantiation\n\n### Manual instantiation\n\nAn __o-hierarchical-nav__ object must be constructed for every `<nav>` you have on your page that uses this module.\n\n```javascript\nimport oHierarchicalNav from '../../../main.js';\nvar nav = document.querySelector('.o-hierarchical-nav');\nvar hierarchicalNav = new oHierarchicalNav(nav);\n```\n\n### Auto-instantiation\n\nAlternatively, a `o.DOMContentLoaded` event can be dispatched on the `document` to auto-construct a __o-hierarchical-nav__ object for each element with a `data-o-component=\"o-hierarchical-nav\"` attribute:\n\n```javascript\nimport oHierarchicalNav from '../../../main.js';\n\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\tdocument.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));\n});\n```\n\n## Migration Guide\n\n### Updating from v4 to v5\n\nV4 -> V5 introduces the new major of o-colors. Updating to this new version will mean updating any other components that you have which are using `o-colors`. There are no other breaking changes in this release.\n\n----\n\n## License\n\nThis software is published under the [MIT licence](http://opensource.org/licenses/MIT).\n","readmeFilename":"README.md"}