How to use terra-navigation-layout - 10 common examples

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';

import MenuList from './common/menu/MenuList';

const propTypes = {
  navigation: PropTypes.object,
  routingStackDelegate: RoutingStackDelegate.propType,
};

const ApplicationMenu = ({ navigation, routingStackDelegate }) => (
   ({
      id: item.path,
      path: item.path,
      text: item.text,
    }))}
  />
);

ApplicationMenu.propTypes = propTypes;

/**
   * The element to be placed within the fit top area for extensions within the layout.
   */
  extensions: PropTypes.element,
  /**
   * The Object of layout-related APIs provided to the components of the Layout.
   */
  layoutConfig: ApplicationLayoutPropTypes.layoutConfigPropType.isRequired,
  /**
   * Configuration values for the ApplicationName component.
   */
  nameConfig: ApplicationLayoutPropTypes.nameConfigPropType,
  /**
   * Delegate prop that is provided by the NavigationLayout.
   */
  routingStackDelegate: RoutingStackDelegate.propType.isRequired,
  /**
   * Configuration to be provided to the ApplicationUtility component.
   */
  utilityConfig: ApplicationLayoutPropTypes.utilityConfigPropType,
  /**
   * DisclosureManagerDelegate instance automatically provided by a DisclosureManagerProvider.
   */
  disclosureManager: disclosureManagerShape,
};

