Базовые хлебные крошки CSS

На чтение 5 мин Просмотров 143 Опубликовано 26.04.2022

Primer CSS предлагает нам так много компонентов, и Breadcrumbs — один из них. В этой статье мы узнаем о панировочных сухарях. Хлебные крошки используются для указания местоположения текущей страницы в навигационной иерархии. Для представления контента, демонстрирующего разделенные пути, используются хлебные крошки.

Основные CSS-хлебные крошки Используемые классы:

элемент хлебной крошки: этот класс используется для соответствующего элемента для реализации этой утилиты.

Синтаксис:

Пример: этот пример демонстрирует использование хлебных крошек Primer CSS с использованием класса элемента хлебных крошек.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Primer CSS Breadcrumbs</title>

    <link rel="stylesheet" href=

"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />

</head>

<body style="margin:100px">

    <div class="text-center">

        <h1 class="color-fg-success"> GeeksforGeeks </h1>

        <h3><u>Primer CSS Breadcrumbs</u></h3><br />

    </div>

    <div class="d-flex flex-justify-center">

        <div aria-label="Breadcrumb">

            <ol>

                <li class="breadcrumb-item">

                    <a href="#">Home Section</a>

                </li>

                <li class="breadcrumb-item">

                    <a href="#">Previous Section</a>

                </li>

                <li class="breadcrumb-item breadcrumb-item-selected">

                    <a href="#" aria-current="page">Section selected</a>

                </li>

            </ol>

        </div>

    </div>

    <br />

    <div class="d-flex flex-justify-center">

        <div aria-label="Breadcrumb">

            <ol>

                <li class="breadcrumb-item">

                    <a href="#">Home</a>

                </li>

                <li class="breadcrumb-item">

                    <a href="#">Geeks for Geeks</a>

                </li>

                <li class="breadcrumb-item breadcrumb-item-selected">

                    <a href="#" aria-current="page">Articles</a>

                </li>

            </ol>

        </div>

    </div>

</body>



</html>

Выход: