Note: this package is still in beta. It has been successfully used in a few projects of my own. However, API may be subject to backward incompatible changes until the first major version is released.
Django-navutils is a lightweight package for handling menu and breadcrumbs inside your django project.
- No database involved (unless you want it): menus and breadcrumbs are plain old python code
- Highly customizable
- Conditionnal menu items display: you want to show a menu link to authenticated users only ? Anonymous ? Staff members ? A custom criteria ? You're covered !
- i18n-friendly: you can rely on usual django translation mechanisms
- Unlimited menus
- Semi-automatic current menu node detection
- Python >= 2.7 or >= 3.3
- Django >= 1.7
The menu system may be integrated in any project, but the breadcrumbs part requires that you use class-based views.
Package is available on pip and can be installed via pip install django-navutils.
You'll also have to add navutils to your settings.INSTALLED_APPS
Also add the following to settings.CONTEXT_PROCESSORS:
CONTEXT_PROCESSORS = (
# ...
'navutils.context_processors.menus',
)Navutils represents menus using Menu and Node instances, each menu being a collection of
node instances representing a menu link. Nodes may have children, which are also Node instances.
Let's see a minimal example.
yourapp/menu.py:
from navutils import menu
main_menu = menu.Menu('main')
menu.register(main_menu)
# will be shown to everybody
blog = menu.Node(id='blog', label='Blog', pattern_name='blog:index')
main_menu.register(blog)
# nodes created with a pattern_name argument will use django reverse
assert blog.get_url() == '/blog'
# if you want to disable reversion, use the url argument
django = menu.Node(id='django',
label='Django project',
url='http://djangoproject.com',
link_attrs={'target': '_blank'})
# Each node instance can accept an arbitrary number of children
blog.add(
menu.Node(id='last_entries',
label='Last entries',
pattern_name='blog:last_entries')
)
blog.add(
menu.Node(id='archives', label='Archives', pattern_name='blog:archives')
)
# will be shown to anonymous users only
login = menu.AnonymousNode(id='login',
label='Login',
pattern_name='accounts_login',
link_attrs={'class': 'big-button'})
main_menu.register(login)
# will be shown to authenticated users only
logout = menu.AuthenticatedNode(id='logout',
label='Logout',
pattern_name='accounts_logout')
main_menu.register(logout)yourapp/templates/index.html:
{% load navutils_tags %}
{% render_menu menu=menus.main user=request.user %}
For an anonymous user, this would output something like:
<nav class="main-menu">
<ul>
<li class="has-children menu-item">
<a href="/blog">Blog<a>
<ul class="sub-menu">
<li class="menu-item">
<a href="/blog/latest">Latest entries</a>
</li>
<li class="menu-item">
<a href="/blog/archives">Archives</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="http://djangoproject.com" target="_blank">Django project</a>
</li>
<li class="menu-item">
<a href="/login" class="big-button">Login</a>
</li>
</ul>
</nav>You can also directly set children nodes on parent instanciation with the children argument:
user = menu.Node(
id='user',
label='Greetings',
pattern_name='user:dashboard',
children=[
menu.Node(id='logout', label='Logout', pattern_name='user:logout'),
# you can nest children indefinitely
menu.Node(
id='settings',
label='Settings',
pattern_name='user:settings',
children = [
menu.Node(id='newsletter',
label='Newsletter',
pattern_name='user:settings:newsletter')
],
),
]
)Nodes can be customized in many ways:
heavily_customized_node = menu.Node(
'customized',
'My custom menu', # Supports arbitrary template values as well
# like {{ request.user }}
url='#', # Supports arbitrary template values as well
# like {{ request.user }}
# a custom CSS class that will be applied to the node on rendering
css_class='custom-class',
# the <a> title attribute
title='click me!',
# a path to a custom template for rendering the node
# it's also possible to globally specify a custom template by naming
# your template '<yourapp>/templates/navutils/node.html'
template='myapp/menu/mynode.html',
# extra context you can use in your node template
context={'foo': 'bar'},
# a dict of attributes that will be applied as HTML attributes on the <li>
attrs = {'style': 'background-color: white;'}
# a dict of attributes that will be applied as HTML attributes on the <a>
link_attrs = {'target': '_blank', 'data-something': 'fancy-stuff'}
)You'll probably want to highlight the current node in some way. Navutils provide a view mixin you an inherit from in order to achieve this.
Assuming the following menu:
from navutils import menu
main_menu = menu.Menu(id='main')
menu.register(main_menu)
login = menu.Node(id='login', label='Login', pattern_name='account_login')
main_menu.register(login)You can bind a view to a menu node with the following code:
from navutils import MenuMixin
class Login(MenuMixin, TemplateView):
current_menu_item = 'login'- Under the hood, the mixin will pass the value to the context and a current class will be added
- to the login node if the view is displayed. Note that you can achieve the same result with django function-based views, as long as you manually pass the node identifier in the context, under the current_menu_item key.
Navutils provide a few node subclasses that address common use cases.
The base Node type, will be displayed to anybody.
Displayed to anonymous users only.
Displayd to authenticated users only.
Displayed to staff users/superusers only.
Displayed to users that have the given permission. Usage:
vip_node = menu.PermissionNode('vip',
label='VIP Area',
pattern_name='vip:index',
permission='access_vip_area')Displayed to users that match a list of permission. Usage:
permissions = ['myapp.access_vip_area', 'myapp.drink_champagne']
champagne_node = menu.AllPermissionsNode('champagne',
label='Champagne!',
pattern_name='vip:champagne',
permissions=permissions)Displayed to users that match any given permission. Usage:
permissions = ['myapp.can_party', 'myapp.can_have_fun']
have_a_good_time = menu.AnyPermissionsNode('good-time',
label='Have a good time',
pattern_name='good_time',
permissions=permissions)Displayed to users that match a custom test. Usage:
def can_drink_alcohol(user, context):
return user.age >= 21 or user.looks_mature_for_his_age
drink_alcohol = menu.PassTestNode('drink',
label='Have a beer',
pattern_name='beer',
test=can_drink_alcohol)If it's not enough, you can also override the default templates:
navutils/menu.html: the menu wrapper that loop through the nodesnavutils/node.html: called for displaying each node instance
And of course, you're free to create your own sub-classes.
Breadcrumbs are set up into views, and therefore can only be used with class-based views.
First of all, you'll probably want to define a base mixin for all your views:
from navutils import BreadcrumbsMixin, Breadcrumb
class BaseMixin(BreadcrumbsMixin):
def get_breadcrumbs(self):
breadcrumbs = super(BaseMixin, self).get_breadcrumbs()
breadcrumbs.append(Breadcrumb('Home', url='/'))
return breadcrumbsThen, you can inherit from this view everywhere:
# breadcrumbs = Home > Blog
class BlogView(BaseMixin):
title = 'Blog'
# breadcrumbs = Home > Logout
class LogoutView(BaseMixin):
title = 'Logout'By default, the last element of the breadcrumb is deduced from the title attribute of the view.
However, for a complex hierarchy, you are free to override the get_breadcrumbs method:
# you can trigger url reversing via pattern_name, as for menu nodes
class BlogMixin(BaseMixin)
def get_breadcrumbs(self):
breadcrumbs = super(BlogMixin, self).get_breadcrumbs()
breadcrumbs.append(Breadcrumb('Blog', pattern_name='blog:index'))
return breadcrumbs
# breadcrumbs = Home > Blog > Last entries
class BlogIndex(BlogMixin):
title = 'Last entries'
# for dynamic titles, just override the get_title method
# breadcrumbs = Home > Blog > My category name
class CategoryDetail(BlogMixin, DetailView):
model = Category
def get_title(self):
# assuming your Category model has a title field
return self.object.titleThe last step is to render the breadcrumbs in your template. The provided mixin takes care with passing data in the context, so all you need is:
{% load navutils_tags %}
{% render_breadcrumbs breadcrumbs %}
The breadcrumbs part of navutils is bundled with two templates, feel free to override them:
navutils/breadcrumbs.html: the breadcrumbs wrappernavutils/crumb.html: used to render each crumb
That's it !
See CHANGES.rst.
Project is licensed under BSD license.