Breadcrumbs - "хлебных крошек"-Breadcrumbs - "хлебных крошек"

Для реализации "хлебных крошек" в MODX Revolution используется стандартный компонент Breadcrumbs, прост в установке и весьма удобен.

Простое создание "хлебных крошек"

  1. Загрузим и установим его
  2. Вызовем в любом месте шаблона и он будет показывать полный путь до текущего ресурса
    1
    [[Breadcrumbs]]
  3. Обернём его в теги, к примеру:
    1
    2
    3
    <div id="breadcrumb">
    [[Breadcrumbs]]
    </div>
  4. Подключим простые стили, для корректного изображения:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #breadcrumb{
    padding:20px 0;
    }
    #breadcrumb ul{
    margin:0;
    padding:0;
    list-style:none;
    }
    #breadcrumb ul li{display:inline;}
    #breadcrumb ul li.current a{text-decoration:underline;}
  5. Подключим параметр, для любого имени главного (первого) ресурса:
    1
    [[Breadcrumbs? homeCrumbTitle=`Главная`]]

Хлебные крошки через чанк-оформления

Можно также создать "Хлебные крошки" через чанк, для этого создаём его, к примеру tpl.Breadcrumbs и в него пишем:

1
2
3
4
5
6
[[Breadcrumbs?
&bcTplCrumbOuter=`<ol class="breadcrumb">[[+text]]</ol>`
&crumbSeparator=``
&homeCrumbTitle=`Главная`
&showCrumbsAtHome=`true`
]]

Затем вызываем его в нужном месте шаблона:

1
[[$tpl.Breadcrumbs]]

Параметры Breadcrumbs:

&bcTplCrumbOuter Оформление тега списка
&crumbSeparator Разделитель
&homeCrumbTitle Название главного элемента списка
&showCrumbsAtHome Наличие главного элемента (true & false)

Пример как у меня на сайте:

    
    <div class="bread">

    [[ Breadcrumbs? 
 &homeId=`262` 
 &homeCrumbTitle=`Каталог`
 ]]


</div>

CSS:

.bread { width:100%; height: 28px; background-color:#0db467; color:#ffffff; background-position: left top;}
.bread li { display:inline; font-style:italic; list-style:none; font-size:20px; margin-left:6px; }
.bread a {color:#ffffff; text-decoration: none;}
.bread a:hover {text-decoration: underline; }
.bread .B_currentCrumb {opacity: .6;}


24.07.2026

Главная »

Яндекс.Метрика