vibecodng.com

Free MCP betaIndex and tools live

Measured entry

meraki-navbar-categories

navbarminimal-flat

A dual-row content navbar with a logo, search field, primary links, collapsible mobile menu, and a horizontally scrollable category rail. It ships as standalone HTML styled with Tailwind utility classes, uses Alpine.js for menu state, loads the Meraki logo remotely, and includes a small custom scrollbar-hiding rule.

Specimen
Harness screenshot of meraki-navbar-categories at 375 pixels wide
Harness screenshot at 375 pixels wide. This viewport scrolled sideways.
Harness screenshot of meraki-navbar-categories at 768 pixels wide
Harness screenshot at 768 pixels wide. This viewport scrolled sideways.
Harness screenshot of meraki-navbar-categories at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for meraki-navbar-categories
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowflagged at 375, 768
Axe critical0
Axe serious1
Axe moderate0
Axe minor0
Gzip marginal18.7 KB (84.1 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usednone

Verdict

A practical starting point for editorial or catalog navigation, and it builds and mounts without framework scaffolding. Adopt it only with responsive cleanup and an accessible name for the logo link; otherwise the narrow-screen overflow and serious link-label issue make it unsuitable for production as copied.

Use it if

  • You need a content-heavy header that keeps primary navigation separate from topic categories.
  • Your stack already supports Tailwind utilities and Alpine directives.
  • A horizontally scrollable category rail fits your mobile navigation model.

Skip it if

  • You require narrow layouts to stay free of horizontal page overflow without modification.
  • You need an accessible logo link out of the box, since its image has empty alternative text and the link has no discernible name.
  • Your project avoids client-side CDN dependencies or Alpine.js.
  • You need a compact header with only a few destinations rather than a dense category catalog.

Install

Installation record for meraki-navbar-categories
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add Tailwind CSS and Alpine.js, preserve the custom scrollbar-hiding CSS and x-cloak behavior, and replace or self-host the remote logo. Also wire real link targets, give the logo link an accessible name, and adjust the narrow layout so the page itself does not overflow.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/merakiui/merakiui
License
MIT
Record published
2026-08-14

Alternatives

Other published entries for the navbar pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.