class ApplicationMenu extends React.Component {
  constructor(props) {
    super(props);

    this.renderHeader = this.renderHeader.bind(this);
    this.renderExtensions = this.renderExtensions.bind(this);

import ApplicationMenu from './_ApplicationMenu';
import ApplicationLayoutPropTypes from '../utils/propTypes';

const propTypes = {
  /**
   * Array of navigation Objects to be rendered as tabs within the Application Header.
   */
  navigationItems: ApplicationLayoutPropTypes.navigationItemsPropType,
  /**
   * The Object of layout-related APIs provided to the components of the Layout. This prop is provided by the Layout.
   */
  layoutConfig: ApplicationLayoutPropTypes.layoutConfigPropType.isRequired,
  /**
   * The Object containing RoutingStack APIs provided to children of the RoutingStack. This prop is provided by the RoutingStack.
   */
  routingStackDelegate: RoutingStackDelegate.propType.isRequired,
  /**
   * The Object containing props from the configuration necessary for ApplicationMenu creation.
   */
  applicationMenuWrapperProps: PropTypes.shape({
    /**
     * The Component class that will be rendered as content within the ApplicationMenu.
     */
    contentComponentClass: PropTypes.func.isRequired,
    /**
     * The configuration for ApplicationName component.
     */
    nameConfig: ApplicationLayoutPropTypes.nameConfigPropType,
    /**
     * The configuration for ApplicationUtility component.
     */
    utilityConfig: ApplicationLayoutPropTypes.utilityConfigPropType,

import Button from 'terra-button';

import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';
import styles from './MenuToolbar.scss';

const cx = classNames.bind(styles);

const propTypes = {
  /**
   * The AppDelegate instance provided by the containing component. If present, its properties will propagate to the children components.
   */
  app: PropTypes.object,
  /**
   * The RoutingStateDelegate instance provided by the terra-navigation-layout.
   */
  routingStackDelegate: RoutingStackDelegate.propType,
  /**
   * The tab label provided by the navigation link text.
   */
  text: PropTypes.string,
};

const defaultProps = {
  app: undefined,
  routingStackDelegate: undefined,
  text: null,
};

const MenuToolbar = ({ app, routingStackDelegate, text, ...customProps }) => {
  const toolbarClassNames = cx([
    'menu-toolbar',
    { 'is-terminal': !routingStackDelegate.showParent },

const menuText = {
  pages: 'Components',
  tests: 'Tests',
};

const subMenuText = {
  pages: '',
  tests: 'Tests',
};

const propTypes = {
  /**
   * The RoutingStateDelegate instance provided by the terra-navigation-layout.
   */
  routingStackDelegate: RoutingStackDelegate.propType,
  /**
   * Generated by configureApp.jsx: The array of components that should be displays.
   */
  config: PropTypes.oneOfType([siteConfigPropType, componentConfigPropType]),
  /**
   * The path root to prepend to the component navigation.
   */
  pathRoot: PropTypes.string,
  /**
   * The component example type to generate components for.
   */
  exampleType: PropTypes.string,
  /**
   * Whether or not the menu is a subMenu.
   */
  isSubMenu: PropTypes.bool,

import { NavLink, withRouter } from 'react-router-dom';
import List from 'terra-list';
import ApplicationMenuLayout from 'terra-application-menu-layout';
import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';
import MenuToolbar from './MenuToolbar';

import styles from './MenuList.scss';

const cx = classNames.bind(styles);


const propTypes = {
  /**
   * The RoutingStateDelegate instance provided by the terra-navigation-layout.
   */
  routingStackDelegate: RoutingStackDelegate.propType,
  /**
   * Injected by react-routed: represent where the app is now, where you want it to go,
   * or even where it was.
   * */
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired,
  }),
  /**
   * The list of link configuration to build react-router NavLinks provided by the containing component.
   */
  links: PropTypes.arrayOf(PropTypes.shape({
    path: PropTypes.string,
    text: PropTypes.string,
    hasSubNav: PropTypes.bool,
  })),
  /**

* The array of routing shapes to be rendered as menu items within the RoutingMenu.
   */
  menuItems: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.isRequired,
    path: PropTypes.string.isRequired,
    hasSubMenu: PropTypes.bool,
  })),
  /**
   * The Object of layout-related APIs provided to the components of the Layout.
   */
  layoutConfig: ApplicationLayoutPropTypes.layoutConfigPropType.isRequired,
  /**
   * The Object containing RoutingStack APIs provided to children of the RoutingStack. This is
   * used to render a Back button upon presence of a `showParent` implementation.
   */
  routingStackDelegate: RoutingStackDelegate.propType.isRequired,
  /**
   * The location from the router context. This prop is provided by the `withRouter` HOC-generator.
   */
  location: PropTypes.shape({
    pathname: PropTypes.string,
  }).isRequired,
};

const routingMenuRootMenuKey = 'routingMenuRootMenuKey';

class RoutingMenu extends React.Component {
  /**
   * This function converts the given menuItems from the RoutingMenu API to the NavigationSideMenu API.
   * The path is used to uniquely identify the item within the NavigationSideMenu. The path and hasSubMenu
   * values are set as metaData on the item so that `handleMenuChange` will have easy access to those values.
   * @param {Array} menuItems is the Array of menuItem objects as specified by the RoutingMenu's proptype definition.

import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import 'terra-base/lib/baseStyles';

import IconLeft from 'terra-icon/lib/icon/IconLeft';
import IconHouse from 'terra-icon/lib/icon/IconHouse';
import Button from 'terra-button';

import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';
import styles from './MenuToolbar.scss';

const cx = classNames.bind(styles);

const propTypes = {
  app: PropTypes.object,
  routingStackDelegate: RoutingStackDelegate.propType,
  backButtonOverride: PropTypes.node,
  text: PropTypes.string,
};

const MenuToolbar = ({ app, routingStackDelegate, text, ...customProps }) => {
  const toolbarClassNames = cx([
    'menu-toolbar',
    { 'is-terminal': !routingStackDelegate.showParent },
    customProps.className,
  ]);

  let backButton;
  if (routingStackDelegate.showParent) {
    backButton = <button>} variant="link" style={{ color: 'black' }} /&gt;;
  }
</button>

import React from 'react';
import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';

import MenuList from '../common/menu/MenuList';
import { siteConfigPropType } from '../../componentConfig';

const propTypes = {
  routingStackDelegate: RoutingStackDelegate.propType,
  config: siteConfigPropType,
};

const ComponentsMenu = ({ routingStackDelegate, config }) => (
   {
      const example = config[componentKey].example;
      if (example) {
        return {
          id: example.path,
          path: example.path,
          text: example.description,
        };
      }

import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import ApplicationMenuLayout from 'terra-application-menu-layout';
import RoutingStackDelegate from 'terra-navigation-layout/lib/RoutingStackDelegate';
import MenuToolbar from './MenuToolbar';
import MenuLinkWrapper from './MenuLinkWrapper';

import './MenuList.scss';

const propTypes = {
  routingStackDelegate: RoutingStackDelegate.propType,
  links: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    path: PropTypes.string,
    text: PropTypes.string,
  })),
  headerText: PropTypes.string,
};

const MenuList = ({ routingStackDelegate, links, headerText }) => (
  }
    content={
      
        {links.map(link => (