webdevpuneet.com

Related Snippets

101 in Navigation category
1–6 of 60

Fuse.js Fuzzy Command Palette

Tippy.js Dropdown Menu with Submenus

ScrollOut Progress Nav Dots

Velocity.js Elastic Menu

Bootstrap Command Palette

Bootstrap Multi-Level Dropdown Menu

Tag Cloud — Weighted Tag Cloud HTML CSS JS

Tag Cloud · Navigation · Plain HTML, CSS & JS · Live preview

CategoryNavigation
TagsKeyboard Navigation

Copy & paste

Source Code

<div class="tc-card">
  <h3>Popular topics</h3>
  <div class="tc-cloud" id="tcCloud"></div>
  <p class="tc-note" id="tcNote">Click a topic to filter.</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Weight to size and colour
Each count maps to a font-size and colour band, normalised to the data range.
Relative scaling
Sizing is relative to the set's min/max, so any count range looks right with no retuning.
Accessible buttons
Tags are real <button>s — keyboard-focusable and announced as actionable.
Flex-wrap layout
Tags wrap and baseline-align despite different sizes.
Hover scale + count
Tags scale up on hover and show the exact count via title.
Click-to-filter toggle
Selecting a tag highlights it and updates a status line; re-click clears it.
Central filter hook
One place to wire real list/result filtering by the active tag.
Data-driven & no library
Renders from a TAGS array in plain HTML/CSS/JS — zero dependencies.

About this UI Snippet

Tag Cloud — Tags Sized and Coloured by Weight, with Click-to-Filter

Screenshot of the Tag Cloud snippet rendered live

A tag cloud (or word cloud) shows a set of tags with the most frequent ones rendered larger, so popularity is visible at a glance. It is a compact way to surface topics, skills, or keywords and let users jump to one. This snippet builds a weighted, clickable tag cloud in plain HTML, CSS, and vanilla JavaScript — sizing and colouring each tag by its count — with no library.

Weight mapped to size and colour

Each tag has a count, and the snippet maps that count onto a font-size between a min and max, and onto a colour band, by normalising it against the smallest and largest counts in the set (band() returns 0–1). So the busiest tag is the biggest and boldest-coloured, the rarest the smallest and faintest, and everything scales in between. Encoding weight two ways — size *and* hue — makes the relative popularity readable even for users who find size-only clouds hard to compare, and it degrades gracefully whatever the actual count range is because it is relative, not absolute.

Real buttons, not styled text

Each tag is a <button>, so it is keyboard-focusable and announces as actionable to assistive tech — important because a tag cloud is navigation, not decoration. They wrap naturally with flexbox (flex-wrap) and align to a common baseline despite their different sizes, and each scales up slightly on hover for a tactile, clearly-clickable feel. A title shows the exact count on hover.

Click to filter

Clicking a tag marks it active (highlighted) and updates a status line; clicking it again clears the filter — a toggle. In a real app this is where you would filter your list or results by the selected tag; the snippet centralises that so wiring real filtering is a one-line addition in the click handler. Single-active toggling is the common tag-cloud interaction: pick a topic to narrow, click again to reset.

Relative, robust scaling

Because sizing is relative to the data's own min and max, the cloud looks right whether counts range 5–50 or 500–50,000 — you never have to retune the pixel sizes for a new dataset. The min/max font sizes and the colour palette are the two knobs you adjust for your design.

Data-driven and drop-in

The whole cloud renders from a TAGS array of { label, count }. Swap in your tags — blog topics, product categories, skills, search keywords — and it sizes, colours, and lays them out. It is a clear, dependency-free reference for weighted typographic scaling and accessible tag navigation. The code comment about shuffling is worth acting on for a real cloud: rendering tags in their source order (as this demo does, sorted roughly by count) makes the size gradient look deliberate and orderly, while a genuine word-cloud feel — where size, not position, carries the meaning — comes from shuffling the array before rendering so big and small tags interleave throughout the layout.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA tag cloud renders with each tag sized and coloured by its count.
  2. 2
    Read the weightsBigger, bolder-coloured tags are more popular; hover shows the exact count.
  3. 3
    Click to filterClick a tag to mark it active; click again to clear. The status line updates.
  4. 4
    Wire real filteringIn the click handler, filter your list or results by the active tag.
  5. 5
    Swap in your dataReplace the TAGS array with your own { label, count } items.
  6. 6
    Tune the scaleAdjust MIN_PX/MAX_PX and the COLORS palette to fit your design.

Real-world uses

Common Use Cases

Blog topic navigation
Surface popular topics so readers can filter posts, mapping each count to a font size and colour band relative to the set's minimum and maximum.
Search keyword clouds
Show trending search terms as clickable weighted words, with real buttons so tags are keyboard-focusable and announced as controls.
Skill and tech showcases
Weight skills by experience on a portfolio next to a profile card, with flex-wrap layout baseline-aligning tags of different sizes.
Product category browsing
Let shoppers jump to popular categories, pairing with a chip filter for a more structured filtering alternative.
Frequency visualisation and weighted type
Visualise term frequency from analytics, and learn relative font scaling, alongside badge chips and an expandable search.

Got questions?

Frequently Asked Questions

Every tag's count is normalised to 0-1 against the smallest and largest counts in the set (band() = (count − min) / (max − min)), then mapped to a font-size between MIN_PX and MAX_PX and to a colour band. So the most frequent tag is the largest and most saturated, the least frequent the smallest and faintest, scaled relative to your data — not to fixed thresholds.

Relative scaling means the cloud looks balanced for any dataset — counts of 5 to 50 or 500 to 50,000 both span the full size range — so you never have to retune pixel sizes when the data changes. Absolute thresholds would make a low-count set all tiny or a high-count set all huge. The min/max normalisation adapts automatically.

A tag cloud is interactive navigation, not decorative text, so each tag is a real <button>: it is keyboard-focusable, works with Enter/Space, and is announced as a control by screen readers. Styling spans would look the same but lose all of that. Using buttons keeps the cloud accessible while still letting CSS make them look like sized text.

The click handler already tracks the active tag and toggles it. Add your filtering where noted: filter your list/results array by the active label (or null for no filter) and re-render. Because the active state is centralised, you can also drive it from the URL (e.g. ?tag=react) so filters are shareable and survive reloads.

Compute the size and colour for each tag from the data (a useMemo in React, computed in Vue, a getter in Angular) and render buttons from the TAGS array. Hold the active tag in state, toggle it on click, and derive your filtered content from it. The band()/scaling math is framework-agnostic — only the active state and rendering move into the framework.

Yes. While the Tag Cloud snippet gives you one pattern to copy, the free Responsive Navbar Builder at webdevpuneet.com/navbar-builder/ designs a whole navigation bar: logo, links and dropdown menus, a mobile hamburger menu (dropdown panel, slide-in drawer or full screen) and a scroll effect (sticky, shrink, hide on scroll or transparent). It has six presets, a live preview that runs the real code, and exports HTML + CSS + vanilla JS, React, Tailwind, Vue 3 or Angular — or you can click Fork & Edit to keep editing it in My Code.