Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Foundation 4 Top-Bar menu snippet for ExpressionEngine and Nav-EE plugin.
<nav class="top-bar ">
<ul class="title-area">
<li class="name">
<h1>
<a href="/">
<img src="icon-logo.png" alt="image">
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
{exp:navee:custom
nav_title="main-nav"
wrap_type="none"
selected_class_on_parents="true"
selected_class="active"
parent_selected_class="active"
}
<li class="{class}{if has_kids == 1} has-dropdown{/if}">
<a href="{link}">{text}</a>
{if has_kids == 1}
<ul class="dropdown">
{kids}
</ul>
{/if}
</li>
{/exp:navee:custom}
</ul>
</section>
</nav>
@proimage

This comment has been minimized.

Copy link

proimage commented Oct 3, 2014

This could be enhanced to account for dropdown menu parents that don't link anywhere themselves. If you prefer to leave the link blank for such parent items in NavEE (as opposed to typing in "#"), you could replace {link} on line 24 with:

{if link}{link}{if:else}#{/if}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.