Skip to content

Latest commit

 

History

History
58 lines (52 loc) · 1.69 KB

Breadcrumb.md

File metadata and controls

58 lines (52 loc) · 1.69 KB
Raw
title cssPrefix typescript
Breadcrumb
pf-c-breadcrumb
true

import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

Simple breadcrumb

import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

SimpleBreadcrumbs = () => (
  <Breadcrumb>
    <BreadcrumbItem to="#">Section Home</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#" isActive>
      Section Landing
    </BreadcrumbItem>
  </Breadcrumb>
);

Breadcrumb without home link

import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

WithoutLinkBreadcrumbs = () => (
  <Breadcrumb>
    <BreadcrumbItem>Section Home</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#" isActive>
      Section Landing
    </BreadcrumbItem>
  </Breadcrumb>
);

Breadcrumb with heading

import React from 'react';
import { Breadcrumb, BreadcrumbItem, BreadcrumbHeading } from '@patternfly/react-core';

HeadingBreadcrumbs = () => (
  <Breadcrumb>
    <BreadcrumbItem to="#">Section Home</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
    <BreadcrumbHeading to="#">Section Title</BreadcrumbHeading>
  </Breadcrumb>
);