Top NavbarΒΆ

Foundation 3 now includes a top nav bar includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).

To use the Top Navbar in your your project, first ensure that your project’s site_base.html inherits from theme_base.html

{% extends "theme_base.html" %}

theme_base.html defines the template block topbar with the following structure.

{% block topbar_base %}
    <div class="attached">
            <div class="row">
                    <li class="name mobile-four">
                            <a href="/">{{SITE_NAME}}</a><a href="#"></a>
                    </li>
                    <ul class="nav-bar menu mobile-four">
                            {% block topbar %}
                                    {% block nav %}{% endblock %}
                                    {% block account_bar %}
                                            {% include "_account_bar.html" %}
                                    {% endblock %}
                            {% endblock %}
                    </ul>
            </div>
    </div>
{% endblock %}

This will provide your project with a top nav bar which is attached to the top of the page that displays the SITE_NAME and an account management drop down menu. The account management drop down is simply an unordered lists as shown in the following snippet abstracted from the _account_bar.html template file

{% if user.is_authenticated %}
    <li class="has-flyout">
        <a href="#">{{ user }}</a>
        <a href="#" class="flyout-toggle"><span> </span></a>
        <ul class="flyout">
            <li><a href="{% url acct_email %}"><span class="glyph social">x</span>Account</a></i></li>
            {% if user.is_staff %}
                    <li><a href="{% url admin:index %}"><span class="glyph general">a</span>Admin</a></li>
            {% endif %}
            <li><a href="{% url acct_logout %}"><span class="glyph general">]</span>Log&nbsp;out</a></li>
        </ul>
    </li>
{% endif %}

So to create a drop down menu item, simply assign the li element the “has-flyout” class and include an unordered list element with a “flyout” class selector <ul class="flyout"> that contains the drop down menu items . The nav block can be utilized for the other menu items for the site. These can be a combination of drop down and non drop down elements. This is shown in the following snippet abstracted from the Top Navbar for this site

<li><a href="/">Home</a></li>
    {% if user.is_authenticated %}
<li id="tab_profile"><a href="{% url profile_detail user.username %}">{% trans "Profile" %}</a></li>
<li id="tab_notices"><a href="{% url notification_notices %}">{% trans "Notices" %}{% if notice_unseen_count %} ({{ notice_unseen_count }}){% endif %}</a></li>
    {% endif %}

It should be noted that menu items can be embellished with appropriate symbol icons by including a span element with the “glyph general” class selector. So adding :

<span class="glyph general">a</span>

will display the “gear” icon. These are actually Zurb symbol icon font that will scale and display nicely on various devices. These can be used any where in your project.

Previous topic

A Foundation 3 Theme for Pinax

Next topic

Forms

This Page