diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 3bd3de7475f..74b6e3fdc3d 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -16,1718 +16,55 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
### Default nav
-```js isFullscreen
-import React from 'react';
-import {
- Card,
- CardBody,
- Gallery,
- GalleryItem,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class PageLayoutDefaultNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 0
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- }
-
- render() {
- const { activeItem } = this.state;
-
- const PageNav = (
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-default-nav';
- const PageSkipToContent = Skip to content;
-
- return (
-
- }
- sidebar={Sidebar}
- isManagedSidebar
- skipToContent={PageSkipToContent}
- breadcrumb={DashboardBreadcrumb}
- mainContainerId={pageId}
- >
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavDefault.tsx' isFullscreen
```
### Grouped nav
-```js isFullscreen
-import React from 'react';
-import {
- Nav,
- NavGroup,
- NavItem,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class PageLayoutGroupsNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 'grp-1_itm-1'
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- }
-
- render() {
- const { activeItem } = this.state;
-
- const PageNav = (
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-group-nav';
- const PageSkipToContent = Skip to Content;
-
- return (
-
- }
- sidebar={Sidebar}
- isManagedSidebar
- skipToContent={PageSkipToContent}
- mainContainerId={pageId}
- >
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
- Light
- Dark
- Darker
- Content
-
-
- );
- }
-}
+```js file='./examples/Nav/NavGrouped.tsx' isFullscreen
```
### Expandable nav
-```js isFullscreen
-import React from 'react';
-import {
- Card,
- CardBody,
- Gallery,
- GalleryItem,
- Nav,
- NavExpandable,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class PageLayoutExpandableNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeGroup: 'grp-1',
- activeItem: 'grp-1_itm-1'
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId,
- activeGroup: result.groupId
- });
- };
- }
-
- render() {
- const { activeItem, activeGroup } = this.state;
-
- const PageNav = (
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-expandable-nav';
- const PageSkipToContent = Skip to content;
-
- return (
-
- }
- sidebar={Sidebar}
- isManagedSidebar
- skipToContent={PageSkipToContent}
- breadcrumb={DashboardBreadcrumb}
- mainContainerId={pageId}
- >
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavExpandable.tsx' isFullscreen
```
### Horizontal nav
-```js isFullscreen
-import React from 'react';
-import {
- Avatar,
- Brand,
- Button,
- ButtonVariant,
- Card,
- CardBody,
- Dropdown,
- DropdownItem,
- DropdownList,
- Gallery,
- GalleryItem,
- Masthead,
- MastheadMain,
- MastheadBrand,
- MastheadContent,
- MenuToggle,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- SkipToContent,
- TextContent,
- Text,
- Toolbar,
- ToolbarContent,
- ToolbarGroup,
- ToolbarItem
-} from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class PageLayoutHorizontalNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isDropdownOpen: false,
- isKebabDropdownOpen: false,
- isFullKebabDropdownOpen: false,
- activeItem: 0
- };
-
- this.onDropdownToggle = () => {
- this.setState((prevState) => ({
- isDropdownOpen: !prevState.isDropdownOpen
- }));
- };
-
- this.onDropdownSelect = () => {
- this.setState({
- isDropdownOpen: false
- });
- };
-
- this.onKebabDropdownToggle = () => {
- this.setState((prevState) => ({
- isKebabDropdownOpen: !prevState.isKebabDropdownOpen
- }));
- };
-
- this.onKebabDropdownSelect = () => {
- this.setState({
- isKebabDropdownOpen: false
- });
- };
-
- this.onFullKebabToggle = () => {
- this.setState((prevState) => ({
- isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
- }));
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- }
-
- render() {
- const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem } = this.state;
-
- const PageNav = (
-
- );
- const kebabDropdownItems = (
- <>
-
- Settings
-
-
- Help
-
-
- );
- const userDropdownItems = (
- <>
- My profile
- User management
- Logout
-
- );
-
- const headerToolbar = (
-
-
- {PageNav}
-
-
- } onClick={() => {}} />
-
-
-
- } />
-
-
- } />
-
-
-
- this.setState({ isKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
- {kebabDropdownItems}
-
-
-
- this.setState({ isFullKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
-
- {userDropdownItems}
-
-
- {kebabDropdownItems}
-
-
-
-
- this.setState({ isDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
- }
- isFullHeight
- >
- Ned Username
-
- )}
- >
- {userDropdownItems}
-
-
-
-
- );
- const Header = (
-
-
-
-
-
-
- {headerToolbar}
-
- );
-
- const pageId = 'main-content-page-layout-horizontal-nav';
- const PageSkipToContent = Skip to content;
-
- return (
-
-
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavHorizontal.tsx' isFullscreen
```
### Horizontal subnav
-```js isFullscreen
-import React from 'react';
-import {
- Card,
- CardBody,
- Gallery,
- GalleryItem,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class VerticalNavWithSubnav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 0,
- activeSubNavItem: 7
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
-
- this.onSubNavSelect = (_event, result) => {
- this.setState({
- activeSubNavItem: result.itemId
- });
- };
- }
-
- render() {
- const { activeItem, activeSubNavItem } = this.state;
-
- const PageNav = (
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-default-nav';
- const PageSkipToContent = Skip to content;
-
- const SubNav = (
-
- );
-
- return (
-
- }
- sidebar={Sidebar}
- isManagedSidebar
- skipToContent={PageSkipToContent}
- mainContainerId={pageId}
- >
-
- {SubNav}
-
-
- {DashboardBreadcrumb}
-
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of it’s relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavWithSubnav.tsx' isFullscreen
```
### Horizontal nav with horizontal subnav
-```js isFullscreen
-import React from 'react';
-import {
- Avatar,
- Brand,
- Button,
- ButtonVariant,
- Card,
- CardBody,
- Dropdown,
- DropdownItem,
- DropdownList,
- Gallery,
- GalleryItem,
- MenuToggle,
- Masthead,
- MastheadMain,
- MastheadBrand,
- MastheadContent,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSectionTypes,
- SkipToContent,
- TextContent,
- Text,
- Toolbar,
- ToolbarContent,
- ToolbarGroup,
- ToolbarItem
-} from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-
-class HorizontalNavWithSubnav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isDropdownOpen: false,
- isKebabDropdownOpen: false,
- isFullKebabDropdownOpen: false,
- activeItem: 0,
- activeSubNavItem: 7
- };
-
- this.onDropdownToggle = () => {
- this.setState((prevState) => ({
- isDropdownOpen: !prevState.isDropdownOpen
- }));
- };
-
- this.onDropdownSelect = () => {
- this.setState({
- isDropdownOpen: false
- });
- };
-
- this.onKebabDropdownToggle = () => {
- this.setState((prevState) => ({
- isKebabDropdownOpen: !prevState.isKebabDropdownOpen
- }));
- };
-
- this.onKebabDropdownSelect = () => {
- this.setState({
- isKebabDropdownOpen: false
- });
- };
-
- this.onFullKebabToggle = () => {
- this.setState((prevState) => ({
- isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
- }));
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
-
- this.onSubNavSelect = (_event, result) => {
- this.setState({
- activeSubNavItem: result.itemId
- });
- };
- }
-
- render() {
- const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem, activeSubNavItem } = this.state;
-
- const PageNav = (
-
- );
- const kebabDropdownItems = (
- <>
-
- Settings
-
-
- Help
-
-
- );
- const userDropdownItems = (
- <>
- My profile
- User management
- Logout
-
- );
-
- const SubNav = (
-
- );
-
- const headerToolbar = (
-
-
- {PageNav}
-
-
- } onClick={() => {}} />
-
-
-
- } />
-
-
- } />
-
-
-
- this.setState({ isKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
- {kebabDropdownItems}
-
-
-
- this.setState({ isFullKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
-
- {userDropdownItems}
-
-
- {kebabDropdownItems}
-
-
-
-
- this.setState({ isDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
- }
- isFullHeight
- >
- Ned Username
-
- )}
- >
- {userDropdownItems}
-
-
-
-
- );
- const Header = (
-
-
-
-
-
-
-
-
-
-
-
- {headerToolbar}
-
- );
-
- const pageId = 'main-content-page-layout-horizontal-nav';
- const PageSkipToContent = Skip to content;
-
- return (
-
-
-
- {SubNav}
-
-
- {DashboardBreadcrumb}
-
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of it’s relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavHorizontalWithSubnav.tsx' isFullscreen
```
### Tertiary nav (deprecated)
-```js isFullscreen
-import React from 'react';
-import {
- Card,
- CardBody,
- Gallery,
- GalleryItem,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class PageLayoutTertiaryNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 0
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- }
-
- render() {
- const { activeItem } = this.state;
-
- const PageNav = (
-
- );
-
- const pageId = 'main-content-page-layout-tertiary-nav';
- const PageSkipToContent = Skip to content;
-
- return (
-
- }
- breadcrumb={DashboardBreadcrumb}
- tertiaryNav={PageNav}
- isManagedSidebar
- isTertiaryNavWidthLimited
- skipToContent={PageSkipToContent}
- mainContainerId={pageId}
- >
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/deprecated/NavTertiary.tsx' isFullscreen
```
### Light nav (deprecated)
-```js isFullscreen
-import React from 'react';
-import {
- Card,
- CardBody,
- Gallery,
- GalleryItem,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text
-} from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class PageLayoutLightNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeItem: 0
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- }
-
- render() {
- const { activeItem } = this.state;
-
- const PageNav = (
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-simple-nav';
- const PageSkipToContent = Skip to Content;
-
- return (
-
- }
- sidebar={Sidebar}
- isManagedSidebar
- skipToContent={PageSkipToContent}
- mainContainerId={pageId}
- >
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/deprecated/NavLight.tsx' isFullscreen
```
### Manual nav
-```js isFullscreen
-import React from 'react';
-import {
- Avatar,
- Brand,
- Button,
- ButtonVariant,
- Card,
- CardBody,
- Dropdown,
- DropdownItem,
- DropdownList,
- Gallery,
- GalleryItem,
- Masthead,
- MastheadMain,
- MastheadBrand,
- MastheadContent,
- MenuToggle,
- Nav,
- NavItem,
- NavList,
- Page,
- PageSection,
- PageSectionVariants,
- PageSidebar,
- PageSidebarBody,
- SkipToContent,
- TextContent,
- Text,
- Toolbar,
- ToolbarContent,
- ToolbarGroup,
- ToolbarItem
-} from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-
-class PageLayoutManualNav extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isDropdownOpen: false,
- isKebabDropdownOpen: false,
- isFullKebabDropdownOpen: false,
- activeItem: 0,
- isMobileView: false,
- isNavOpenDesktop: true,
- isNavOpenMobile: false
- };
-
- this.onDropdownToggle = () => {
- this.setState((prevState) => ({
- isDropdownOpen: !prevState.isDropdownOpen
- }));
- };
-
- this.onDropdownSelect = () => {
- this.setState({
- isDropdownOpen: false
- });
- };
-
- this.onKebabDropdownToggle = () => {
- this.setState((prevState) => ({
- isKebabDropdownOpen: !prevState.isKebabDropdownOpen
- }));
- };
-
- this.onKebabDropdownSelect = () => {
- this.setState({
- isKebabDropdownOpen: false
- });
- };
-
- this.onFullKebabToggle = () => {
- this.setState((prevState) => ({
- isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
- }));
- };
-
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
-
- this.onNavToggleDesktop = () => {
- this.setState({
- isNavOpenDesktop: !this.state.isNavOpenDesktop
- });
- };
-
- this.onNavToggleMobile = () => {
- this.setState({
- isNavOpenMobile: !this.state.isNavOpenMobile
- });
- };
-
- this.onPageResize = (_event, { mobileView, windowSize }) => {
- this.setState({
- isMobileView: mobileView
- });
- };
- }
-
- render() {
- const {
- isDropdownOpen,
- isKebabDropdownOpen,
- isFullKebabDropdownOpen,
- activeItem,
- isNavOpenDesktop,
- isNavOpenMobile,
- isMobileView
- } = this.state;
-
- const PageNav = (
-
- );
- const kebabDropdownItems = (
- <>
-
- Settings
-
-
- Help
-
-
- );
- const userDropdownItems = (
- <>
- My profile
- User management
- Logout
-
- );
-
- const headerToolbar = (
-
-
-
-
- } onClick={() => {}} />
-
-
-
- } />
-
-
- } />
-
-
-
- this.setState({ isKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
- {kebabDropdownItems}
-
-
-
- this.setState({ isFullKebabDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
-
-
-
- )}
- >
-
- {userDropdownItems}
-
-
- {kebabDropdownItems}
-
-
-
-
- this.setState({ isDropdownOpen: isOpen })}
- popperProps={{ position: 'right' }}
- toggle={(toggleRef) => (
- }
- isFullHeight
- >
- Ned Username
-
- )}
- >
- {userDropdownItems}
-
-
-
-
- );
- const Header = (
-
-
-
-
-
-
-
-
-
-
-
- {headerToolbar}
-
- );
-
- const Sidebar = (
-
- {PageNav}
-
- );
- const pageId = 'main-content-page-layout-manual-nav';
- const PageSkipToContent = Skip to Content;
-
- return (
-
-
-
-
- Main title
-
- Body text should be Overpass Regular at 16px. It should have leading of 24px because
- of its relative line height of 1.5.
-
-
-
-
-
- {Array.apply(0, Array(10)).map((x, i) => (
-
-
- This is a card
-
-
- ))}
-
-
-
-
- );
- }
-}
+```js file='./examples/Nav/NavManual.tsx' isFullscreen
```
### Flyout nav
-```js isFullscreen
-import React from 'react';
-import {
- Page,
- Nav,
- NavList,
- NavItem,
- PageSidebar,
- PageSidebarBody,
- PageSection,
- PageSectionVariants,
- Menu,
- MenuContent,
- MenuList,
- MenuItem
-} from '@patternfly/react-core';
-import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
-
-class VerticalPage extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- isNavOpen: true,
- activeItem: 0
- };
- this.onNavSelect = (_event, result) => {
- this.setState({
- activeItem: result.itemId
- });
- };
- this.onMenuSelect = (event, itemId) => {
- this.setState({
- activeItem: itemId
- });
- };
- }
-
- render() {
- const numFlyouts = 5;
- const FlyoutMenu = ({ depth, children }) => (
-
- );
- let curFlyout = ;
- for (let i = 2; i < numFlyouts - 1; i++) {
- curFlyout = {curFlyout};
- }
-
- const { activeItem } = this.state;
-
- const Sidebar = (
-
-
-
-
-
- );
-
- return (
- } sidebar={Sidebar} isManagedSidebar>
- Section with darker background
- Section with dark background
- Section with light background
-
- );
- }
-}
+```js file='./examples/Nav/NavFlyout.tsx' isFullscreen
```
### Drilldown nav
```js isBeta isFullscreen file="./examples/Nav/NavDrilldown.tsx"
-
```
diff --git a/packages/react-core/src/demos/examples/Nav/NavDefault.tsx b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
new file mode 100644
index 00000000000..e6ed9631325
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavDefault.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Gallery,
+ GalleryItem,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavDefault: React.FunctionComponent = () => {
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const PageNav = (
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-default-nav';
+ const PageSkipToContent = Skip to content;
+
+ return (
+ <>
+ }
+ sidebar={Sidebar}
+ isManagedSidebar
+ skipToContent={PageSkipToContent}
+ breadcrumb={DashboardBreadcrumb}
+ mainContainerId={pageId}
+ >
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
index cb85d65e2e4..de84140dfc6 100644
--- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx
@@ -13,6 +13,7 @@ import {
PageSection
} from '@patternfly/react-core';
import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
interface MenuHeights {
[menuId: string]: number;
}
@@ -26,6 +27,7 @@ function getNavLayer(menuId: string): number {
case 'subMenu-2':
return 3;
}
+ return 1;
}
const subMenuTwo: JSX.Element = (
diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
new file mode 100644
index 00000000000..93ac5f83eba
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Gallery,
+ GalleryItem,
+ Nav,
+ NavExpandable,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavExpandableDemo: React.FunctionComponent = () => {
+ const [activeGroup, setActiveGroup] = React.useState('grp-1');
+ const [activeItem, setActiveItem] = React.useState('grp-1_itm-1');
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => {
+ setActiveItem(selectedItem.itemId);
+ setActiveGroup(selectedItem.groupId);
+ };
+
+ const PageNav = (
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-expandable-nav';
+ const PageSkipToContent = Skip to content;
+
+ return (
+
+ }
+ sidebar={Sidebar}
+ isManagedSidebar
+ skipToContent={PageSkipToContent}
+ breadcrumb={DashboardBreadcrumb}
+ mainContainerId={pageId}
+ >
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
new file mode 100644
index 00000000000..ba2e6a5a78a
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -0,0 +1,278 @@
+import React from 'react';
+import {
+ Avatar,
+ Brand,
+ Button,
+ ButtonVariant,
+ Divider,
+ Dropdown,
+ DropdownGroup,
+ DropdownItem,
+ DropdownList,
+ Masthead,
+ MastheadBrand,
+ MastheadContent,
+ MastheadMain,
+ MastheadToggle,
+ Menu,
+ MenuContent,
+ MenuItem,
+ MenuList,
+ MenuToggle,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ PageToggleButton,
+ SkipToContent,
+ Toolbar,
+ ToolbarContent,
+ ToolbarGroup,
+ ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+export const NavFlyout: React.FunctionComponent = () => {
+ const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+ const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+ const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+ const [isMobileView, setIsMobileView] = React.useState(false);
+ const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
+ const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);
+ const onDropdownSelect = () => setIsDropdownOpen(false);
+ const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);
+ const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
+ const onFullKebabToggle = () => setIsFullKebabDropdownOpen((prevState) => !prevState);
+ const onFullKebabSelect = () => setIsFullKebabDropdownOpen(false);
+ const onSidebarToggleDesktop = () => setIsSidebarOpenDesktop((prevState) => !prevState);
+ const onSidebarToggleMobile = () => setIsSidebarOpenMobile((prevState) => !prevState);
+
+ interface PageOptions {
+ mobileView: boolean;
+ windowSize: number;
+ }
+
+ const onPageResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, { mobileView }: PageOptions) =>
+ setIsMobileView(mobileView);
+
+ const onMenuSelect = (_event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
+ itemId && setActiveItem(itemId);
+ };
+
+ const numFlyouts = 5;
+ const FlyoutMenu = ({ depth, children }) => (
+
+ );
+ let curFlyout = {};
+ for (let i = 2; i < numFlyouts - 1; i++) {
+ curFlyout = {curFlyout};
+ }
+
+ const kebabDropdownItems = (
+ <>
+
+ Settings
+
+
+ Help
+
+
+ );
+ const userDropdownItems = (
+ <>
+ My profile
+ User management
+ Logout
+
+ );
+
+ const headerToolbar = (
+
+
+
+
+ } onClick={() => {}} />
+
+
+
+ } />
+
+
+ } />
+
+
+
+ (
+
+
+
+ )}
+ >
+ {kebabDropdownItems}
+
+
+
+ (
+
+
+
+ )}
+ >
+
+ {userDropdownItems}
+
+
+ {kebabDropdownItems}
+
+
+
+
+ (
+ }
+ isFullHeight
+ >
+ Ned Username
+
+ )}
+ >
+ {userDropdownItems}
+
+
+
+
+ );
+
+ const Header = (
+
+
+
+
+
+
+
+
+
+
+
+ {headerToolbar}
+
+ );
+
+ const isSidebarOpen = isMobileView ? isSidebarOpenMobile : isSidebarOpenDesktop;
+
+ const Sidebar = (
+
+
+
+
+
+ );
+
+ const pageId = 'main-content-page-layout-flyout-nav';
+ const PageSkipToContent = Skip to Content;
+
+ return (
+
+ Section with darker background
+ Section with dark background
+ Section with light background
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
new file mode 100644
index 00000000000..9a480ed8cc3
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+ Nav,
+ NavGroup,
+ NavItem,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavGrouped: React.FunctionComponent = () => {
+ const [activeItem, setActiveItem] = React.useState('grp-1_itm-1');
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const PageNav = (
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-group-nav';
+ const PageSkipToContent = Skip to Content;
+
+ return (
+ <>
+ }
+ sidebar={Sidebar}
+ isManagedSidebar
+ skipToContent={PageSkipToContent}
+ mainContainerId={pageId}
+ >
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+ Light
+ Dark
+ Darker
+ Content
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
new file mode 100644
index 00000000000..7c9c41c4662
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -0,0 +1,237 @@
+import React from 'react';
+import {
+ Avatar,
+ Brand,
+ Button,
+ ButtonVariant,
+ Card,
+ CardBody,
+ Divider,
+ Dropdown,
+ DropdownGroup,
+ DropdownItem,
+ DropdownList,
+ Gallery,
+ GalleryItem,
+ Masthead,
+ MastheadMain,
+ MastheadBrand,
+ MastheadContent,
+ MenuToggle,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ SkipToContent,
+ TextContent,
+ Text,
+ Toolbar,
+ ToolbarContent,
+ ToolbarGroup,
+ ToolbarItem
+} from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const NavHorizontal: React.FunctionComponent = () => {
+ const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+ const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+ const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);
+ const onDropdownSelect = () => setIsDropdownOpen(false);
+ const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);
+ const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
+ const onFullKebabToggle = () => setIsFullKebabDropdownOpen((prevState) => !prevState);
+ const onFullKebabSelect = () => setIsFullKebabDropdownOpen(false);
+
+ const PageNav = (
+
+ );
+ const kebabDropdownItems = (
+ <>
+
+ Settings
+
+
+ Help
+
+
+ );
+ const userDropdownItems = (
+ <>
+ My profile
+ User management
+ Logout
+
+ );
+
+ const headerToolbar = (
+
+
+ {PageNav}
+
+
+ } onClick={() => {}} />
+
+
+
+ } />
+
+
+ } />
+
+
+
+ (
+
+
+
+ )}
+ >
+ {kebabDropdownItems}
+
+
+
+ (
+
+
+
+ )}
+ >
+
+ {userDropdownItems}
+
+
+ {kebabDropdownItems}
+
+
+
+
+ (
+ }
+ isFullHeight
+ >
+ Ned Username
+
+ )}
+ >
+ {userDropdownItems}
+
+
+
+
+ );
+ const Header = (
+
+
+
+
+
+
+ {headerToolbar}
+
+ );
+
+ const pageId = 'main-content-page-layout-horizontal-nav';
+ const PageSkipToContent = Skip to content;
+
+ return (
+
+
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
new file mode 100644
index 00000000000..63465716fd9
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -0,0 +1,297 @@
+import React from 'react';
+import {
+ Avatar,
+ Brand,
+ Button,
+ ButtonVariant,
+ Card,
+ CardBody,
+ Divider,
+ Dropdown,
+ DropdownGroup,
+ DropdownItem,
+ DropdownList,
+ Gallery,
+ GalleryItem,
+ MenuToggle,
+ Masthead,
+ MastheadBrand,
+ MastheadContent,
+ MastheadMain,
+ MastheadToggle,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSectionTypes,
+ PageToggleButton,
+ SkipToContent,
+ TextContent,
+ Text,
+ Toolbar,
+ ToolbarContent,
+ ToolbarGroup,
+ ToolbarItem
+} from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
+ const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+ const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+ const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+ const [activeItem, setActiveItem] = React.useState(0);
+ const [activeSubNavItem, setActiveSubNavItem] = React.useState(7);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const onSubNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveSubNavItem(selectedItem.itemId);
+
+ const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);
+ const onDropdownSelect = () => setIsDropdownOpen(false);
+ const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);
+ const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
+ const onFullKebabToggle = () => setIsFullKebabDropdownOpen((prevState) => !prevState);
+ const onFullKebabSelect = () => setIsFullKebabDropdownOpen(false);
+
+ const PageNav = (
+
+ );
+ const kebabDropdownItems = (
+ <>
+
+ Settings
+
+
+ Help
+
+
+ );
+ const userDropdownItems = (
+ <>
+ My profile
+ User management
+ Logout
+
+ );
+
+ const SubNav = (
+
+ );
+
+ const headerToolbar = (
+
+
+ {PageNav}
+
+
+ } onClick={() => {}} />
+
+
+
+ } />
+
+
+ } />
+
+
+
+ (
+
+
+
+ )}
+ >
+ {kebabDropdownItems}
+
+
+
+ (
+
+
+
+ )}
+ >
+
+ {userDropdownItems}
+
+
+ {kebabDropdownItems}
+
+
+
+
+ (
+ }
+ isFullHeight
+ >
+ Ned Username
+
+ )}
+ >
+ {userDropdownItems}
+
+
+
+
+ );
+ const Header = (
+
+
+
+
+
+
+
+
+
+
+
+ {headerToolbar}
+
+ );
+
+ const pageId = 'main-content-page-layout-horizontal-nav';
+ const PageSkipToContent = Skip to content;
+
+ return (
+
+
+
+ {SubNav}
+
+
+ {DashboardBreadcrumb}
+
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of it’s relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
new file mode 100644
index 00000000000..6824ed0d2ec
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -0,0 +1,273 @@
+import React from 'react';
+import {
+ Avatar,
+ Brand,
+ Button,
+ ButtonVariant,
+ Card,
+ CardBody,
+ Divider,
+ Dropdown,
+ DropdownGroup,
+ DropdownItem,
+ DropdownList,
+ Gallery,
+ GalleryItem,
+ Masthead,
+ MastheadBrand,
+ MastheadContent,
+ MastheadMain,
+ MastheadToggle,
+ MenuToggle,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ PageToggleButton,
+ SkipToContent,
+ TextContent,
+ Text,
+ Toolbar,
+ ToolbarContent,
+ ToolbarGroup,
+ ToolbarItem
+} from '@patternfly/react-core';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+export const NavManual: React.FunctionComponent = () => {
+ const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+ const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+ const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+ const [isMobileView, setIsMobileView] = React.useState(false);
+ const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
+ const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const onDropdownToggle = () => setIsDropdownOpen((prevState) => !prevState);
+ const onDropdownSelect = () => setIsDropdownOpen(false);
+ const onKebabDropdownToggle = () => setIsKebabDropdownOpen((prevState) => !prevState);
+ const onKebabDropdownSelect = () => setIsKebabDropdownOpen(false);
+ const onFullKebabToggle = () => setIsFullKebabDropdownOpen((prevState) => !prevState);
+ const onFullKebabSelect = () => setIsFullKebabDropdownOpen(false);
+ const onSidebarToggleDesktop = () => setIsSidebarOpenDesktop((prevState) => !prevState);
+ const onSidebarToggleMobile = () => setIsSidebarOpenMobile((prevState) => !prevState);
+
+ interface PageOptions {
+ mobileView: boolean;
+ windowSize: number;
+ }
+
+ const onPageResize = (_event: MouseEvent | TouchEvent | React.KeyboardEvent, { mobileView }: PageOptions) =>
+ setIsMobileView(mobileView);
+
+ const PageNav = (
+
+ );
+ const kebabDropdownItems = (
+ <>
+
+ Settings
+
+
+ Help
+
+
+ );
+ const userDropdownItems = (
+ <>
+ My profile
+ User management
+ Logout
+
+ );
+
+ const headerToolbar = (
+
+
+
+
+ } onClick={() => {}} />
+
+
+
+ } />
+
+
+ } />
+
+
+
+ (
+
+
+
+ )}
+ >
+ {kebabDropdownItems}
+
+
+
+ (
+
+
+
+ )}
+ >
+
+ {userDropdownItems}
+
+
+ {kebabDropdownItems}
+
+
+
+
+ (
+ }
+ isFullHeight
+ >
+ Ned Username
+
+ )}
+ >
+ {userDropdownItems}
+
+
+
+
+ );
+ const Header = (
+
+
+
+
+
+
+
+
+
+
+
+ {headerToolbar}
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-manual-nav';
+ const PageSkipToContent = Skip to Content;
+
+ return (
+
+
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
new file mode 100644
index 00000000000..ac0624f4394
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Gallery,
+ GalleryItem,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionTypes,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavWithSubnav: React.FunctionComponent = () => {
+ const [activeItem, setActiveItem] = React.useState(0);
+ const [activeSubNavItem, setActiveSubNavItem] = React.useState(7);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const onSubNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveSubNavItem(selectedItem.itemId);
+
+ const PageNav = (
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-default-nav';
+ const PageSkipToContent = Skip to content;
+
+ const SubNav = (
+
+ );
+
+ return (
+
+ }
+ sidebar={Sidebar}
+ isManagedSidebar
+ skipToContent={PageSkipToContent}
+ mainContainerId={pageId}
+ >
+
+ {SubNav}
+
+
+ {DashboardBreadcrumb}
+
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of it’s relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
new file mode 100644
index 00000000000..2ccaf374bc2
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/deprecated/NavLight.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Gallery,
+ GalleryItem,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ PageSidebar,
+ PageSidebarBody,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavLight: React.FunctionComponent = () => {
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const PageNav = (
+
+ );
+
+ const Sidebar = (
+
+ {PageNav}
+
+ );
+ const pageId = 'main-content-page-layout-simple-nav';
+ const PageSkipToContent = Skip to Content;
+
+ return (
+
+ }
+ sidebar={Sidebar}
+ isManagedSidebar
+ skipToContent={PageSkipToContent}
+ mainContainerId={pageId}
+ >
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx b/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
new file mode 100644
index 00000000000..8ec5467f62d
--- /dev/null
+++ b/packages/react-core/src/demos/examples/Nav/deprecated/NavTertiary.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ Gallery,
+ GalleryItem,
+ Nav,
+ NavItem,
+ NavList,
+ Page,
+ PageSection,
+ PageSectionVariants,
+ SkipToContent,
+ TextContent,
+ Text
+} from '@patternfly/react-core';
+import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
+import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader';
+
+export const NavTertiary: React.FunctionComponent = () => {
+ const [activeItem, setActiveItem] = React.useState(0);
+
+ const onNavSelect = (
+ _event: React.FormEvent,
+ selectedItem: {
+ groupId: number | string;
+ itemId: number | string;
+ to: string;
+ }
+ ) => setActiveItem(selectedItem.itemId);
+
+ const PageNav = (
+
+ );
+
+ const pageId = 'main-content-page-layout-tertiary-nav';
+ const PageSkipToContent = Skip to content;
+
+ return (
+
+ }
+ breadcrumb={DashboardBreadcrumb}
+ tertiaryNav={PageNav}
+ isManagedSidebar
+ isTertiaryNavWidthLimited
+ skipToContent={PageSkipToContent}
+ mainContainerId={pageId}
+ >
+
+
+ Main title
+
+ Body text should be Overpass Regular at 16px. It should have leading of 24px because
+ of its relative line height of 1.5.
+
+
+
+
+
+ {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+
+
+ This is a card
+
+
+ ))}
+
+
+
+
+ );
+};