css-examples/css-cookbook/breadcrumb-navigation--download.html at main · mdn/css-examples

History

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<!doctype html>

<head>

<title>CSS Cookbook: Breadcrumb Navigation</title>

<style>

body {

background-color: #fff;

color: #333;

font:

1.2em / 1.5 Helvetica Neue,

Helvetica,

Arial,

sans-serif;

padding: 0;

margin: 0;

}

.breadcrumb {

padding: 0 0.5rem;

}

.breadcrumb ul {

display: flex;

flex-wrap: wrap;

list-style: none;

margin: 0;

padding: 0;

}

.breadcrumb li:not(:last-child)::after {

display: inline-block;

margin: 0 0.25rem;

content: "→";

}

</style>

</head>

<body>

<ul>

<li><a href="#">Category</a></li>

<li><a href="#">Sub Category</a></li>

<li><span aria-current="page">Product</span></li>

</ul>

</nav>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

breadcrumb-navigation--download.html

breadcrumb-navigation--download.html

Files

breadcrumb-navigation--download.html

Latest commit

History

breadcrumb-navigation--download.html

File metadata and controls