Flask Nav with Flask Bootstrap: 'Navbar' object has no attribute 'kwargs'

Question

In this code Flask Nav works until I add the Flask Bootstrap code:

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import Navbar, Subgroup, View, Link, Text, Separator

app = Flask(__name__)
nav = Nav(app)

nav.register_element('my_navbar', Navbar(
    'thenav',
    View('Home Page', 'index'),
    View('Item', 'item', item=1),
    Separator(),
    Link('Google', 'https://www.google.com'),
    Separator(),
    Text('Some text'),
    Subgroup('Extras',
        Link('Yahoo', 'https://www.yahoo.com'),
        View('Index', 'index')
    )
))

Bootstrap(app)

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

@app.route('/items/<item>')
def item(item):
    return '<h2>The item is {} </h2>'.format(item)

if __name__ == '__main__':
    app.run(debug=True)

As soon as Flask Bootstrap is added I get

AttributeError: 'Navbar' object has no attribute 'kwargs'

Answer 1

I had this problem too when using flask-boostrap 4.0.2 because I was aiming to use Bootstrap 4. Reverting to flask-bootstrap 3.3.7.1, it started working (provided I also used Boostrap 3.3.7). At the time of writing, 3.3.7.1 seems to be the latest version of flask-boostrap and is 2 years stale. The alleged "flask-bootstrap4" is going on a year of no new releases, and doesn't seem to have a public git repo for folks to contribute to. I believe the nav.Bootstraprenderer class is broken in v4, yet v3 code doesn't render NavBars properly if using BS4.

After spending a couple hours on this, i'm not so sure we get a lot using flask-boostrap: it's not hard to just maintain our own Jinja2 base template importing the versions of BS we want, along with the basic blocks.

Answer 2

After struggling for 20 days What i figured out is My Navbar was created in pyhton using flask-nav but seems like flask-Bootstrap4 version is not compatible with flask-nav. So I commented out all Nav-bar related code and tried to create NavBar in HTML itself using Bootstrap4. Then it worked for me. I used cosmo.Bootstrap.min.css theme.And You should install flask-Bootstrap4 i.e: pip install flask-Bootstrap4 Hope this answer will be helpful.

My HTML code implementation of NavBar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{{ url_for('index') }}">NavBar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" 
     data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" 
       aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="{{ url_for('index') }}">Home <span 
          class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('Title_2') }}">Title_2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('Title_3') }}">Title_3</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          User
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="{{ url_for('login') }}">Login</a>
<a class="dropdown-item" href={{url_for('change_password')}}">Change Password</a>
          <a class="dropdown-item" href={{url_for('logout')}}">Logout</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

You can follow this link and get the idea how to implement NavBar: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates