Open In App

Navigation Bars in Flask

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 26 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads