Недавно возникла потребность Бутстрап-верстку интегрировать в Битрикс-сайт. Естесственно — самая главная головная боль — многоуровневое верхнее меню. Оказалось, «забутстрапить» верхнее меню довольно просто. То есть, как известно — сначала копируем шаблон компонента меню horizontal_multilevel, и потом вместо того кода, который есть, вставляем приведенный ниже. Кто кодирует локально — этот файл будет у вас находится по следующему пути: bitrix/templates/название_шаблона/components/bitrix/menu/horizontal_multilevel_ваше_название_копии_шаблона/template.php.

Внимание! Использован не Bootstrap Twitter, а вот этот Bootstrap getbootstrap.com. Соответственно, для работы выпадающего меню необходимо подключить не только bootstrap.min.css, но и bootstrap.min.js.

ДЕМО: kp-ra.org

Чтобы посмотреть меню в действии, измените ширину браузера до размеров от планшета до телефона — меню сворачивается до иконки, при клике выпадает вниз. Второй уровень вложенности тоже выпадает при клике на пункт.

Ну, наконец код:

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>
<ul class="nav navbar-nav">
<?
$previousLevel = 0;
foreach($arResult as $arItem):?>

<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
<?endif?>

<?if ($arItem["IS_PARENT"]):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li class="dropdown"><a href="<?if($arItem['LINK']['$str']!='p'){echo '#';}?>" class="<?if ($arItem["SELECTED"]):?>active<?else:?>dropdown-toggle<?endif?>" data-toggle="dropdown" role="button" aria-expanded="false"><?=$arItem["TEXT"]?><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<?else:?>
<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
<ul>
<?endif?>

<?else:?>

<?if ($arItem["PERMISSION"] > "D"):?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li>
<?else:?>
<li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>

<?else:?>

<?if ($arItem["DEPTH_LEVEL"] == 1):?>
<li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
<?else:?>
<li style="padding: 5px 0 5px 0px;"><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
<?endif?>

<?endif?>

<?endif?>

<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>

</ul>

<?endif?>

Внимание! Вся верстка у меня вынесена в header. В шаблоне компонента меню только сам список с добавлением классов, которые позволяют сделать меню двухуровневым. Следующий код — для того, чтобы вы смогли идентифицировать, куда вставлять модуль меню. При желании можно всю «внешнюю» верстку перенести в шаблон компонента «меню».

И обратите внимание — кавычки здесь выводятся «криво», проверьте после переноса кода, чтобы отображались корректно.

<div class="menu">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<?$APPLICATION->IncludeComponent("bitrix:menu", "horizontal_multilevel_bootstrap", Array(
"ROOT_MENU_TYPE" => "top", // Тип меню для первого уровня
"MENU_CACHE_TYPE" => "A", // Тип кеширования
"MENU_CACHE_TIME" => "3600", // Время кеширования (сек.)
"MENU_CACHE_USE_GROUPS" => "Y", // Учитывать права доступа
"MENU_CACHE_GET_VARS" => "", // Значимые переменные запроса
"MAX_LEVEL" => "2", // Уровень вложенности меню
"CHILD_MENU_TYPE" => "", // Тип меню для остальных уровней
"USE_EXT" => "N", // Подключать файлы с именами вида .тип_меню.menu_ext.php
"DELAY" => "N", // Откладывать выполнение шаблона меню
"ALLOW_MULTI_SELECT" => "N", // Разрешить несколько активных пунктов одновременно
),
false
);?>

</div><!-- /.navbar-collapse -->
</nav><!-- /nav -->
</div><!-- /container -->
</div><!-- /menu -->