Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Navbars
Four mastheads for the four kinds of site the group builds: shop, course, help desk and landing page. All of them live on this page.
Shop
Two strips. Search sits in the middle of the first because on a shop it IS the navigation; the second carries the department mega menu, which shows the shelves instead of repeating names already on the page.
Hello, Ada LovelaceMy account
<masthead-ecommerce :links :departments :account-menu :cart-count :wishlist-count />
Property portal
The shop's two strips, with what a portal searches and keeps: a SCOPE on the field (listings, agents, agencies), favourites that open their own list, the account as a short list and, on a phone, a side drawer with the account at the top. The cart only shows when it is passed.
Hello, Ada LovelaceMy account
<masthead-real-estate :links :departments :scopes :account-links :wishlist-count wishlist-menu />
Course
What a learning site has and no other does: a place in a sequence. The second strip says which course and how much is left, with both numbers beside the bar - "68%" alone is a figure nobody can act on.
Interface design systems
<masthead-learn :links :course :done :total />
Help desk
The service’s state in the bar and one filled button, the one that opens a ticket. Whoever arrives at a help desk is usually there because something is broken, and "we are aware of it" said in the bar spares a ticket and a wait.
<masthead-help-desk :links :status status-tone :ticket-label />
Landing page
The one with the least in it, on purpose. A landing page has a single job, and every extra control in the bar is an exit from it: what is left is the brand, the page’s own sections and the two actions.
<masthead-landing :links :cta-label :sign-in-label />
floating: glass over the hero
The visual foundation of the group’s platforms.
<masthead-landing floating />
With `floating` the bar leaves the flow and becomes glass over the hero - whoever mounts it that way has to give the hero the top padding, because the bar takes no height at all.
The phone version
The five bars in a 390px viewport. The phone layout comes from media queries, and those measure the WINDOW: a narrow box in the middle of a wide page would still show the desktop bar.
They are iframes of a real route (`/componentes/chrome-preview`), so what is here responds to touch: open the hamburger, the shop’s magnifier and the language menu.
With and without the capsule
The same bar twice; the only difference is `flat`. The round capsule is the template’s default, and it is what makes an icon control visible over a translucent bar.
flat, no capsule
Default, with the capsule
<masthead-help-desk lens />
On a bar whose other items are flat text links, the round surface reads as the one control that has been pressed; on a dense bar, four capsules in a row are four objects competing with the brand. The icons and the menus change TOGETHER: mixing the two skins is worse than either.
The contract they share
All four take the same four things. The rest is specific to each kind of site.
| Prop / event | What it does |
|---|---|
links | The bar’s links, already translated by whoever passes them. The bar holds no label of its own. |
wide | Releases the content box’s ceiling, for an area that is always full width. |
embedded | Drops the `sticky`, for a bar mounted INSIDE a page - it is what lets the samples here be the real bars. |
search | The term leaves as an event; whoever knows the listing route is the application. A search that only lives in a component’s memory is a search nobody can send to anyone. |
For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/navbars.md