@patternfly/react-core 4.232.7 → 4.232.10

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -7,40 +7,45 @@ interface MenuHeights {
 }
 
 const subMenuTwo: JSX.Element = (
-  <DrilldownMenu id="subMenu-2">
-    <MenuItem itemId="subMenu-2-breadcrumb" direction="up">
+  <DrilldownMenu id="nav-drilldown-subMenu-2">
+    <MenuItem itemId="nav-drilldown-subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-1" to="#subMenu-2_item-1">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-1" to="#subMenu-2_item-1">
       SubMenu 2 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-2" to="#subMenu-2_item-2">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-2" to="#subMenu-2_item-2">
       SubMenu 2 - Item 2
     </MenuItem>
-    <MenuItem itemId="subMenu-2_item-3" to="#subMenu-2_item-3">
+    <MenuItem itemId="nav-drilldown-subMenu-2_item-3" to="#subMenu-2_item-3">
       SubMenu 2 - Item 3
     </MenuItem>
   </DrilldownMenu>
 );
 
 const subMenuOne: JSX.Element = (
-  <DrilldownMenu id="subMenu-1">
-    <MenuItem itemId="subMenu-1-breadcrumb" direction="up">
+  <DrilldownMenu id="nav-drilldown-subMenu-1">
+    <MenuItem itemId="nav-drilldown-subMenu-1-breadcrumb" direction="up">
       Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-1" description="SubMenu 2" direction="down" drilldownMenu={subMenuTwo}>
+    <MenuItem
+      itemId="nav-drilldown-subMenu-1_item-1"
+      description="SubMenu 2"
+      direction="down"
+      drilldownMenu={subMenuTwo}
+    >
       SubMenu 1 - Item 1
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-2" to="#subMenu-1_item-2">
+    <MenuItem itemId="nav-drilldown-subMenu-1_item-2" to="#subMenu-1_item-2">
       SubMenu 1 - Item 2
     </MenuItem>
-    <MenuItem itemId="subMenu-1_item-3" to="#subMenu-1_item-3">
+    <MenuItem itemId="nav-drilldown-subMenu-1_item-3" to="#subMenu-1_item-3">
       SubMenu 1 - Item 3
     </MenuItem>
   </DrilldownMenu>
 );
 
-export const NavLevelThreeDrill: React.FunctionComponent = () => {
+export const NavigationDrilldown: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeights>({});
@@ -67,7 +72,7 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => {
   return (
     <Nav aria-label="Drilldown global nav">
       <Menu
-        id="rootMenu"
+        id="nav-drilldown-rootMenu"
         containsDrilldown
         drilldownItemPath={drilldownPath}
         drilledInMenus={menuDrilledIn}
@@ -78,13 +83,13 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => {
       >
         <MenuContent menuHeight={`${menuHeights[activeMenu]}px`}>
           <MenuList>
-            <MenuItem itemId="item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
+            <MenuItem itemId="nav-drilldown-item-1" direction="down" description="SubMenu 1" drilldownMenu={subMenuOne}>
               Item 1
             </MenuItem>
-            <MenuItem itemId="item-2" to="#item-2">
+            <MenuItem itemId="nav-drilldown-item-2" to="#item-2">
               Item 2
             </MenuItem>
-            <MenuItem itemId="item-3" to="#item-3">
+            <MenuItem itemId="nav-drilldown-item-3" to="#item-3">
               Item 3
             </MenuItem>
           </MenuList>

package/src/components/Nav/examples/NavExpandable.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+
+export const NavExpandableExample: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1');
+  const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  const onItemClick = (
+    _event: React.FormEvent<HTMLInputElement>,
+    itemId: number | string,
+    _groupId: number | string
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(`Custom click handler on ${itemId}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable global nav">
+      <NavList>
+        <NavExpandable
+          title="Expandable Group 1"
+          groupId="nav-expandable-group-1"
+          isActive={activeGroup === 'nav-expandable-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable-1"
+            to="#expandable-1"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-1"
+            isActive={activeItem === 'nav-expandable-group-1_item-1'}
+          >
+            Subnav 1 Link 1
+          </NavItem>
+          <NavItemSeparator />
+          <NavItem
+            preventDefault
+            id="expandable-2"
+            to="#expandable-2"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-2"
+            isActive={activeItem === 'nav-expandable-group-1_item-2'}
+          >
+            Subnav 1 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-3"
+            to="#expandable-3"
+            groupId="nav-expandable-group-1"
+            itemId="nav-expandable-group-1_item-3"
+            isActive={activeItem === 'nav-expandable-group-1_item-3'}
+          >
+            Subnav 1 Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable Group 2"
+          groupId="nav-expandable-group-2"
+          isActive={activeGroup === 'nav-expandable-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            onClick={onItemClick}
+            id="expandable-custom-click"
+            to="#expandable-custom-click"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_custom-click"
+            isActive={activeItem === 'nav-expandable-group-2_custom-click'}
+          >
+            Custom onClick Link
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-4"
+            to="#expandable-4"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-1"
+            isActive={activeItem === 'nav-expandable-group-2_item-1'}
+          >
+            Subnav 2 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-5"
+            to="#expandable-5"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-2"
+            isActive={activeItem === 'nav-expandable-group-2_item-2'}
+          >
+            Subnav 2 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-6"
+            to="#expandable-6"
+            groupId="nav-expandable-group-2"
+            itemId="nav-expandable-group-2_item-3"
+            isActive={activeItem === 'nav-expandable-group-2_item-3'}
+          >
+            Subnav 2 Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavExpandableThirdLevel.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavExpandableThirdLevel: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
+  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  const onToggle = (result: { groupId: number | string; isExpanded: boolean }) => {
+    // eslint-disable-next-line no-console
+    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
+  };
+
+  return (
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global nav">
+      <NavList>
+        <NavExpandable
+          title="Expandable section title 1"
+          groupId="nav-expand3rd-group-1"
+          isActive={activeGroup === 'nav-expand3rd-group-1'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable3rd-1"
+            to="#expandable3rd-1"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-1"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-1'}
+          >
+            With 3rd 1 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable3rd-2"
+            to="#expandable3rd-2"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-2"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-2'}
+          >
+            With 3rd 1 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable3rd-3"
+            to="#expandable3rd-3"
+            groupId="nav-expand3rd-group-1"
+            itemId="nav-expand3rd-group-1_item-3"
+            isActive={activeItem === 'nav-expand3rd-group-1_item-3'}
+          >
+            With 3rd 1 Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable section title 2"
+          groupId="nav-expand3rd-group-2"
+          isActive={activeGroup === 'nav-expand3rd-group-2'}
+          isExpanded
+        >
+          <NavItem
+            preventDefault
+            id="expandable3rd-4"
+            to="#expandable3rd-4"
+            groupId="nav-expand3rd-group-2"
+            itemId="nav-expand3rd-group-2_item-1"
+            isActive={activeItem === 'nav-expand3rd-group-2_item-1'}
+          >
+            With 3rd 2 Link 1
+          </NavItem>
+          <NavExpandable
+            title="Expandable third level"
+            groupId="nav-expand3rd-group-3"
+            isActive={activeGroup === 'nav-expand3rd-group-3'}
+            isExpanded
+          >
+            <NavItem
+              preventDefault
+              id="expandable3rd-5"
+              to="#expandable3rd-5"
+              groupId="nav-expand3rd-group-3"
+              itemId="nav-expand3rd-group-3_item-1"
+              isActive={activeItem === 'nav-expand3rd-group-3_item-1'}
+            >
+              Third Level Link 1
+            </NavItem>
+            <NavItem
+              preventDefault
+              id="expandable3rd-6"
+              to="#expandable3rd-6"
+              groupId="nav-expand3rd-group-3"
+              itemId="nav-expand3rd-group-3_item-3"
+              isActive={activeItem === 'nav-expand3rd-group-3_item-2'}
+            >
+              Third Level Link 2
+            </NavItem>
+          </NavExpandable>
+          <NavItem
+            preventDefault
+            id="expandable3rd-7"
+            to="#expandable3rd-7"
+            groupId="nav-expand3rd-group-2"
+            itemId="nav-expand3rd-group-2_item-2"
+            isActive={activeItem === 'nav-expand3rd-group-2_item-2'}
+          >
+            With 3rd 2 Link 2
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavFlyout.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const NavFlyout: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1');
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as string);
+  };
+
+  const onMenuSelect = (_event: any, itemId: string | number | undefined) => setActiveItem(itemId as string);
+
+  const onMenuItemClick = (event: any) => {
+    event.preventDefault();
+  };
+
+  const numFlyouts = 5;
+  const FlyoutMenu = ({ depth, children }) => (
+    <Menu key={depth} containsFlyout isNavFlyout id={`nav-flyout-menu-${depth}`} onSelect={onMenuSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem
+            onClick={onMenuItemClick}
+            flyoutMenu={children}
+            itemId={`nav-flyout-next-menu-${depth}`}
+            to={`#next-menu-link-${depth}`}
+          >
+            Next menu
+          </MenuItem>
+          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+            <MenuItem
+              onClick={onMenuItemClick}
+              key={`${depth}-${index}`}
+              itemId={`nav-flyout-${depth}-${index}`}
+              to={`#menu-link-${depth}-${index}`}
+              isActive={activeItem === `nav-flyout-${depth}-${index}`}
+            >
+              Menu {depth} item {index}
+            </MenuItem>
+          ))}
+          <MenuItem
+            onClick={onMenuItemClick}
+            flyoutMenu={children}
+            itemId={`nav-flyout-next-menu-2-${depth}`}
+            to={`#next-menu-2-link-${depth}`}
+          >
+            Next menu
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+
+  let curFlyout = <FlyoutMenu depth={1}>{null}</FlyoutMenu>;
+  for (let i = 2; i < numFlyouts - 1; i++) {
+    curFlyout = <FlyoutMenu depth={i}>{curFlyout}</FlyoutMenu>;
+  }
+
+  return (
+    <Nav onSelect={onSelect} aria-label="Flyout global nav">
+      <NavList>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link-1"
+          to="#nav-flyout-default-link-1"
+          itemId="nav-flyout-default-link-1"
+          isActive={activeItem === 'nav-flyout-default-link-1'}
+        >
+          Flyout Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link-2"
+          to="#nav-flyout-default-link-2"
+          itemId="nav-flyout-default-link-2"
+          isActive={activeItem === 'nav-flyout-default-link-2'}
+        >
+          Flyout Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          flyout={curFlyout}
+          id="nav-flyout-default-link-3"
+          to="#nav-flyout-default-link-3"
+          itemId="nav-flyout-default-link-3"
+          isActive={activeItem === 'nav-flyout-default-link-3'}
+        >
+          Flyout Link 3
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-flyout-default-link4"
+          to="#nav-flyout-default-link4"
+          itemId="nav-flyout-default-link-4"
+          isActive={activeItem === 'nav-flyout-default-link-4'}
+        >
+          Flyout Link 4
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavGrouped.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Nav, NavItem, NavGroup } from '@patternfly/react-core';
+
+export const NavGrouped: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState('group-1_item-1');
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as string);
+  };
+
+  return (
+    <Nav onSelect={onSelect} aria-label="Grouped global nav">
+      <NavGroup title="Section title 1">
+        <NavItem
+          preventDefault
+          to="#nav-group1-item1"
+          itemId="group-1_item-1"
+          isActive={activeItem === 'group-1_item-1'}
+        >
+          Group 1 Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group1-item2"
+          itemId="group-1_item-2"
+          isActive={activeItem === 'group-1_item-2'}
+        >
+          Group 1 Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group1-item3"
+          itemId="group-1_item-3"
+          isActive={activeItem === 'group-1_item-3'}
+        >
+          Group 1 Link 3
+        </NavItem>
+      </NavGroup>
+      <NavGroup title="Section title 2">
+        <NavItem
+          preventDefault
+          to="#nav-group2-item1"
+          itemId="group-2_item-1"
+          isActive={activeItem === 'group-2_item-1'}
+        >
+          Group 2 Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group2-item2"
+          itemId="group-2_item-2"
+          isActive={activeItem === 'group-2_item-2'}
+        >
+          Group 2 Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          to="#nav-group2-item3"
+          itemId="group-2_item-3"
+          isActive={activeItem === 'group-2_item-3'}
+        >
+          Group 2 Link 3
+        </NavItem>
+      </NavGroup>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavHorizontalPageHeader.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Nav, NavItem, NavList, PageHeader } from '@patternfly/react-core';
+
+export const NavHorizontalPageHeader: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  const nav = (
+    <Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal global nav">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`horizontal-pageHeader-${num}`}
+              to={`#horizontal-pageHeader-${num}`}
+            >
+              Horizontal nav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+
+  return <PageHeader topNav={nav} />;
+};

package/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavHorizontalSubNav: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav global nav">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`horizontal-subnav-${num}`}
+              to={`#horizontal-subnav-${num}`}
+            >
+              Horizontal subnav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavLegacyTertiary: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary global nav">
+      <NavList>
+        {Array.apply(0, Array(10)).map(function(_item, index: number) {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`legacy-tertiary-${num}`}
+              to={`#legacy-tertiary-${num}`}
+            >
+              Tertiary nav item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};

package/src/components/Nav/examples/NavMixed.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core';
+
+export const NavMixed: React.FunctionComponent = () => {
+  const [activeGroup, setActiveGroup] = React.useState('');
+  const [activeItem, setActiveItem] = React.useState('ungrouped_item-1');
+
+  const onSelect = (result: { itemId: number | string; groupId: number | string | null }) => {
+    setActiveGroup(result.groupId as string);
+    setActiveItem(result.itemId as string);
+  };
+
+  return (
+    <Nav onSelect={onSelect} aria-label="Mixed global nav">
+      <NavList>
+        <NavItem
+          preventDefault
+          id="mixed-1"
+          to="#mixed-1"
+          itemId="ungrouped_item-1"
+          isActive={activeItem === 'ungrouped_item-1'}
+        >
+          Link 1 (not expandable)
+        </NavItem>
+        <NavExpandable
+          title="Expandable section title 1"
+          groupId="nav-mixed-group-1"
+          isActive={activeGroup === 'nav-mixed-group-1'}
+        >
+          <NavItem
+            preventDefault
+            id="mixed-2"
+            to="#mixed-2"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-1"
+            isActive={activeItem === 'nav-mixed-group-1_item-1'}
+          >
+            Mixed Link 1
+          </NavItem>
+          <NavItemSeparator />
+          <NavItem
+            preventDefault
+            id="mixed-3"
+            to="#mixed-3"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-2"
+            isActive={activeItem === 'nav-mixed-group-1_item-2'}
+          >
+            Mixed Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-4"
+            to="#mixed-4"
+            groupId="nav-mixed-group-1"
+            itemId="nav-mixed-group-1_item-3"
+            isActive={activeItem === 'nav-mixed-group-1_item-3'}
+          >
+            Mixed Link 3
+          </NavItem>
+        </NavExpandable>
+        <NavExpandable
+          title="Expandable section title 2"
+          groupId="nav-mixed-group-2"
+          isActive={activeGroup === 'nav-mixed-group-2'}
+        >
+          <NavItem
+            preventDefault
+            id="mixed-5"
+            to="#mixed-5"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-1"
+            isActive={activeItem === 'nav-mixed-group-2_item-1'}
+          >
+            Mixed 2 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-6"
+            to="#mixed-6"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-2"
+            isActive={activeItem === 'nav-mixed-group-2_item-2'}
+          >
+            Mixed 2 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="mixed-7"
+            to="#mixed-7"
+            groupId="nav-mixed-group-2"
+            itemId="nav-mixed-group-2_item-3"
+            isActive={activeItem === 'nav-mixed-group-2_item-3'}
+          >
+            Mixed 2 Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};