Get started

Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

Install with npm

$ npm install coreui-breadcrumb

Требования

Для корректной работы на странице необходимо наличие: Bootstrap 5, jquery

Examples

Simple

    <div id="breadcrumb-simple"></div>

    <script>
        CoreUI.breadcrumb.create({
            items: [
                { text: 'Home', url: '#' },
                { text: 'Library', url: '#' },
                { text: 'Data' },
            ]
        }).render('breadcrumb-simple');
    </script>
Divider

    <div id="breadcrumb-divider"></div>

    <script>
        CoreUI.breadcrumb.create({
            divider: '>',
            items: [
                { text: 'Home', url: '#' },
                { text: 'Library', url: '#' },
                { text: 'Data' },
            ]
        }).render('breadcrumb-divider');
    </script>
Divider svg

    <div id="breadcrumb-divider-svg"></div>

    <script>
        CoreUI.breadcrumb.create({
            divider: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'8\' height=\'8\'%3E%3Cpath d=\'M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z\' fill=\'%236c757d\'/%3E%3C/svg%3E")',
            items: [
                { text: 'Home', url: '#' },
                { text: 'Library', url: '#' },
                { text: 'Data' },
            ]
        }).render('breadcrumb-divider-svg');
    </script>

Options

Name type default description
id string crc32b Идентификатор
divider string Разделитель элементов
items array Список элементов. Пример элемента { text: "lite title", url: "#" }

Methods

Method Return Description
let breadcrumb = CoreUI.breadcrumb.create( options ) object Метод для создания экземпляра навигации
let breadcrumb = CoreUI.breadcrumb.get( id ) object Получение ранее созданного экземпляра навигации
CoreUI.breadcrumb.setSettings( settings ) Установка некоторых настроек по умолчанию
CoreUI.breadcrumb.getSetting( name ) mixed Получение значения установленной настройки по умолчанию
breadcrumb.render( elementId ) string | void Формирование html навигации и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html
breadcrumb.getId() string | null Получение id навигации
breadcrumb.getOptions() object Получение параметров навигации

Sass variables


    $coreui-breadcrumb-item-link-text-decoration: $link-decoration;
    $coreui-breadcrumb-item-link-color:           $link-color;

    $coreui-breadcrumb-item-link-hover-text-decoration: $link-hover-decoration;
    $coreui-breadcrumb-item-link-hover-color:           $link-hover-color;