<p class="text-tip" style="position: relative">On top of this page, you can see live demonstration of Rich Menu. <img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/cliparts/arrows/arrow-up-right-2.png" style="position: absolute; top: -50px; padding-left: 10px" alt="Icon Arrow Up" /></p>
<p>With this menu system you can attach icons and add descriptive text to each menu item making them much clearer and visually appealing. The best thing is you can use the default menu module built-in Joomla!, no need to install external menu modules.</p>
<h3>Menu items with descriptive text</h3>
<p>JSN Boot allows you to present menu items with descriptive text placed on a separated line at the bottom of main text.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/menu-styles/rich-menu/menu-mainmenu-rich.png" alt="Main Menu Rich Text" width="600" height="175" border="0" /></p>
<p>To setup text strings you need to go to menu item settings and add symbol combination &ldquo;<strong>(=)</strong><strong>&rdquo;</strong> as separator between primary and secondary text.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/menu-styles/rich-menu/menu-mainmenu-rich-settings.png" alt="Main Menu Rich Text Settings" width="600" height="270" border="0" /></p>
<p>In the example above text &ldquo;<strong>Home</strong>&rdquo; is the primary text and &ldquo;<strong>Lorem ipsum dolor sit...</strong>&rdquo; is the secondary text. Separator between them is the symbol combination &ldquo;<strong>(=)</strong>&rdquo;. Really simple and elegant solution.</p>
<hr class="line-dots" />
<h3>Menu items with icons</h3>
<p>JSN Boot allows you to assign up to <strong>20 predefined icons</strong> for items in main menu.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/menu-styles/rich-menu/menu-mainmenu-icons.png" alt="Main Menu Icons" width="600" height="125" border="0" /></p>
<p> To setup icons, you need to find template parameter <strong>Main Menu Icons</strong> and choose any icon you want to display from drop-down panel.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/menu-styles/rich-menu/menu-mainmenu-icons-settings.png" alt="Main Menu Icons Settings" width="600" height="300" border="0" /></p>
<hr class="line-dots" />
<h3>Combination of descriptive text and icons</h3>
<p>You can use combination of descriptive text and icons to get Rich Menu in it's best presentation.</p>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/menu-styles/rich-menu/menu-mainmenu-rich-icons.png" alt="Main Menu Rich Text combined with Icons" width="600" height="175" border="0" /></p>