@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/esm/navigation/Link/index.mdx

@@ -11,43 +11,25 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link"story="NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
+
+### Accessibility
 
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at

package/esm/navigation/NavList/NavList.stories.js

@@ -7,4 +7,8 @@ export default {
   displayName: 'NavList'
 };
 export * from '@digigov/ui/navigation/NavList/__stories__/Default';
-export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalWithTitle';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithSubMenu';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout';
+export * from '@digigov/ui/navigation/NavList/__stories__/WithBurgerIcon';

package/esm/navigation/NavList/NavList.stories.playwright.json

@@ -1,31 +1,31 @@
 {
   "version": "4",
   "stories": {
-    "digigov-ui-navigation-navlist--default": {
+    "digigov-ui-navigation-navlist--with-sub-menu": {
       "actionSets": [
         {
           "actions": [
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "FO0jt9D4koTE",
+          "title": "Hover Item"
         },
         {
           "actions": [
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "pSAeXNWiklxX",
+          "title": "Open submenu"
         }
       ]
     }

package/esm/navigation/NavList/NavListAuto/index.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["layout", "border", "fixed", "links"];
+import React from 'react';
+import { useNavList } from '../hooks/useNavList';
+import NavListItemAction from '@digigov/react-core/NavListItemAction';
+import { Link } from '@digigov/ui/navigation/Link';
+import Nav from '../Nav';
+import NavList from '@digigov/react-core/NavList';
+import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
+import NavMenuContent from '@digigov/react-core/NavMenuContent';
+import NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
+import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
+import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
+export var NavListAuto = function NavListAuto(_ref) {
+  var layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, _extends({
+    open: true,
+    border: border,
+    fixed: fixed
+  }, props), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$menu, _item$menu2, _item$menu$links;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.menu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), ((_item$menu = item.menu) === null || _item$menu === void 0 ? void 0 : _item$menu.title) && /*#__PURE__*/React.createElement(NavMenuTitle, null, (_item$menu2 = item.menu) === null || _item$menu2 === void 0 ? void 0 : _item$menu2.title), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$menu$links = item.menu.links) === null || _item$menu$links === void 0 ? void 0 : _item$menu$links.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default NavListAuto;

package/esm/navigation/NavList/{NavMenuContainerContentList.js → NavMenuContentList.js}

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React from 'react';
-import NavMenuContainerContentListWrapper from '@digigov/react-core/NavMenuContainerContentList';
-export * from '@digigov/react-core/NavMenuContainerContentList';
+import NavMenuContentListBase from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListBase';
 
 var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   var _document$activeEleme;
@@ -40,11 +40,11 @@ var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   }
 };
 
-export var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+export var NavMenuContentList = function NavMenuContentList(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavMenuContainerContentListWrapper, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NavMenuContentListBase, _extends({}, props, {
     onKeyDown: function onKeyDown(event) {
       switch (event.key) {
         case 'ArrowDown':
@@ -63,4 +63,4 @@ export var NavMenuContainerContentList = function NavMenuContainerContentList(_r
     }
   }), children);
 };
-export default NavMenuContainerContentList;
+export default NavMenuContentList;

package/esm/navigation/NavList/__stories__/Default.js

@@ -1,89 +1,39 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle, useNavList } from '@digigov/ui/navigation/NavList';
-import { Link } from '@digigov/ui/navigation/Link';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
 var links = [{
   name: 'home',
   href: '#home',
-  label: 'Αρχική'
+  label: 'Αρχική',
+  active: true
 }, {
-  name: 'educational',
-  label: 'Εκπαιδευτικό υλικό',
-  subMenu: [{
-    name: 'elearning',
-    href: '#elearning',
-    label: 'Εκπαιδευτική πλατφόρμα'
-  }, {
-    name: 'videos',
-    href: '#videos',
-    label: 'Βίντεο'
-  }, {
-    name: 'presentations',
-    href: '#presentations',
-    label: 'Παρουσιάσεις'
-  }, {
-    name: 'promoting',
-    href: '#promoting',
-    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
-  }, {
-    name: 'other-texts',
-    href: '#other-texts',
-    label: 'Άλλα κείμενα'
-  }]
+  name: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
 }, {
   name: 'news',
   href: '#news',
   label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
 }];
 export var Default = function Default() {
-  var layout = 'horizontal';
-  var border = false;
-
   var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
-    open: true,
-    layout: layout,
-    border: border,
-    "aria-orientation": layout
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false
   }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
   })));
 };
 export default Default;

package/esm/navigation/NavList/__stories__/NavVertical.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+export var NavVertical = function NavVertical() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  })));
+};
+export default NavVertical;

package/esm/navigation/NavList/__stories__/NavVerticalLayout.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Link from '@digigov/ui/navigation/Link';
-import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/navigation/NavList';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle } from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 var links = [{
   name: 'home',
