Skip to main content

Django materialize css support.

Project description

This library was created to make django work with materializecss.


Install the library.

# project/


Setup Context Processors

Materialize nav comes with a context processor to use some settings to change the default base styling.

# Context Processor to work with settings
        'OPTIONS': {
            'context_processors': [

Alternative way to get the standard context for views


from materialize_nav.context_processors import get_context

def show_page(request):
    # Get the context with the style settings
    context = get_context(site_name='demo', title='Basic Content', primary_color='teal')

    context["object"] = "MyObject"
    return render(request, "my_page.html", context)


The base template can be used by extending the materialize base nav.

{% extends "materialize_nav/base.html" %}

{% block nav_items %}
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
{% endblock %}

{% block sidenav_items %}
    {# One option is to override "materialize_nav/sidenav_items.html" #}
    {# OR use "block sidenav_items" and list your items or include another template. #}
    {# This makes the sidenav items reusable in other templates #}
    {% include "my_app/sidenav_items.html" %}
{% endblock %}

{% block contents %}
<div class="row">
    <div class="col s12 m9 l10">
        <p>My Content goes here</p>
{% endblock %}

Styling controls

Materialize nav comes with several style options used in the template context variables listed below.


If you went through the Setup Context Processors step then you can modify several settings to change the default style. This is an alternative to manually providing all of the template context variables.


MATERIALIZE_SITE_NAME = None  # Display this name in the navbar as the main name
MATERIALIZE_TITLE = None  # This is the page title displayed as the browser tab name

MATERIALIZE_HIDE_CONTAINER = False  # If True make the page take up the full width
MATERIALIZE_SHOW_SIDENAV = True  # If True have a menu button available to open up the side navigation menu
MATERIALIZE_FIXED_SIDENAV = False  # If True and SHOW_SIDENAV make the side navigation menu always showing

MATERIALIZE_PRIMARY_COLOR = 'materialize-red lighten-2'

USER_THUMBNAIL_PROPERTY = 'profile.thumbnail'  # For user.profile.thumbnail
USER_BACKGROUND_PROPERTY = 'profile.background'  # For user.profile.background
# USER_THUMBNAIL = 'accounts/default_user.png'  # This is a default image
# USER_BACKGROUND_IMAGE = 'accounts/default_user.png'  # This is a default image

Styling process

There are two methods for changing the default coloring for Materialize CSS.

  • The old method is to use the templatetag include_dynamic_css which would use the django template system to generate a style tag with the proper css classes overridden.
  • The new method only requires using the base.html. It includes the materialize_nav/materialize_nav_colors.js file which uses javascript to create a style tag to edit the proper css classes. This method should require less work from django to change the style.


My original goal was to create an easier way to use materialize css with django. When I first started forms did not format properly and I thought navigation was a pain. Unfortunately, my original approach made this library a strong coupled to your django app which was a terrible design decision. I am trying to simplify this library to help style django apps quickly and without a lot of settings.

Project details

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-materialize-nav, version 1.2.0
Filename, size File type Python version Upload date Hashes
Filename, size django_materialize_nav-1.2.0-py3-none-any.whl (23.8 MB) File type Wheel Python version py3 Upload date Hashes View
Filename, size django_materialize_nav-1.2.0.tar.gz (23.7 MB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page