diff --git a/src/components/BreadcrumbBar/BreadcrumbBar.tsx b/src/components/BreadcrumbBar/BreadcrumbBar.tsx new file mode 100644 index 00000000..994f6691 --- /dev/null +++ b/src/components/BreadcrumbBar/BreadcrumbBar.tsx @@ -0,0 +1,15 @@ +import './breadcrumbbar.css' + +function BreadcrumbBar(){ + return( + + ) +} + +export default BreadcrumbBar \ No newline at end of file diff --git a/src/components/BreadcrumbBar/breadcrumbbar.css b/src/components/BreadcrumbBar/breadcrumbbar.css new file mode 100644 index 00000000..9729a000 --- /dev/null +++ b/src/components/BreadcrumbBar/breadcrumbbar.css @@ -0,0 +1,35 @@ +.breadcrumb-bar-nav { + width: 100%; + flex: 1 1 100%; + padding: 1rem 2rem; + margin: 0.5rem; +} +.breadcrumb-bar-ul { + list-style-type: none; + display: flex; + padding: 0; + margin: 0; +} +.breadcrumb-bar-li { + padding: 0 1em; + color: #647084; + font-size: 15px; + font-weight: 500; + position: relative; +} +.breadcrumb-bar-li::after { + display: inline-block; + content: url("./chevron.svg"); + color: #09101C; + position: absolute; + top: -2px; + left: 100%; + transform: translateX(-50%); +} +.breadcrumb-bar-li:last-child { + color: #09101C; + +} +.breadcrumb-bar-li:last-child::after { + display: none; +} \ No newline at end of file diff --git a/src/components/BreadcrumbBar/chevron.svg b/src/components/BreadcrumbBar/chevron.svg new file mode 100644 index 00000000..51d118e0 --- /dev/null +++ b/src/components/BreadcrumbBar/chevron.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file