@@ -42,49 +42,35 @@ export var NavVerticalLayout = function NavVerticalLayout() {
   var border = false;
 
   var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout,
     border: border
-  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
       role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        role: "presentation",
-        key: menuIndex
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/React.createElement(Link, {
         role: "menuitem",
         id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
-    }))))));
+    })))));
   })));
 };
 export default NavVerticalLayout;

package/esm/navigation/NavList/__stories__/NavVerticalWithTitle.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import { Heading } from '@digigov/ui/typography/Heading';
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  size: "sm"
+}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03BF\u03AF \u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03B9");
+
+export var NavVerticalWithTitle = function NavVerticalWithTitle() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement("div", null, _ref, /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+export default NavVerticalWithTitle;

package/esm/navigation/NavList/__stories__/WithBurgerIcon.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import NavList from '@digigov/ui/navigation/NavList/NavList';
+import { BurgerIcon } from '@digigov/ui/icons';
+import { Nav, NavListItemAction } from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+var links = [{
+  name: 'home',
+  href: '#home',
+  label: 'Αρχική',
+  active: true
+}, {
+  name: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
+}, {
+  name: 'news',
+  href: '#news',
+  label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
+}];
+export var WithBurgerIcon = function WithBurgerIcon() {
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BurgerIcon, {
+    mdUpHidden: true,
+    size: "lg",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }), /*#__PURE__*/React.createElement(Nav, {
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false,
+    open: open
+  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+export default WithBurgerIcon;

package/esm/navigation/NavList/__stories__/WithSubMenu.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment } from 'react';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+var links = [{
+  name: 'home',
+  href: '#home',
+  label: 'Αρχική'
+}, {
+  name: 'educational',
+  label: 'Εκπαιδευτικό υλικό',
+  subMenu: [{
+    name: 'elearning',
+    href: '#elearning',
+    label: 'Εκπαιδευτική πλατφόρμα'
+  }, {
+    name: 'videos',
+    href: '#videos',
+    label: 'Βίντεο'
+  }, {
+    name: 'presentations',
+    href: '#presentations',
+    label: 'Παρουσιάσεις'
+  }, {
+    name: 'promoting',
+    href: '#promoting',
+    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
+  }, {
+    name: 'other-texts',
+    href: '#other-texts',
+    label: 'Άλλα κείμενα'
+  }]
+}, {
+  name: 'news',
+  href: '#news',
+  label: 'Νέα'
+}];
+export var WithSubMenu = function WithSubMenu() {
+  var layout = 'horizontal';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    open: true,
+    border: border,
+    "aria-orientation": layout
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default WithSubMenu;

package/esm/navigation/NavList/hooks/useNavList.js

@@ -19,7 +19,7 @@ export var useNavList = function useNavList() {
       opened = _useTogglableNav.opened,
       rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
-  var container = useCallback(function (key) {
+  var registerNavItemMenu = useCallback(function (key) {
     return {
       ref: function ref(el) {
         if (el && !registeredContainers.current[el.id]) {
@@ -34,6 +34,6 @@ export var useNavList = function useNavList() {
     registerButton: registerButton,
     registerLink: registerLink,
     opened: opened,
-    container: container
+    registerNavItemMenu: registerNavItemMenu
   }, rest);
 };

package/esm/navigation/NavList/hooks/useTogglableNav.js

@@ -18,24 +18,6 @@ export function useTogglableNav(_ref) {
 
   var registered = useRef({});
   var openedKeys = useRef([]);
-  var registerButtonRef = useCallback(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'button'
-    };
-  }, []);
-  var registerLinkRef = useCallback(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'link'
-    };
-  }, []);
   var toggle = useCallback(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
     var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
@@ -261,6 +243,24 @@ export function useTogglableNav(_ref) {
         break;
     }
   }, []);
+  var registerButtonRef = useCallback(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'button'
+    };
+  }, []);
+  var registerLinkRef = useCallback(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'link'
+    };
+  }, []);
   var registerButton = useCallback(function (key) {
     var _extends2;
 
@@ -279,8 +279,23 @@ export function useTogglableNav(_ref) {
       onKeyDown: onKeyDown
     });
   }, [opened]);
+  var registerNavItem = useCallback(function (item) {
+    if (item.subMenu || item.menu) {
+      return _extends({}, registerButton(item.name), {
+        role: 'button'
+      });
+    } else if (item.href) {
+      return _extends({}, registerLink(item.name), {
+        href: item.href
+      });
+    } else {
+      console.error(item);
+      throw new Error('Invalid nav item. Must be either button or link');
+    }
+  }, [opened]);
   return useMemo(function () {
     return {
+      registerNavItem: registerNavItem,
       registerButton: registerButton,
       registerLink: registerLink,
       registered: registered,