package.src.components.Breadcrumb.BreadcrumbItem.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of react-core Show documentation

This library provides a set of common React components for use with the PatternFly reference implementation.

The newest version!

import * as React from 'react';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
import { css } from '@patternfly/react-styles';

export interface BreadcrumbItemRenderArgs {
  className: string;
  ariaCurrent: 'page' | undefined;
}

export interface BreadcrumbItemProps extends React.HTMLProps {
  /** Content rendered inside the breadcrumb item. */
  children?: React.ReactNode;
  /** Additional classes added to the breadcrumb item. */
  className?: string;
  /** HREF for breadcrumb link. */
  to?: string;
  /** Flag indicating whether the item is active. */
  isActive?: boolean;
  /** Flag indicating whether the item contains a dropdown. */
  isDropdown?: boolean;
  /** Internal prop set by Breadcrumb on all but the first crumb */
  showDivider?: boolean;
  /** Target for breadcrumb link. */
  target?: string;
  /** Sets the base component to render. Defaults to  */
  component?: React.ElementType;
  /** A render function to render the component inside the breadcrumb item. */
  render?: (props: BreadcrumbItemRenderArgs) => React.ReactNode;
}

export const BreadcrumbItem: React.FunctionComponent = ({
  children = null,
  className: classNameProp = '',
  to = undefined,
  isActive = false,
  isDropdown = false,
  showDivider,
  target = undefined,
  component = 'a',
  render = undefined,
  ...props
}: BreadcrumbItemProps) => {
  const Component = component;
  const ariaCurrent = isActive ? 'page' : undefined;
  const className = css(styles.breadcrumbLink, isActive && styles.modifiers.current);
  return (
    
      {showDivider && (
        
          
        
      )}
      {component === 'button' && (
        
      )}
      {isDropdown && {children}}
      {render && render({ className, ariaCurrent })}
      {to && !render && (
        
          {children}
        
      )}
      {!to && component !== 'button' && !isDropdown && children}
    
  );
};
BreadcrumbItem.displayName = 'BreadcrumbItem';

Related Artifacts