Navbar

A navbar with centered desktop links, support and GitHub actions, and a mobile menu.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/navbar.json

Usage

tsx

import { Navbar } from "@/components/hangry-ui/blocks/navbar";

<Navbar
  brand="Acme"
  badge=""
  activeHref="/products"
  links={[
    { label: "Products", href: "/products" },
    { label: "About", href: "/about" },
  ]}
  githubHref="https://github.com/acme"
  supportHref="/sponser"
/>

Navbar

A navbar with navigation links beside the brand.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/navbar-aligned.json

Usage

tsx

import { NavbarAligned } from "@/components/hangry-ui/blocks/navbar-aligned";

<NavbarAligned
  brand="Acme"
  badge=""
  activeHref="/products"
  links={[
    { label: "Products", href: "/products" },
    { label: "About", href: "/about" },
  ]}
  githubHref="https://github.com/acme"
  supportHref="/sponser"
/>

Navbar

An inset navbar with a bordered surface and shadow.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/navbar-floating.json

Usage

tsx

import { NavbarFloating } from "@/components/hangry-ui/blocks/navbar-floating";

<NavbarFloating
  brand="Acme"
  badge=""
  activeHref="/products"
  links={[
    { label: "Products", href: "/products" },
    { label: "About", href: "/about" },
  ]}
  githubHref="https://github.com/acme"
  supportHref="/sponser"
/>