© 2026 Leviy

Navigation drawer

Usage

When you extend the base template of the microservice to @leviy-templates/base.html.twig, there will be a navigation drawer displayed by default.

The javascript initialization is handled automatically and makes the Navdrawer toggle work.

import Navdrawer from 'leviy/user-interface/components/navdrawer/Navdrawer';

const navdrawer = new Navdrawer();
navdrawer.initialize();

Remove

To remove the navigation drawer overwrite the navdrawer block with empty content. Like this:

{% block navdrawer %}{% endblock %}

Customize

Within the navdrawer block their are a couple of blocks that can be used to further customize the navigation drawer:

navdrawerHeader
Logo and name of the organization of the logged in user. Renders empty by default.
localNavigation
Local navigation in addition to the toolbar navigation. Renders empty by default.
info It's a good practise to define the `navdrawerHeader` block in the base template of the microservice, to create consistency throughout the microservice. The `localNavigation` block definition isn't mandatory, because it renders empty by default. When you define a `localNavigation` block it's a good practise to put this block definition above the `content` block definition.

Organization header

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/organization-header.html.twig' with {
        'organization': {
            'logo': 'http://acmelogos.com/images/logo-4.svg',
            'name': 'Acme'
        }
    } %}
{% endblock %}

Regular header

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/regular-header.html.twig' with {
        'title': 'Regular header'
    } %}
{% endblock %}

Local navigation

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': [
            {'label': 'Item 1', 'icon': 'rv_hookup', 'uri': '#item', 'current': true, 'menu': [
                {'label': 'Sub item 1', 'icon': 'hot_tub', 'uri': '#sub_item1'},
                {'label': 'Sub item 2', 'icon': 'child_care', 'uri': '#sub_item1', 'current': true},
            ]},
            {'divider': true},
            {'subheader': 'Header'},
            {'label': 'Item 2', 'uri': '#item'},
            {'label': 'Item 3', 'uri': '#item'},
            {'divider': true},
            {'subheader': 'Outgoing links'},
            {'label': 'Item 4', 'uri': 'http://www.leviy.com', 'linkAttributes': {'target': '_blank'}},
        ]
    } %}
{% endblock %}

To make our live a little bit easier the local-navigation component is compatible with KnpMenuBundle:

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': knp_menu_get('local_navigation')
    } %}
{% endblock %}

Valid extra options for $child->setExtra('...', '...');.

icon
A valid Material.io icon to show with the menu item.
subheader
Adds a subheader before the menu item.
divider
Either prepend or append. Adds a divider either before or after the menu item.

The whole shebang

{% block navdrawerHeader %}
    {% include '@leviy-templates/components/navdrawer/organization-header.html.twig' with {
        'organization': {
            'logo': 'http://acmelogos.com/images/logo-4.svg',
            'name': 'Acme'
        }
    } %}
{% endblock %}

{% block localNavigation %}
    {% include '@leviy-templates/components/navdrawer/local-navigation.html.twig' with {
        'menu': [
            {'label': 'Item 1', 'uri': '#item', 'current': true, 'menu': [
                {'label': 'Sub item 1', 'uri': '#sub_item1'},
                {'label': 'Sub item 2', 'uri': '#sub_item1', 'current': true},
            ]},
            {'divider': true},
            {'subheader': 'Header'},
            {'label': 'Item 2', 'uri': '#item'},
            {'label': 'Item 3', 'uri': '#item'},
        ]
    } %}
{% endblock %}