A product bar with a wordmark, plain links, an Apps trigger and an initials avatar. Apps opens a floating card holding a four by three grid of app tiles, each an icon square, a name and a one-liner. On phones the top bar keeps the brand and a fixed bottom tab bar carries five icon tabs, the centre one raising the app grid as a sheet. The card and the sheet stay in the markup and are toggled with CSS.
A product bar with a wordmark, plain links, an Apps trigger and an initials avatar. Apps opens a floating card with a four by three grid of app tiles, and on phones a fixed bottom tab bar carries five icon tabs, the centre one raising the same apps as a sheet.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://beste.dev/r/navbar93?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar93?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar93.tsx; it uses no shadcn primitives, only lucide-react icons.
The installed file exports navbar93Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar93, navbar93Demo } from "@/components/beste/block/navbar93";
export default function Page() {
return <Navbar93 {...navbar93Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar93 } from "@/components/beste/block/navbar93";
export default function Page() {
return (
<Navbar93
brand="Orbit"
links={[
{ label: "Dashboard", href: "/dashboard" },
{ label: "Projects", href: "/projects" },
]}
apps={[
{ icon: "mail", name: "Mail", description: "Shared inboxes and threads.", href: "/mail" },
{ icon: "calendar", name: "Calendar", description: "Rooms, rotas and reminders.", href: "/calendar" },
{ icon: "docs", name: "Docs", description: "Write and review together.", href: "/docs" },
]}
allApps={{ label: "Browse all apps", href: "/apps" }}
tabs={[
{ icon: "home", label: "Home", href: "/" },
{ icon: "search", label: "Search", href: "/search" },
{ icon: "inbox", label: "Inbox", href: "/inbox" },
{ icon: "user", label: "Profile", href: "/profile" },
]}
avatar={{ initials: "NS", href: "/account" }}
labels={{ apps: "Apps", account: "Your account", close: "Close apps" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
links | NavItem[] | [] | Plain links in the desktop bar |
apps | AppTile[] | [] | Tiles in the launcher card and the mobile sheet; twelve fill the four by three grid |
allApps | NavItem | – | Link under the grid |
tabs | TabItem[] | [] | Mobile tab bar links; four of them sit either side of the centre Apps tab |
avatar | { initials: string; href: string } | – | Round initials link on the right |
labels | { apps?: string; account?: string; close?: string } | {} | Apps trigger and tab label, avatar name, and the tab name while the sheet is open |
className | string | – | Extra classes for the outer <header> |
type IconName =
| "mail" | "calendar" | "folder" | "docs" | "sheets" | "chat" | "meet" | "tasks"
| "forms" | "analytics" | "billing" | "admin" | "home" | "search" | "inbox" | "user";
type AppTile = {
icon: IconName;
name: string;
description: string;
href: string;
};
type TabItem = {
icon: IconName;
label: string;
href: string;
};
type NavItem = {
label: string;
href: string;
};motion-safe:.tabs in half around a centre Apps button that carries aria-expanded and aria-controls; tapping a link tab marks it with aria-current="page" and closes the sheet.translate-y-full to translate-y-0), is inert while closed, locks body scroll while open and closes on a tile tap, the scrim or Escape.<header>, because backdrop-filter on the header would become the containing block for the fixed tab bar and sheet.