Overview
Generate a floating pill navbar: brand name on the left, three navigation links in the middle, and a call-to-action button on the right, all in one rounded glass container. The canvas previews it live, and the export box provides HTML, Tailwind, and React starting points.
How It Works
The canvas renders the worked navbar over a dark backdrop: a bold brand wordmark, the links Tools, Prompts, and Docs, and a blue Console button, arranged inside a rounded translucent pill. Below, the export box lists the markup in three tabs. Copy the HTML and CSS tab for the complete structure, or use the Tailwind and React scaffolds as starting points.
Step-by-Step Usage Guide
- Review the pill navbar on the canvas.
- Copy the HTML and CSS tab for the complete markup skeleton.
- Replace the brand, link labels, fragment hrefs, and button label with your own.
- Add your styling or port the utility classes, then handle mobile navigation yourself.
Technical Specifications & Standards
The HTML and CSS tab emits the semantic skeleton: a nav element containing a brand div, a links container, and a button. In the export the links are real anchor elements pointing at fragment URLs, which you should replace with your routes; in the canvas they render as plain text to avoid navigation. As with the other templates here, the export carries class names but no stylesheet, so you provide the CSS or apply the utility classes shown in the preview; the pill's glass look in the canvas comes from a translucent white surface, backdrop blur, and border that you will need to reproduce. Responsiveness is illustrated rather than solved: the canvas hides the link row on narrow widths with a responsive utility class, and the export's fixed-width assumption means you must decide the mobile behavior yourself, typically a hamburger menu, which the template does not include. Sticky positioning, scroll behavior, active-link highlighting, and dropdowns are likewise application concerns outside the template.
Targeted Use Cases
- Starting a marketing site or documentation header with a compact floating nav.
- Prototyping a landing page header during a design review.
- Giving a developer a consistent brand-plus-links-plus-CTA structure.
- Comparing a pill-style navbar against a full-width bar before committing.
Notes & Gotchas
- Replace the fragment hrefs with real routes; the export points at placeholder anchors.
- Decide and implement the mobile behavior; the template only illustrates hiding links on narrow screens.
- Reproduce the glass styling yourself; the export ships class names, not CSS.
- Add active-link state and keyboard focus styles in your application.
Frequently Asked Questions
Why is there no CSS with the exported navbar?
The template emits structure and class names only. The glass pill styling visible on the canvas must be written by you or ported from the utility classes used in the preview.
How does the navbar behave on mobile?
The preview hides the link row on narrow screens, but there is no hamburger menu or drawer in the template. Implement your own mobile navigation around the exported brand and button.
Can the links point to real pages?
Yes; edit the href attributes, which are placeholder fragments in the export. The canvas renders the same links as inert text.
Does the navbar stick to the top when scrolling?
Not by default. Sticky positioning is a behavior your application adds; the template is the in-flow markup.