<Breadcrumb />

1import React from "react";
2import "./Styles/_breadcrumb.scss";
3
4export default function Breadcrumb({ children }) {
5    return (
6        <nav className="breadcrumb">
7            <ul>{children}</ul>
8        </nav>
9    );
10}
11
12export { BreadcrumbItem } from "./Components/BreadcrumbItem";

1$properties: (
2      size: 1.2rem,
3      position: "",
4      clr: #485fc7,
5      separator: (
6            type: "",
7            clr: #b5b5b5,
8      ),
9);
10
11.breadcrumb {
12      font-size: map-get($properties, size);
13      white-space: nowrap;
14
15      a {
16            display: flex;
17            justify-content: center;
18            align-items: center;
19            color: map-get($properties, clr);
20            padding: 0 0.75em;
21            text-decoration: none;
22
23            &:hover {
24                  color: hsl(0, 0%, 21%);
25            }
26      }
27
28      li {
29            display: flex;
30            align-items: center;
31
32            &:first-child a {
33                  padding-left: 0;
34            }
35
36            &.is-active {
37                  a {
38                        color: #363636;
39                        cursor: default;
40                        pointer-events: none;
41                  }
42            }
43
44            & + li::before {
45                  color: map-get($properties, separator, clr);
46                  content: "\0002f";
47            }
48      }
49      ul,
50      ol {
51            align-items: flex-start;
52            display: flex;
53            flex-wrap: wrap;
54            justify-content: flex-start;
55      }
56
57      @if map-get($properties, position) == "center" {
58            ol,
59            ul {
60                  justify-content: center;
61            }
62      } @else if map-get($properties, position) == "right" {
63            ol,
64            ul {
65                  justify-content: flex-end;
66            }
67      }
68
69      @if map-get($properties, separator, type) == "arrow" {
70            li + li::before {
71                  content: "\02192";
72            }
73      } @else if map-get($properties, separator, type) == "bullet" {
74            li + li::before {
75                  content: "\02022";
76            }
77      } @else if map-get($properties, separator, type) == "dot" {
78            li + li::before {
79                  content: "\000b7";
80            }
81      } // https://www.w3schools.com/cssref/css_entities.asp
82}

1