Skip to content
Related Articles

Related Articles

Improve Article

Navigation Bars in Flask

  • Last Updated : 04 Jul, 2021
Geek Week

Navigation across HTML pages is quite a common way to work across pages. The client-side navigation approach is commonly used in HTML. However, having custom server-end navigations can provide greater flexibilities as far as customizations are concerned. This article walks you through a way to integrate Server end navigation using Navbars in Flask.

Flask Navigation

This module is used to build navigation bars in the flask application.

  • Allows server end navigation from one page to another.
  • Helps to define HTML classes and Navigation items from Python.

Installation

To install this module type the below command in the terminal.

pip install Flask-Navigation

Functions Used

nav.Bar(name, items) : Initializing name of navigation class with items definition.
nav.Item( label, url, args) : Assigns items or lists for each bar. Label name, its linked page URL and extra args like parameter and value of dictionary.

After installation, the next step is to initialize the app context with Navigation(), and define the basic HTML to navigate. Navigation bars also need to be defined in the code using Bar(), with takes position and list of items are parameters of Navigation Bars. Each Item is input with its label, URL, and parameters passed in the URL.



Step 1: Importing Libraries, adding app context and  Initializing Navigation Class Object. 

Python3




from flask import Flask, render_template
from flask_navigation import Navigation
  
app = Flask(__name__)
nav = Navigation(app)

Step 2: Adding Navigation Definition

Python3




# initializing Navigations
nav.Bar('top', [
    nav.Item('Home', 'index'),
    nav.Item('Gfg', 'gfg', {'page': 5}),
])

Step 3: Adding flask Routes and run application.

Python3




@app.route('/')
def index():
    return render_template('index.html')
  
  
@app.route('/navpage')
def navpage():
    return render_template('navpage.html')
  
  
@app.route('/gfg/<int:page>')
def gfg(page):
    return render_template('gfg.html', page=page)
  
  
if __name__ == '__main__':
    app.run()

Templates :

navpage.html

In this, for loop is used to iterate to render all the items defined under the top bar, with their url and labels.



HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    {% for item in nav.top %}
    <li class="{{ 'active' if item.is_active else '' }}">
        <a href="{{ item.url }}">{{ item.label }}</a>
    </li>
    {% endfor %}
</ul>
</body>
</html>

index.html

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>Index page</b>
</body>
</html>

gfg.html

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<b>GFG Page 5</b>
</body>
</html>

While opening navpage.html, on click of each item, the page is navigated to the required URL as configured for navigation. 

Output:

Explanation:

In navpage.html, each item of navbar is iterated and rendered. Onclick, class is activated and anchor tag takes to the defined path, the linked pages.

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course




My Personal Notes arrow_drop_up
Recommended Articles
Page :