NeuroAgent

Dropdown Menu with Infoblock Elements in Bitrix

Complete guide to creating a dropdown menu with infoblock elements in Bitrix. Code, templates, and styles for implementation.

#bitrix-development#bitrix-menu#css-styling#dropdown-menu#infoblock-integration

How to create a dropdown menu with infoblock section elements in Bitrix?

Problem

The main menu items of the site are output from the .top.menu.php file. One of these items is a link to an infoblock section. It is necessary to implement a dropdown menu that will display the elements of this infoblock section when hovering the cursor.

Attempted Solution

I tried the following code, but it doesn’t work:

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

global $APPLICATION;

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // ID инфоблока
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y","SECTION_ID"=>"5");
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],
            $arFields['DETAIL_PAGE_URL'],
            Array(),
            Array(),
            ""
        );
    }       
}   

$aMenuLinks = array_merge($aMenuLinksExt, $aMenuLinks);
?>

Question

How to properly implement a dropdown menu with infoblock section elements in Bitrix? What’s wrong with my code and how can I fix it?

NeuroAgent

Your approach is close to correct, but there are several key points that need to be fixed to create a complete dropdown menu with infoblock elements in Bitrix.

Main problems in your code:

  1. Incorrect order of array operations
  2. Missing proper structure for the dropdown menu
  3. Necessary templates for display are not created

Here is the complete solution:

Creating a Dropdown Menu with Infoblock Elements in Bitrix

Main Code for .top.menu.php File

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

global $APPLICATION;

// Array for additional menu items
$aMenuLinksExt = array();

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // Infoblock ID
    $SECTION_ID = 5;      // Section ID whose elements need to be displayed
    
    // Get section elements
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL", "PREVIEW_PICTURE");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y", "SECTION_ID"=>$SECTION_ID);
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],                           // link text
            $arFields['DETAIL_PAGE_URL'],                // URL
            Array(),                                     // additional parameters
            Array(),                                     // static data
            ""                                           // description
        );
    }       
}   

// Merge the main array with additional elements
// Important: use the correct order
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>

Creating a Menu Template for Dropdown List

  1. Create a template file bitrix/templates/your_template/components/bitrix/menu/top_menu/dropdown/template.php:
php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?$APPLICATION->IncludeComponent(
    "bitrix:menu", 
    "dropdown", 
    array(
        "ROOT_MENU_TYPE" => "top", 
        "MENU_CACHE_TYPE" => "N", 
        "MENU_CACHE_TIME" => "3600", 
        "MENU_CACHE_USE_GROUPS" => "Y", 
        "MENU_CACHE_GET_VARS" => array(), 
        "MAX_LEVEL" => "2", 
        "CHILD_MENU_TYPE" => "left", 
        "USE_EXT" => "Y", 
        "DELAY" => "N", 
        "ALLOW_MULTI_SELECT" => "N", 
        "MENU_THEME" => "site", 
        "MENU_ITEMS_TEMPLATE_MODE" => "Y"
    ),
    false
);?>

<ul class="top-menu-dropdown">
    <?foreach($arResult as $arItem):?>
        <?if($arItem['SELECTED']):?>
            <li class="selected">
                <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
            </li>
        <?else:?>
            <li>
                <a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a>
                <?if(!empty($arItem['PARAMS']['CHILDS'])):?>
                    <ul class="dropdown-menu">
                        <?foreach($arItem['PARAMS']['CHILDS'] as $child):?>
                            <li>
                                <a href="<?=$child['LINK']?>"><?=$child['TEXT']?></a>
                            </li>
                        <?endforeach;?>
                    </ul>
                <?endif;?>
            </li>
        <?endif;?>
    <?endforeach;?>
</ul>

CSS Styles for Dropdown Menu

Add to your CSS file:

css
/* Main menu with dropdown elements */
.top-menu-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-menu-dropdown li {
    position: relative;
    margin-right: 20px;
}

.top-menu-dropdown a {
    display: block;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.top-menu-dropdown a:hover {
    background-color: #f0f0f0;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 200px;
    display: none;
    z-index: 1000;
}

.top-menu-dropdown li:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    width: 100%;
    margin: 0;
}

.dropdown-menu a {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

/* Classes for hover states */
.ui-btn-hover {
    background-color: #f5f5f5;
}

.ui-btn-menu-hover {
    background-color: #e8e8e8;
}

Alternative Approach Through Menu Component

You can also use the standard Bitrix menu component with additional parameters:

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

<?$APPLICATION->IncludeComponent(
    "bitrix:menu", 
    "top", 
    array(
        "ROOT_MENU_TYPE" => "top", 
        "MENU_CACHE_TYPE" => "A", 
        "MENU_CACHE_TIME" => "3600", 
        "MENU_CACHE_USE_GROUPS" => "Y", 
        "MENU_CACHE_GET_VARS" => array(), 
        "MAX_LEVEL" => "2", 
        "CHILD_MENU_TYPE" => "left", 
        "USE_EXT" => "Y", 
        "DELAY" => "N", 
        "ALLOW_MULTI_SELECT" => "N", 
        "MENU_THEME" => "site", 
        "MENU_ITEMS_TEMPLATE_MODE" => "Y",
        "ADD_SECTIONS_CHAIN" => "N",
        "CACHE_TYPE" => "A",
        "CACHE_TIME" => "3600"
    ),
    false
);?>

Administrative Panel Setup

  1. Log in to the Bitrix admin panel
  2. Go to Settings → Product Settings → Menu Settings
  3. Create a new menu type “top” or use an existing one
  4. Make sure your .top.menu.php file is in the root of the site

Table of Contents

Main Problems in Your Code

  1. Incorrect order of operations: You’re trying to use $aMenuLinks before it’s defined. The correct order is to define both arrays first, then merge them.

  2. Missing structure for dropdown menu: Bitrix requires a special structure to create dropdown submenus.

  3. Templates not created: To display a dropdown menu, you need to create the appropriate component template.

Correct Code for .top.menu.php

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

global $APPLICATION;

// Initialize arrays
$aMenuLinksExt = array();
$aMenuLinks = array(); // Main menu array (if already defined in the system)

if(CModule::IncludeModule("iblock"))
{
    $IBLOCK_ID = 3;        // Infoblock ID
    $SECTION_ID = 5;      // Section ID
    
    $arOrder = Array("SORT"=>"ASC");   
    $arSelect = Array("ID", "NAME", "IBLOCK_ID", "DETAIL_PAGE_URL", "PREVIEW_PICTURE");
    $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "ACTIVE"=>"Y", "SECTION_ID"=>$SECTION_ID);
    $res = CIBlockElement::GetList($arOrder, $arFilter, false, false, $arSelect);

    while($ob = $res->GetNextElement())
    {
        $arFields = $ob->GetFields();            
        $aMenuLinksExt[] = Array(
            $arFields['NAME'],
            $arFields['DETAIL_PAGE_URL'],
            Array(),
            Array(),
            ""
        );
    }       
}   

// Correct array merging
$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);
?>

Creating Menu Template

To create a dropdown menu, you need to create a menu component with a custom template:

  1. Create folder: bitrix/components/bitrix/menu.top.dropdown/
  2. In it, create a file .description.php with component description
  3. Create a template in the templates/.default/ folder

The main template file should support nested elements and hover effects.

CSS Styles for Dropdown Menu

css
/* Menu container */
.top-menu-dropdown {
    position: relative;
    display: inline-block;
}

/* Menu items */
.top-menu-dropdown li {
    position: relative;
    display: inline-block;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display: none;
}

/* Show dropdown menu on hover */
.top-menu-dropdown:hover .dropdown-menu {
    display: block;
}

/* Dropdown menu items */
.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
}

.dropdown-menu a:hover {
    background-color: #f1f1f1;
}

Alternative Approach Through Component

You can use the standard bitrix:menu component with additional settings:

php
<?$APPLICATION->IncludeComponent(
    "bitrix:menu", 
    "dropdown", 
    array(
        "ROOT_MENU_TYPE" => "top", 
        "MENU_CACHE_TYPE" => "N", 
        "MENU_CACHE_TIME" => "3600", 
        "MENU_CACHE_USE_GROUPS" => "Y", 
        "MENU_CACHE_GET_VARS" => array(), 
        "MAX_LEVEL" => "2", 
        "CHILD_MENU_TYPE" => "left", 
        "USE_EXT" => "Y", 
        "DELAY" => "N", 
        "ALLOW_MULTI_SELECT" => "N", 
        "MENU_THEME" => "site", 
        "MENU_ITEMS_TEMPLATE_MODE" => "Y"
    ),
    false
);?>

Administrative Panel Setup

  1. Menu type settings:

    • Go to: Settings → Product Settings → Menu Settings
    • Add or configure the “top” menu type

  2. Menu file verification:

    • Make sure the .top.menu.php file is in the root of the site
    • Check file access permissions

  3. Caching:

    • Configure caching parameters for performance

Conclusion

To create a dropdown menu with infoblock elements in Bitrix, you need to:

  1. Fix the structure of the .top.menu.php file - correctly define and merge arrays
  2. Create a custom menu component template to display dropdown elements
  3. Add CSS styles for visual styling and hover effect functionality
  4. Configure the Bitrix admin panel for proper menu operation

The main advantages of this approach:

  • Full integration with the Bitrix system
  • Support for caching for performance
  • Flexible visual customization through CSS
  • Scalability for adding new elements

If you have additional questions or problems with implementation, it’s recommended to refer to the official Bitrix documentation or developer community.

Sources

  1. Official Bitrix Documentation - Menu Templates
  2. Menu Building and Display - Bitrix Framework
  3. Working with Infoblocks Using Standard Means
  4. CSS Dropdowns Tutorial
  5. Bitrix Menu Control Documentation
How to add icons to a Bitrix dropdown menu?How to create a multi-level dropdown menu in Bitrix?How to optimize performance of a dropdown menu with many elements in Bitrix?How to integrate a dropdown menu with the mobile version of a site in Bitrix?How to create a dynamic dropdown menu based on user access rights in Bitrix?How to add animation to a Bitrix dropdown menu using CSS?
Ask NeuroAgent