flask-nav not working with flask-bootstrap sample application

Question

I'm trying to recreate this sample app that is supplied with flask-bootstrap, but have run into an issue rendering the navbar. I get the error: inja2.exceptions.UndefinedError: 'flask_nav.Nav object' has no attribute 'fronend_top'

The example app is here: https://github.com/mbr/flask-bootstrap/tree/master/sample_app

And the flask-nav example is here: http://pythonhosted.org/flask-nav/getting-started.html#rendering-the-navbar

As far as I can tell I'm doing what seems to be correct, but I guess the nav isn't being passed to the web page context? Not sure.

Here is my server.py

from flask import Blueprint, render_template, flash, redirect, url_for
from flask_bootstrap import __version__ as FLASK_BOOTSTRAP_VERSION
from flask_bootstrap import Bootstrap
from flask_nav.elements import Navbar, View, Subgroup, Link, Text, Separator
from markupsafe import escape
from flask_nav import Nav
from forms import SignupForm
from flask import Flask
#from nav import nav


frontend = Blueprint('frontend', __name__)

# We're adding a navbar as well through flask-navbar. In our example, the
# navbar has an usual amount of Link-Elements, more commonly you will have a
# lot more View instances.
nav = Nav()
nav.register_element('frontend_top', Navbar(
    View('Flask-Bootstrap', '.index'),
    View('Home', '.index'),
    View('Forms Example', '.example_form'),
    View('Debug-Info', 'debug.debug_root'), ))


# Our index-page just shows a quick explanation. Check out the template
# "templates/index.html" documentation for more details.
@frontend.route('/')
def index():
    return render_template('index.html', nav=nav)



app = Flask(__name__)

app.register_blueprint(frontend)
bootstrap = Bootstrap(app)
nav.init_app(app)

app.run(debug=True)

And here is the line that is throwing the error in my base.html

{% block navbar %}
{{nav.fronend_top.render()}}
{% endblock %}

Thanks for any help!

Answer 1

Are you trying this with flask-boostrap4? If so, i found that it's Navbar Renderer is broken and causes the same error you found. Using flask-boostrap v3 along with BS 3 seems to fix it.

Answer 2

I was able to use this: https://github.com/mbr/flask-nav/blob/master/example/init.py

and this: http://pythonhosted.org/flask-nav/getting-started.html#rendering-the-navbar

to create a simplified version which worked. I started with the create_app method from the init example, which worked, then removed the method in the example below. Maybe it had to do with it being a blueprint? so it didn't have the nav object?

from flask import Blueprint, render_template, flash, redirect, url_for
from flask_bootstrap import __version__ as FLASK_BOOTSTRAP_VERSION
from flask_bootstrap import Bootstrap
from flask_nav.elements import Navbar, View, Subgroup, Link, Text, Separator
from markupsafe import escape
from flask_nav import Nav
from forms import SignupForm
from flask import Flask
#from nav import nav
app = Flask(__name__)

nav = Nav()
topbar = Navbar('',
    View('Home', 'index'),
)
nav.register_element('top', topbar)


# not good style, but like to keep our examples short
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/products/<product>/')
def products(product):
    return render_template('index.html', msg='Buy our {}'.format(product))

@app.route('/about-us/')
def about():
    return render_template('index.html')


# Shows a long signup form, demonstrating form rendering.
@app.route('/example-form/', methods=('GET', 'POST'))
def example_form():
    form = SignupForm()

    if form.validate_on_submit():
        flash('Hello, {}. You have successfully signed up'
              .format(escape(form.name.data)))

        # In a real application, you may wish to avoid this tedious redirect.
        return redirect(url_for('.index'))

    return render_template('signup.html', form=form)


nav.init_app(app)
bootstrap = Bootstrap(app)
app.run(debug=True)