Flask: Navbar generation with flask_navbar

Question

I have an application with static navbar. Now I want to generate it dynamically (different for admin and non-admin users, inject modules items etc). So I decided to use flask_navbar for that. Upon completion the generated HTML is slightly different then static one:

static:

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="/">Home</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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
            Orders
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/orders">List orders</a>
            <a class="dropdown-item" href="/orders/new">New order</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/payments">Wallet</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">Logout</a>
        </li>
        <li class="nav-item">
            {{ current_user.username }}
        </li>
      </ul>
    </div>
  </nav>

flask_navbar:

def init_navbar(app):
    topbar = Navbar('Home',
        Subgroup('Orders',
            Link('List orders', '/orders'),
            Link('New order', '/orders/new')
        ),
        Link('Wallet', '/wallet'),
        Link('Logout', '/logout'),
        Text(current_user.username)
    )
    nav.register_element('top', topbar)
    nav.init_app(app)

and the result:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#c651965884bf4a0ebf66fb4d25f49b4907129dc9" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Home</span>
    </div>
    <div class="navbar-collapse collapse" id="c651965884bf4a0ebf66fb4d25f49b4907129dc9">
      <li class="dropdown">
        <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Orders
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="/orders">List orders</a>
          </li>
          <li>
            <a href="/orders/new">New order</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/payments">Wallet</a>
      </li>
      <li>
        <a href="/logout">Logout</a>
      </li>
      <p class="navbar-text">{{ current_user.username }}</p>
    </div>
  </div>
</nav>

The result of dynamically generated navbar is unsatisfying:

whilst I expected this:

What is the reason for the difference? Should I go for a custom renderer?