Custom Theme

LbMenu package uses theme for generate menu html. And each menu can use separatly a theme.

In the config file, you can see some themes already created : https://github.com/jhuriez/fuel-lbMenu-package/blob/master/config/menu.php

But you can override, or create your own theme.

Items

A theme must contains these items :

menu

The first "ul" tag

Attributes

• {menu} => Output 'menu_item' item.
• {depth} (optionnaly) => Output the depth number

---

menu_item

Each "li" tags

Attributes

• {active} => Output 'active' string if your are in this link/menu.
• {item} => Output 'menu_item_inner' item.
• {submenu} => Output 'sub_menu' item.
• {depth} (optionnaly) => Output the depth number

---

menu_item_inner

The content in each "li" tags

Attributes

• {link} => Output the link for "a"
• {title} => Output the title for "a"
• {text} => Output the text of the link/submenu
• {depth} (optionnaly) => Output the depth number

---

sub_menu

The "ul" tag if the 'menu_item' contains sub menu

Attributes

• {menu} => Output 'sub_menu_item' item.
• {depth} (optionnaly) => Output the depth number

---

sub_menu_item

Each "li" tags in the sub menu

Attributes

• {active} => Output 'active' string if your are in this link/menu.
• {item} => Output 'sub_menu_item_inner' item.
• {submenu} => Output 'sub_menu' item.
• {depth} (optionnaly) => Output the depth number

---

sub_menu_item_inner

The content in each "li" tags in the sub menu

Attributes

• {link} => Output the link for "a"
• {title} => Output the title for "a"
• {text} => Output the text of the link/submenu
• {depth} (optionnaly) => Output the depth number

---

Optionnaly :

Suffix _with_children

The suffix _with_chilren will target all item which contains children/sub_menu. It's can be helpful if you want to add a "caret" if your item contains children.

For example :

'menu_item_inner' => '<a href="{link}" title="{title}">{text}</a>',
'menu_item_inner_with_children' => '<a href="{link}" title="{title}">{text} <span class="caret"></span></a>',

Suffix _depth-[number]

The suffix _depth-[number] will target all item in the depth [number].

For example :

'sub_menu_depth-2' => '<ul class="nav nav-second-level">{menu}</ul>',
'sub_menu_depth-3' => '<ul class="nav nav-third-level">{menu}</ul>',

Simple theme example

	        'menu' => '<ul class="menu">{menu}</ul>',
	        'menu_item' => '<li class="item depth-1 {active}">{item} {submenu}</li>',
	        'menu_item_inner' => '<a href="{link}" title="{title}">{text}</a>',

	        'sub_menu' => '<ul class="sub-menu depth-{depth}">{menu}</ul>',
	        'sub_menu_item' => '<li class="sub-item depth-{depth} {active}">{item} {submenu}</li>',
	        'sub_menu_item_inner' => '<a href="{link}" title="{title}">{text}</a>',

Complexe theme example

			// First level menu
	        'menu' => '<ul class="menu">{menu}</ul>',
	        'menu_item' => '<li class="item depth-1 {active} {item_class}">{item} {submenu}</li>',
	        'menu_item_inner' => '<a href="{link}" title="{title}">{text}</a>',
	        'menu_item_inner_with_children' => '<a href="{link}" title="{title}">{text} <span class="caret"></span></a>',

	        // Sub menu
	        'sub_menu' => '<ul class="sub-menu depth-{depth}">{menu}</ul>',
	        'sub_menu_item' => '<li class="sub-item depth-{depth} {active} {item_class}">{item} {submenu}</li>',
	        'sub_menu_item_inner' => '<a href="{link}" title="{title}">{text}</a>',
	        'sub_menu_item_inner_with_children' => '<a href="{link}" title="{title}">{text} <span class="caret"></span></a>',

	        // Level 2 => Blue, Level 3 => Red
	        'sub_menu_depth-2' => '<ul class="sub-menu depth-{depth} color-blue">{menu} <span class="nav-second-level"></span></ul>',
	        'sub_menu_depth-3' => '<ul class="sub-menu depth-{depth} color-red">{menu} <span class="nav-third-level"></span></ul>',

	        // EAV
	        'attributes' => array(
	        	array(
        			'key' => 'item_class',
        			'label' => 'Item class',
        			'default' => 'item'
        		),
        	),