coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CBreadcrumb,
4
  CBreadcrumbItem,
5
  CCard,
6
  CCardBody,
7
  CCardHeader,
8
  CCol,
9
  CRow,
10
  CLink,
11
} from '@coreui/react'
12
import { DocsExample } from 'src/components'
13

14
const Breadcrumbs = () => {
15
  return (
16
    <CRow>
17
      <CCol xs={12}>
18
        <CCard className="mb-4">
19
          <CCardHeader>
20
            <strong>React Breadcrumb</strong>
21
          </CCardHeader>
22
          <CCardBody>
23
            <p className="text-body-secondary small">
24
              The breadcrumb navigation provides links back to each previous page the user navigated
25
              through and shows the current location in a website or an application. You don’t have
26
              to add separators, because they automatically added in CSS through{' '}
27
              <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before">
28
                {' '}
29
                <code>::before</code>
30
              </a>{' '}
31
              and{' '}
32
              <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">
33
                {' '}
34
                <code>content</code>
35
              </a>
36
              .
37
            </p>
38
            <DocsExample href="components/breadcrumb">
39
              <CBreadcrumb>
40
                <CBreadcrumbItem>
41
                  <CLink href="#">Home</CLink>
42
                </CBreadcrumbItem>
43
                <CBreadcrumbItem active>Library</CBreadcrumbItem>
44
              </CBreadcrumb>
45
              <CBreadcrumb>
46
                <CBreadcrumbItem>
47
                  <CLink href="#">Home</CLink>
48
                </CBreadcrumbItem>
49
                <CBreadcrumbItem>
50
                  <CLink href="#">Library</CLink>
51
                </CBreadcrumbItem>
52
                <CBreadcrumbItem active>Data</CBreadcrumbItem>
53
              </CBreadcrumb>
54
              <CBreadcrumb>
55
                <CBreadcrumbItem>
56
                  <CLink href="#">Home</CLink>
57
                </CBreadcrumbItem>
58
                <CBreadcrumbItem>
59
                  <CLink href="#">Library</CLink>
60
                </CBreadcrumbItem>
61
                <CBreadcrumbItem>
62
                  <CLink href="#">Data</CLink>
63
                </CBreadcrumbItem>
64
                <CBreadcrumbItem active>Bootstrap</CBreadcrumbItem>
65
              </CBreadcrumb>
66
            </DocsExample>
67
          </CCardBody>
68
        </CCard>
69
      </CCol>
70
    </CRow>
71
  )
72
}
73

74
export default Breadcrumbs
75