Set Active Class on Nav-Menu-Item in Nunjucks

100%

Set Active Class on Nav-Menu-Item in Nunjucks

✓ Published0🌍 Public

Last edited Apr 29, 2017

Created on Jul 25, 2017

This example demonstrates a Nunjucks template pattern for conditionally applying an "active" class to a navigation menu item based on the current page. It shows how a `page_title` variable, set in an extending template, is compared against each item in a `navItems` array from a `data.json` file. The `for` loop iterates through the items, and an inline `if` statement appends the `menu-item-current` class when the titles match. The resulting HTML output is displayed, highlighting the active "about" link.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 749f66edf8a547d2508e958f7ec38e50

This example displays a styled list of articles with titles, publication dates, short descriptions, and "Read More" buttons, built using a Nunjucks template that extends a layout file. It shows how to structure a content listing page by iterating through articles sorted by a helper function, pulling metadata like feature images and date formatting. The template integrates Jinja-style logic with `moment` for date display and uses environment helpers to retrieve local assets. The rendering relies on HTML and CSS classes, with no client-side JavaScript libraries involved.

LLucyI

59% match

Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM

53% match

Loading thumbnail…

LESSON 81 JAVASCRIPT

This example demonstrates a responsive navigation menu for a single-page website, built with HTML, CSS, and vanilla JavaScript. It shows a hamburger button that toggles a sliding panel containing anchor links to five numbered sections. The code uses CSS custom properties for theming, the Hamburgers library for the animated icon, and JavaScript event listeners to handle menu interactions and smooth scrolling. The page features a green background and a yellow header, with all styling defined in an external stylesheet.

Jjuansebas930329

52% match

Loading thumbnail…

D3 PJAX (& execute JS loaded through the d3.html() request as well)

This example demonstrates a PJAX-style navigation pattern using D3.js, where clicking menu links asynchronously loads page content into a central area without full page reloads. The demo includes three pages (Anteater, Baobao, Cuttlefish), each displaying an article and a script-generated timestamp. The `d3.html()` API fetches the requested HTML fragment, while the `pjax` function handles click events, updates the browser history via `history.pushState`, and re-applies links after each load. It also executes any JavaScript found in the loaded fragment, using a custom `evalScript` function and a `d3.selection.prototype.replaceWtext` hack to safely replace `document.write` calls with text content.

GGerHobbelt

52% match

Loading thumbnail…

Your Website

This example demonstrates a basic multi-page website structure with a navigation bar, homepage content, and interactive button functionality. The page uses plain HTML with linked CSS styling and a JavaScript script. The CSS defines a dark navigation bar with hover effects and page typography, while the JavaScript uses the `querySelector` and `addEventListener` APIs to trigger an alert dialog when a button is clicked. The data is static HTML content, with no external libraries or data sources referenced.

VVinay Vemuri

51% match

Loading thumbnail…

Untitled

This example presents a mobile-style user interface for an iNaturalist data visualizer, built with the Onsen UI framework and jQuery. The interface includes a navigator with a tab bar offering five sections: Home, Time, Space, Species, and Settings. Each tab is a separate page template, with the Home page containing a file input for uploading CSV data. The JavaScript handles page initialization events and logs tab clicks through jQuery’s `$(document).ready` and `click` handlers, though the actual data visualization logic is not yet implemented.

Aarun-subba

50% match

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

50% match

Loading thumbnail…

Untitled

This example demonstrates a responsive website layout built with HTML5 and CSS, featuring a navigation bar, introductory image, and content sections for boxes, events, and projects. The page uses semantic structural elements like `header`, `nav`, `main`, and `section` tags to organize material, with styling applied through a CSS framework. The design incorporates interactive buttons and links, and the visual hierarchy relies on header tags and horizontal rules. The layout is defined directly in the HTML structure, with no JavaScript libraries or data-viz libraries present.

DDannwiz

50% match