There are three basic framework components provided by Nuit that can be enabled on a per-app or per-template basis. These are the top bar, left menu and right menu.

Top Bar

The top bar is Nuit’s implementation of Foundation’s Top Bar component. It provides a global application menu on the right hand side (defined in with the NUIT_APPLICATIONS variable), a logo and an optional number of links. This is enabled by extending from nuit/base.html and setting topbar to True.

By default, if you provide an app_title to the extend tag, the Top Bar will contain a link to the root of your application next to the logo on the left. To add additional menu items, define the top_bar_menu block and add some menu_item template tags:

{% extend 'nuit/base.html' topbar=True app_title='My App' %}
{% block top_bar_menu %}
    {% menu_item name='A Menu' link='' %}
{% endblock %}

Left Menu

The left menu is intended for use as the main menu of an application, designed to alter on a per-application basis. It is situated on the left of the screen until the screen size drops to ‘small’ (mobile screens etc.), where the menu items are then accessible under the hamburger icon in the top bar. It’s enabled by extending from nuit/base.html and setting leftmenu to True.

By default, this menu will be empty. There is a special template tag, app_menu, designed for use within the left_menu block, that builds the application menu for you, and adds an optional header. An example usage:

{% extend 'nuit/base.html' leftmenu=True %}
{% block left_menu %}
    {% app_menu "My App" %}
        {% menu_item name='A Menu' link='' %}
    {% end_app_menu %}
{% endblock %}

You can also use the menu_section template tag to add additional sections to this menu, before or after the main application menu.

Right Menu

The right menu is intended for use as a page-specific menu. It floats on the right of the screen until the screen size drops to ‘medium’ (tablets, narrow windows etc.), where the items are then available under a gear icon in the top right. Links appear directly beneath the gear, whereas more detailed data structures appear in a modal dialog box with an activation link beneath the gear. It is eneabled by extending from nuit/base.html and setting rightmenu to True.

By default, this menu will be empty. It is designed for use with the menu_section template tag, to be populated with whatever content is necessary for each particular page by overriding the right_menu template block. In order for the medium (and under) drop-down gear menu to work properly, each menu_section needs to be given a unique ID per page. See the menu_section docs for more details.

Example usage:

{% extend 'nuit/base.html' rightmenu=True %}
{% block right_menu %}
    {% menu_section 'Links' is_list=True %}
        {% menu_item name='A Menu' link='' %}
    {% end_menu_section %}
    {% menu_section link_name='Details' %}
        <p>Some details about this page</p>
    {% end_menu_section %}
{% endblock %}

Loading Animation

Renders the HTML for a loading animation. Unlike the previous components, this can be included in any location in a template and uses Django’s include syntax, rather than a template block. Takes two optional arguments:


The size of the loader. There are a number built into Nuit: 16, 32, 48, 64, 80, and 96. This is applied by adding a class of nuit-loader-sizeXX, where XX is the defined size. You can use this in your own stylesheets to define your own size styles if necessary - see Customising with SASS for more details.


Text to display with the loader. If not set, no text will be displayed.

To use, include the nuit/includes/loader.html template. Example usage:

{% include 'nuit/includes/loader.html' with size=64 loading_text='Loading...' %}

Customising with SASS

To build your own loader classes, use the following SASS mixin:

.nuit-loader-sizeMASSIVE {
  @include nuit-loader(1000px);

This can be imported from nuit/_mixins.scss:

@import "nuit/_mixins";

You can then reference the size in your templates:

{% include 'nuit/includes/loader.html' with size='MASSIVE' %}


Nuit provides a foundation_form template tag to enable complex rendering of HTML forms, for use with Django’s Form classes. See the Forms documentation for more detail.


Nuit’s Base Template templates will display any messages logged with Django’s messaging framework at the top of the content area.