Making a custom menu in Django using django-sitetree and Bootstrap

Custom Bootstraps Menus

The menu is a standard element in all web applications. In this post I will show you an easy way to create it. An example of the result is the menu of this blog. All the code is in GitHub.

The technologies used are:

  • Django 2.2
  • Python 3.7
  • django-sitetree 1.13.2
  • Bootstrap 3.3.7

About django-sitetree

In its documentation, this application is defined as:

“django-sitetree is a reusable application for Django, introducing site tree, menu and breadcrumbs navigation elements”.

In my opinion, it is a robust, flexible and simple menu solution. In addition, it is full of interesting features such as templates for Bootstrap, Foundation or Semantic UI, the possibility to limit access to an element and internationalization.

GitHub: https://github.com/idlesign/django-sitetree

Docs: http://django-sitetree.readthedocs.io/en/latest/index.html

Installing and configuring django-sitetree

  1. First, we install django-sitetree in our virtualenv.
    pip install django-sitetree
  2. Add the sitetree application to INSTALLED_APP in your settings file.
  3. Check that django.template.context_processors.request and django.contrib.auth.context_processors.auth is defined in TEMPLATES/OPTIONS/context_processors.
  4. Install sitetree tables into database ./manage.py migrate

Creating a menu

Now, we can create our new menu, for that we have to go to django administration. The following instructions are for the menu of this blog:

  1. Site Trees
  2. ADD SITE TREE
  3. Title: Main Menu
    Alias: mainmenu
    Save and continue editing

    Sitetree menu empty

  4. ADD SITE TREE ITEM
    Parent: ---------
    Title: Blog
    URL: /
    Save

    Sitetree with one item

  5. Continue adding site tree items until you get the following tree. Remember that the Parent of Django and Python is Categories.


  6. Sitetree with all items

Adding the menu to a template

I’ll use this easy django html template with Bootstrap in this example.


<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="utf-8">
    	        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    	        <meta name="viewport" content="width=device-width, initial-scale=1">

		<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">	
	</head>
	<body>
		<header>


		</header>

		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<section>
						<h1>Sergio's Corner</h1>
						<p>Making a custom menu in Django using django-sitetree and Bootstrap</p>
					</section>
				</div>
			</div>
		</div>
		
	    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>

To add the menu, it is only necessary to follow the next 2 instructions:

  1. In the first line:
    {% load sitetree %}
  2. In header tag:
    {% sitetree_menu from "mainmenu" include "trunk,topmenu" %}

Now, we have the menu on the page.


Sitetree without style

Adding Bootstrap style to the menu

Django-sitetree comes with templates for Bootstrap. It can be found in the package folder.

  1. Copy sitetree bootstrap 3 template files to our project. I created a folder named “sitetree” in templates to paste the files in. These files are in our virtualenv folder → lib → python3.5 → site-packages → sitetree → templates → sitetree. The necessary files are:
    1. menu_bootstrap3.html
    2. menu_bootstrap3_dropdown.html
  2. Rename deleting bootstrap3 of the name
    1. menu.html
    2. menu_dropdown.html

Now, we have the menu with the standard Bootstrap style.


Sitetree menu with Bootstrap Style

Customizing the menu

For that, we have to add some lines to the menu.html that we copied in the last step. The result is:


{% load sitetree %}
<nav class="navbar navbar-default">
  	<div class="container-fluid">
    	<!-- Brand and toggle get grouped for better mobile display -->
    	<div class="navbar-header">
      		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        		<span class="sr-only">Toggle navigation</span>
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
        		<span class="icon-bar"></span>
      		</button>
    	</div>
        <!-- Collect the nav links, forms, and other content for toggling -->
    	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

			<ul class="nav navbar-nav">
			    {% for item in sitetree_items %}
			        <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
			            <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>
			                {{ item.title_resolved }}
			                {% if item.has_children %}<b class="caret"></b>{% endif %}
			            </a>
			            {% if item.has_children %}
			                {% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
			            {% endif %}
			        </li>
			    {% endfor %}
			</ul>
		</div>
	</div>
</nav>

After that, we can customize. We'll use TWBSColor. It's a web application that is very easy to use. We only have to set four parameters, mark "Colorize Dropdown" checkbox if we want, and download the code to insert it into our project. In the case of Sergios's Corner, I copied the css code in style.css.

TWBSColor: http://work.smarchal.com/twbscolor/


Sitetree menu with Bootstrap custom style

That's it, I hope you found this post helpful.'