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.
