<p class="text-tip" style="position: relative">On top of this page, you can see live demonstration of Main Menu with icons and rich text. <img src="images/cliparts/arrows/arrow-up-right-2.png" style="position: absolute; top: -20px; padding-left: 10px" alt="Icon Arrow Up" /></p>
<p>Main Menu is very powerful menu built with clean accessible XHTML code structure and effective drop-down submenu panels.</p>
<h3>Main Menu Icons</h3>
<p class="content-center"><img src="images/content/template-details/menu-styles/mainmenu/menu-mainmenu-icons.png" alt="Main Menu Icons" width="600" height="175" border="0" /></p>
<p>You can attach any of <strong>20 predefined icons</strong> to menu items to make them more appealing.</p>
<p class="content-center"><img src="images/content/template-details/menu-styles/mainmenu/menu-mainmenu-icons-settings-j16.png" alt="Main Menu Icons Settings" width="600" height="300" border="0" /></p>
<p>To set up icons, you need to go to menu item settings and add symbol combination <strong> jsn-icon-xxx</strong> to menu items parameter <strong>Link CSS Style</strong>, where <strong>xxx</strong> is the icon name.</p>
<ul>
<li><a href="images/content/template-details/design-features/uniicons.png" target="_blank" class="link-action">See preview of all icons</a></li></ul>
<hr class="line-dots" />
<h3>Main Menu Rich Text</h3>
<p class="content-center"><img src="images/content/template-details/menu-styles/mainmenu/menu-mainmenu-rich.png" alt="Main Menu Rich Text" width="600" height="175" border="0" /></p>
<p>You can add descriptive text to menu items to make them much clearer.</p>
<p class="content-center"><img src="images/content/template-details/menu-styles/mainmenu/menu-mainmenu-rich-settings-j16.png" alt="Main Menu Rich Text Settings" width="600" height="300" border="0" /></p>
<p>To set up descriptive text, you need to go to menu item settings and add descriptive text to menu items parameter <strong>Link Title Attribute</strong>.</p>
<hr class="line-dots" />
<h3>Main Menu Icons and Rich Text in combination</h3>
<p class="content-center"><img src="images/content/template-details/menu-styles/mainmenu/menu-mainmenu-richicons.png" alt="Main Menu Rich Text combined with Icons" width="600" height="175" border="0" /></p>
<p>You can set up menu items to utilize both icons and rich text in combination. Take a look at main menu on this page to see live demonstration.</p>