Navbar
Contextual Article Navbar
A reading and learning header: back to the section, a shortened title, a table of contents, a Next lesson action and a glowing progress bar. Progress comes from the project or is measured by the block.
What you can change
- title and backLabel — the material and the section to return to; chapters — the contents
- progress — a 0–100 value from your scrollspy; null removes the bar
- autoProgress — the block measures the document itself when no one else does
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/navbar-018?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, a client component. By default the progress bar renders a value passed by whoever owns the scroll: one page should not measure scrolling twice. If there is no one to measure, autoProgress turns on the block's own measurement of the document through a passive scroll listener. The table of contents closes on Escape and on an outside click, its links get tabindex=-1 while closed, and the current chapter is marked with a vertical accent line. The bar never grows beyond one line and never eats reading height; in a narrow column the action is hidden, because going back and the contents matter more. Palette --vibeui-navbar-018-*.
Tags
- navbar
- header
- article
- reading
- lesson
- progress
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…