نوار بالا
navbarبلاکهدر چسبان با لوگو در راست، لینکها در وسط و دو دکمه در چپ، که در موبایل به یک کشو از سمت راست تبدیل میشه.
لندینگناوبری
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add navbarنصب دستی
محتوای تب «کد» را در
components/blocks/navbar.tsxبگذارید. پیشنیاز: button، sheet.$ npm i lucide-reactکپی کل فایلregistry json
ساختهشده از
استفاده
usage.tsx
1import { Navbar } from "@/components/blocks/navbar"23<Navbar4 logo="دکان"5 links={[{ label: "ویژگیها", href: "#features" }, { label: "قیمت", href: "#pricing", active: true }, { label: "وبلاگ", href: "/blog" }]}6 primary={{ label: "شروع رایگان" }}7 secondary={{ label: "ورود" }}8/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| links | NavLink[] | - | لینک فعال با aria-current علامت میخوره. |
| sticky | boolean | true | چسبیدن به بالای صفحه با پسزمینهی مات. |