Navigation suggestion

Topics: General
Jul 17, 2013 at 4:33 AM
I'm currently doing a technical review for a book and came across a section regarding navigation icons in WordPress that made me think of a possible enhancement to Orchard navigation if you guys think it might be worthwhile. I know on at least one site, I've implemented this with a rather large if/then statement to add an icon before the navigation item. WordPress (ugh) allows the user to input HTML code for the navigation item label. I know we have the HTML menu item, but what if I want to link to a Content Item, but still specify HTML for the menu's not possible without modifying the menuitemlink shape (as far as I know).

Just an idea I thought I'd throw out there.
Jul 18, 2013 at 11:45 AM
Depends exactly how you want to specify the icon...

A very basic solution i have used in the past is a custom template e.g. MenuItemLink-Social.cshtml, Social is the name of the menu. This created a CSS class from the menu text. Then you can specify the icon as a background image in the CSS
    var linkClassName = Orchard.Utility.Extensions.StringExtensions.HtmlClassify(Model.Text.ToString());
<a href="@Model.Href" class="@linkClassName">@Model.Text</a>
Jul 18, 2013 at 5:40 PM
Thanks for that option...definitely a possible solution. In the example I gave above, the large if/then statement was being used to render Font Awesome icons which use a <i class='icon-name"></i> format. This type of display wouldn't be possible using CSS classes, but I definitely think the CSS background image would be useful for some implementations.

I did just notice a new module Menu Item Link Alternatives, which I'm going to use for rendering menu items in the breadcrumb shape, which typically uses the same menuitemlink template as the main navigation menu. As long as my breadcrumb is in a different zone than the main navigation, I should be able to specify breadcrumb separators and replace the Home link with an icon.